var vs let vs const
스코프
- var
함수 레벨 스코프. 함수의 코드 블록만을 지역 스코프로 인정한다. - let, const
블록 레벨 스코프. 모든 코드 블록을 지역 스코프로 인정한다.
재할당
- var/let
값 재할당 가능 - const
상수. 값 재할당 불가능
호이스팅
- var
런타임 이전에 선언 단계와 초기화 단계가 진행되며, 초기화 단계에서 undefined로 변수를 초기화 한다. 따라서 선언문 이전에 변수에 접근해도 참조 에러가 발생하지 않는다. - let/const
런타임 이전에 선언 단계만 진행된다. 따라서 선언문 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.
중복 선언
- var
중복 선언이 가능. var 키워드가 없는 것처럼 동작한다. - let/const
중복 선언 시 문법 에러 발생
async await
비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 문법이다.
프로미스의 후속 처리 메서드 없이 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.
Promise
Promise란?
비동기 처리를 위한 패턴으로, 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다.
프로미스 객체는 비동기 처리 상태와 처리 결과를 관리한다.
후속 처리 메서드
- then/catch/finally 메서드에 콜백 함수를 전달하는 방식으로 비동기 처리 결과를 후속 처리한다.
- 후속 처리 메서드는 Promise의 비동기 처리 상태가 변화하면 호출된다.
콜백 패턴의 단점
- 콜백 헬로 인해 가독성이 나쁘다.
- 에러 처리에 한계가 있다.
try {
setTimeout(() => throw new Error('Error'), 1000);
} catch (e) {
console.error(e); // 에러를 캐치하지 못한다.
}Promise.all
여러 개의 비동기 처리를 모두 병렬로 처리할 때 사용한다.
Arrow Function
- 기존의 함수보다 표현과 내부 동작이 간략화된 방법이다.
- 함수 자체에 this 바인딩을 갖지 않아서, 화살표 함수 내부에서 this를 참조하면 스코프 체인을 통해 상위 스코프의 this를 참조한다.
따라서 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
this
this란?
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
함수가 호출되는 방식에 따라 this 바인딩이 동적으로 결정된다.
- 일반 함수 호출
전역 객체가 바인딩된다.
strict mode에선 undefined가 바인딩된다. - 메서드 호출
메서드를 호출한 객체가 바인딩된다. - 생성자 함수 호출
생성한 인스턴스가 바인딩된다.
== vs ===
JavaScript에서 두 연산자의 차이
- ==(동등 비교 연산자)
값만 비교한다. 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 이는 예측하기 어려운 결과를 만들어내기 때문에 사용하지 않는 편이 좋다. - ===(일치 비교 연산자)
타입과 값을 모두 비교한다.
호이스팅
선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징이다.
런타임 이전 단계인 소스코드 평가 과정에서 모든 선언문을 먼저 실행한다.
-
var
런타임 이전에 선언 단계와 초기화 단계가 진행되며, 초기화 단계에서 undefined로 변수를 초기화 한다. 따라서 선언문 이전에 변수에 접근해도 참조 에러가 발생하지 않는다. -
let, const
런타임 이전에 선언 단계만 진행된다. 따라서 선언문 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. -
함수 선언식
런타임 이전에 함수 객체가 생성되고 할당되어, 선언문 이전에 함수를 호출해도 정상적으로 동작한다.
선언문 이전에 참조하는 건 프로그램 흐름상 맞지 않기 때문에 지양해야 합니다.
원시 값 vs 참조 값
원시값
- 변경 불가능한 값
- 변수는 값의 메모리 공간 주소를 가리킨다.
- 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간 주소를 변경한다.
참조값
- 변경 가능한 값
- 재할당 없이 객체를 변경할 수 있다. 프로퍼티를 동적으로 추가/갱신/삭제할 수 있다.
- 변수는 프로퍼티들의 주소를 참조하는 주소를 가리킨다.
- 프로퍼티 값을 재할당하면, 프로퍼티가 가리키는 값의 메모리 공간 주소를 변경한다.
즉, 변수가 가리키는 주소는 변하지 않는다.
깊은 복사 vs 얕은 복사
깊은 복사
- 객체에 중첩되어 있는 객체까지 모두 복사
- structuredClone
- JSON.stringify() 후 JSON.parse()
얖은 복사 (Shallow Copy)
- 한 단계까지만 복사
즉, 중첩되어 있는 객체의 경우 참조 값을 복사 - ex) 스프레드 문법(...)
생성자 함수 vs 일반 함수
생성자 함수
- 네이밍 컨벤션: 대문자로 시작
- new 키워드와 함께 호출
- this는 인스턴스를 가리킨다.
일반 함수
- 네이밍 컨벤션: 소문자로 시작
- this는 전역 객체를 가리킨다.
Map
const map = new Map([['a', 1]]); // Map이나 Set도 할당 가능
map.set('b', 2)
console.log(map.get('b'));
console.log(map.has('b'));프로토타입
- 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다.
- 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공한다.
- 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조다.
- [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다.
ES6 이후
추가된 기능
let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당(=구조 분해 할당=비구조화 할당), 스프레드 문법 등
