1. undefined/null/undeclared의 차이
undefined, null, undeclared는 전부 변수에 값이 없다를 뜻함
1. undefined란?
- undefined는 원시값으로 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당됨
- undefined의 초기값은 undefined 원시값임
- typeof undefined는 undefined임
- 아래의 경우에 변수가 undefined를 반환함
- 값을 할당하지 않은 변수
- 메서드와 선언에서 변수가 할당받지 않은 경우
- 함수가 값을 return하지 않았을 때
- undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값으로, 개발자가 의도적으로 변수에 할당할 때는 null을 할당함
2. null이란?
- null은 원시값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현함
해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미함
- typeof null은 object이나 null은 원시타입으로 자바스크립트에서는 구현버그로 간주함
- undefined == null은 둘 다 값이 없으니까 true
- undefined === null은 false
- 아래의 경우에 함수가 null을 반환함
- 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 함
3. undeclared란?
- 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태를 의미함
- 선언하지 않은 변수에 접근하고자 할 때는 ReferenceError가 발생, typeof를 하면 undefined를 반환함
2. map/forEach/reduce
아래의 메소드는 모두 사본을 반환하며 원래의 배열은 바뀌지 않음
1. map이란?
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함
- 구문: arr.map(callback(currentValue[, index[, array]]), [, thisArg])
- callback: 새로운 배열 요소를 생성하는 함수, 다음 세가지 매개변수를 가짐
- 첫번째 매개변수: 처리할 현재요소
- 두번째 매개변수: 처리할 현재 요소의 인덱스
- 세번째 매개변수: map()을 호출한 배열
- thisArg: callback을 실행할 때 this로 사용되는 값
2. forEach란?
- forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행함
- 구문: arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
- callback: 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받음
- currentValue: 처리할 현재 요소
- index: 처리할 현재 요소의 인덱스
- array: forEach()를 호출한 배열
- thisArg: callback을 실행할 때 this로 사용할 값.
3. reduce란?
- reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환함
- 구문: arr.reduce(callback(accumulator, currentValue, currentIndex, array)[, initialValue])
- callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 매개변수를 받음
- accumulator: 콜백의 반환값을 누적함. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임.
- currentValue: 처리할 현재 요소.
- currentIndex: 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작함.
- array: reduce()를 호출한 배열.
- initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용함. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함.
3. ES6문법
1. let, const키워드
- 변수 선언 전에 변수를 사용하면 참조에러가 발생함
- 블록레벨 스코프를 가짐 (if, for문도 스코프로 인정함)
1. let
2. const
- 상수를 선언할 때 사용
- 재할당이 금지됨 (단, 객체일 경우엔 값 변경이 가능함)
- 선언할 때 초기값을 무조건 할당해주어야 함
2. 템플릿 리터럴
const tmp = `%{name}은 천재다!`;
- 백틱으로 감싸주고, 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능함
- 여러 줄의 문자열 관리도 가능함
3. 메서드
const obj = {
x: 1,
foo() { return this.x },
}
- ES6메서드는 메서드 축약표현으로 정의된 함수만을 의미함
4. 화살표 함수
const arrow = (x, y) => { ... };
const arrow = x => { ... };
- 함수표현식으로 정의
- 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언
- 매개변수가 하나일 경우에는 소괄호를 생략할 수 있고, 매개변수가 없을 경우 소괄호 생략 불가
- 함수 몸체가 하나의 문으로 구성된다면 중괄호 {} 생략 가능
1. 화살표함수와 일반함수의 차이
- 화살표 함수는 인스턴스를 생성할 수 없음 non-constructor임
- 화살표 함수는 중복된 매개변수 이름을 선언할 수 없음
- 화살표 함수는 함수 내부에서 this, arguments, super, new.target바인딩을 갖지 않음
5. 구조분해할당
const { name, age, job } = props;
- 값을 해체한 후, 개별 값을 변수에 할당하는 과정
6. Promise
- 비동기 처리를 위한 패턴으로 도입됨. 콜백 패턴이 가진 단점(콜백 헬, 에러 처리)을 보완하며, 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음.
- 후속처리 메서드로는 then, catch, finally가 있음
7. Class
- JAVA스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법으로, 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동됨
- constructor: constructor는 클래스 안에 한 개만 존재할 수 있고, 클래스 필드의 선언과 초기화는 반드시 constructor 내부에서 실시해야 함
- 메소드 정의 시, 객체리터럴에서 사용하는 문법과 유사한 문법 사용
- Getter/Setter: 클래스 내에서 Getter 혹은 setter를 정의하고 싶을 때는 메소드 이름 앞에 get 또는 set을 붙여주면 됨
- 정적 메서드 (static) : 정적 메서드는 클래스의 인스턴스가 아닌 클래스 이름으로 곧바로 호출되는 메서드로, static 키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 됨
- extends 키워드: extends 키워드는 클래스를 다른 클래스의 하위 클래스로 만들기 위해 사용됨
- super 키워드: 생성자 내부에서 super를 함수처럼 호출하면, 부모 클래스의 생성자가 호출됨
- Private 클래스 변수: ES2021(ES12)부터는 메서드와 필드명 앞에 "#"을 붙여서 프라이빗 메서드와 필드 정의가 가능해짐
8. String Method (includes, startsWith, endsWith)
- includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환함. 검색 시 대소문자를 구분함
- startsWith() 메서드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환함
- endsWith() 메서드는 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 true 혹은 false로 반환함
9. default parameter
function sum(x = 0, y = 0) {
return x + y;
}
- ES6에서 도입된 매개변수 기본값을 사용하면 인수 체크 및 초기화를 간소화할 수 있음
- Rest파라미터에는 기본값을 지정할 수 없음
10. Module
- 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미함
<script type='module' src='app.mjs'></script>
- script태그에 type='module' 어트리뷰트를 추가하고, 파일 확장자는 mjs사용을 권장
- 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용함
11. for...of문
- for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성함
- 구문: for (variable of iterable) {}
- variable: 각 반복에 서로 다른 속성값이 variable에 할당됨
- iterable: 반복되는 열거가능(enumerable)한 속성이 있는 객체
12. Rest 연산자
- Rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음
- Rest파라미터는 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수로 구성된 배열이 할당되므로, 반드시 마지막 파라미터여야 함
- Rest파라미터는 단 하나만 선언할 수 있음
13. Spread 연산자
1. 함수의 인자로 사용하는 경우
- Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블이어야 함
- Rest 파라미터는 반드시 마지막 파라미터이어야 하지만 Spread 문법을 사용한 인수는 자유롭게 사용할 수 있음
2. 배열이나 객체에서 사용하는 경우
- 특정 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용
- React에서는 state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용됨