getter & setter

getter와 setter는 객체 지향 프로그래밍에서 사용되는 개념이며, 일종의 메서드라고 보면 된다. 즉, 단어 그대로 getter는 객체의 속성(property) 값을 반환하는 메서드이며, setter는 객체의 속성 값을 설정, 변경하는 메서드라고 보면 된다. 예를 들어 user 라는 객체가 있을 경우, 보통이라면 user.name으로 프로퍼티로 바로 접근해서 이름값을 가져오거나 재설정 할 텐데 const user = { name: 'inpa', age: 50 } console.log(user.name); // inpa user.name = 'tistory'; 위와 같이 바로 접근하지 말고 getName(), setName() 메서드를 통해 경유해서 설정하도록 하는 기법이 바로 getter와 sett..

2023.12.22

ES6 class

ES6 클래스 문법은 좀 더 JAVA 스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5 까지 JavaScript에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현 해왔었는데 ES6 버전에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. ES5 프로토타입 문법 VS ES6 클래스 문법 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조다. ES5 프로토타입 문법 // 생성자 함수 function Person({name, age}){ this.name = name; this.age = age; } Person.prototype.introduce..

2023.12.22

try...catch 에러 핸들링

보통의 스크립트에서 에러가 발생하면 스크립트가 즉시 중단되고, 콘솔에 에러가 출력됩니다. 그러나 try...catch문을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 됩니다. try...catch try { // code throw new Error('에러 발생'); } catch (e) { // error handling } finally { // code } try...catch의 알고리즘 1. 먼저, try{...} 안의 코드가 실행됩니다. 2. 에러가 없다면 try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다. 3. 에러가 있다면 try 안 코드의 실행이 중단되고, catch(e) 블록으로 제어 흐름이 넘어갑니다. 변수 e는 무슨..

2023.12.22

Javascript 네이밍(Naming)과 클린 코드(Clean Code)

1. Naming Convention 1-1. 기본사항 변수명은 자체 설명적이어야 함 JavaScript에서는 camelCase, PascalCase를 사용 // bad const value = 'Robin'; const val = 'Robin'; // good const firstName = 'Robin'; 1-2. Components, Class, 생성자 함수 컴포넌트, 클래스, 생성자 함수는 PascalCase를 사용 class UserProfile{ ... } function UserProfile(name, year){ this.name = name; this.year = year; } 1-3. Arrays 변수 이름에 복수, 단수 표현하기 // bad const fruit = ['apple', ..

2023.12.22

Spread Operator

Spread Operator 마침표를 연달아 3개(...)를 찍는 문법을 스프레드 오퍼레이터(Spread Operator)라고 합니다. Spread의 뜻은 (펼치다, 퍼트리다) 이며, 한글로는 '펼침연산자' 라고도 합니다. 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있습니다. Spread Operator는 대괄호, 중괄호, 소괄호 안에서만 사용 가능하며 외부에서 사용할 경우, 에러가 발생합니다. JavaScript Spread 연산자(...)를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있습니다. 1. Sperad Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 ..

2023.12.22

정규식, 정규 표현식 regExp

웹 개발을 하다보면 유저가 입력한 텍스트에 대해 검증해야 하는 경우가 있습니다. 대표적인 예시로 회원 가입시 비밀번호 입력을 들 수 있습니다. ‘영문 대문자, 소문자, 특수기호로 이뤄져야 한다.’ 등의 검증 로직을 정규식을 활용하여 구현할 수 있다. 정규식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchAll() (en-US), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있습니다. 정규 표현식 만들기 정규 표현식 객체를 생성하려면 정규 표현식 리터럴이나..

2023.05.31