2.1 변수를 정의하는 새로운 방법: const, let

---

2.1.1 var가 가진 문제

1) var의 첫 번째 문제: 함수 스코프

• 스코프(scope): 변수가 사용될 수 있는 영역
• 스코프는 변수가 정의된 위치에 의해 결정된다.
• var로 정의된 변수는 함수 스코프를 가진다.

function example() {
  var i = 1;
}

console.log(i) // ReferenceError: i is not defined

• 특이한 점은 함수 안에서 var 키워드를 사용하지 않고 변수에 값을 할당하면 전역 변수가 된다는 점.
• 이러한 문제를 해결하기 위해 파일 상단에 use strict를 선언하기도 한다.
• var는 함수 스코프이기 때문에 for 반복문에서 정의도니 변수가 반복문이 끝난 이후에도 계속 남는 문제점이 있다. (while 문, switch 문, if 문도 마찬가지.)

for (var i = 0; i < 10; i++) {
  console.log(i)
}

console.log(i); // 10 

• var 변수의 스코프를 제한하기 위해 즉시 실행 함수를 사용하기도 한다.
• 즉시 실행 함수는 함수를 정의하는 시점에 바로 실행되고 사라진다. 즉, var로 정의된 변수의 스코프를 제한할 수 있다. 하지만 즉시 실행 함수는 가독성이 떨어지고 작성하기 번거로운 단점이 존재한다.
• 이렇게 var 변수의 스코프 문제를 해결하려면 상당한 노력이 필요.

2) var의 두 번째 문제: 호이스팅

• var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다.
• 이를 호이스팅(hoisting) 이라고 부른다.

// 예시 1. 정의되지 않은 변수 사용하기
console.log(myVar) // 참조 에러

// 예시 2-1. 변수가 정의된 시점보다 먼저 변수 사용하기
console.log(myVar) // undefined
var myVar = 1;

// 예시 2-2. 호이스팅의 결과
var myVar = undefined
console.log(myVar) // undefined
myVar = 1 // 변수의 정의만 끌어올려지고 값은 원래 정의했던 위치에서 할당

// 예시 3. 변수가 정의된 시점보다 먼저 변수값에 값을 할당하기
console.log(myVar) // undefined
myVar = 2;
console.log(myVar) // 2
var myVar = 1;

3) var의 기타 문제들

• 한 번 정의된 변수를 재정의 할 수 있다.

var myVar = 1;
var myVar = 2;

• var 재할당 가능한 변수로 밖에 만들 수 없다. 상수와 같은 값도 무조건 재할당 가능한 변수로 만들어야 한다.
• 이러한 이유로 인해 var를 사용한 변수는 직관적이지 않고 버그의 원인이 될 수 있다.

2.1.2 var의 문제를 해결하는 const, let

1) const, let은 블록 스코프다.

2) const, let에서의 호이스팅

2.2 객체와 배열의 사용성 개선

---

2.2.1 객체와 배열을 간편하게 생성하고 수정하기

1) 단축 속성명(shorthand property names)

2) 계산된 속성명(computed property names)

2.2.2 객체와 배열의 속성값을 간편하게 가져오기

1) 전개 연산자(spread operator)

2) 배열 비구조화(array destructuring)

3) 객체 비구조화(object destructuring)

2.3 강화된 함수의 기능

---

2.3.1 매개변수에 추가된 기능

1) 매개변수 기본값

2) 나머지 매개변수(rest operator)

• 나머지 매개변수는 입력된 인수 중에서 정의된 매개변수 개수만큼을 제외한 나머지를 배열로 만들어준다.
• 나머지 매개변수는 매개변수 개수가 가변적일 때 유용하다.

나머지 매개변수는 매개변수 개수가 가변적일 때 유용하다.

function printLog(a, ...rest){ // 하나의 인자를 제외한 나머지를 rest 매개변수에 할당
  console.log({a, rest});
}
printLog(1, 2, 3); // {a : 1, rest: [2, 3]}

// ES5 ver. arguments 키워드
function printLog(a) {
  const rest = Array.from(arguments).splice(1);
  console.log({a, rest});
}

• 매개변수 정의에서 arguments의 존재가 명시적으로 드러나지 않기 때문에 가독성이 좋지 않다.
• arguments는 배열이 아니기 때문에 배열처럼 사용하기 위해서는 배열로 변환하는 과정이 필요하다는 단점이 있다.

3) 명명된 매개변수(named parameter)

• 명명된 매개변수는 객체 비구조화를 이용해서 구현할 수 있다.
• 명명된 매개변수를 사용하면 함수 호출 시 매개변수의 이름과 값을 동시에 적을 수 있으므로 가독성이 높다.

const numbers = [10, 20, 30, 40];
const result1 = getValues(numbers, 5, 25); // 인수가 의미하는 바를 파악하기 어려움.
const result2 = getValues( {numbers, greaterThan: 5, lessThan: 25} );

• 명명된 매개변수를 이용하면 선택적 매개변수(optional parameter)의 활용도가 올라간다.
• 필수값과 반대되는 의미로, 있어도 되고 없어도 되는 매개변수를 선택적 매개변수라고 부른다.

// 선택적 매개변수에 undefined를 넣어야 한다. 이러한 방식은 매개변숙다 많아지면 관리하기 힘들어진다.
const result1 = getValues(numbers, undefined, 25); 
const result2 = getValues( { numbers, greaterThan: 5} );
const result3 = getValues( { numbers, lessThan: 25} );

명명된 매개변수를 사용하면 함수 호출 시 매개변수의 이름과 값을 동시에 적을 수 있으므로 가독성이 높다.

• 명명된 매개변수를 사용하면 함수를 호출할 때마다 객체가 생성되기 때문에 비효율적이라고 생각할 수 있지만, 자바스크립트 엔진이 최적화를 통해 새로운 객체를 생성하지 않으므로 안심하고 사용해도 된다.

2.3.2 함수를 정의하는 새로운 방법: 화살표 함수

2.4 향상된 비동기 프로그래밍 1: promise

---

2.4.1 프로미스 이해하기

1) 콜백 패턴의 문제

2) 프로미스의 세 가지 상태

3) 프로미스를 생성하는 방법

4) 프로미스 이용하기 1: then

5) 프로미스 이용하기 2: catch

• catch는 프로미스 수행 중 발생한 예외를 처리하는 메서드
• catch 메서드는 then 메서드의 onReject 함수와 같은 역할을 한다.

// 같은 기능을 하는 then 메서드와 catch 메서드
Promise.reject(1).then(null, error => {
	console.log(error);
});

Promise.reject(1).catch(error => {
	console.log(error);
});

• 예외 처리는 then 메서드의 onReject 함수보다는 catch 메서드를 이용하는게 가독성 면에서 더 좋다.
• onReject 함수에서 예외를 처리하는 경우의 문제점을 살펴보자.

// then 메서드의 onReject를 사용했을 때의 문제점
Promise.resolve().then(
	() => {
    	throw new Error('some error');
    },
  	error => {
    	console.log(error);
    }
);

6) 프로미스 이용하기 3: finally

2.4.2 프로미스 활용하기

---