TIL_171024 ECMAScript6 - let, const

ES6의 경우, ie 11기준 11%만 지원하기 때문에 ES6 -> ES5로 트랜스파일링 하는 툴이 필요 (바벨)

Let

  • 코드 블럭 (block level scope)
  • 중복선언 불가
  • 전역변수 let으로 사용해도 전역객체의 프로퍼티가 아님
  • 호이스팅이 되지만, 호스팅이 안되는것처럼 보임 (일시적 사각지대)
  • var는 선언/초기화단계 -> 할당단계가 이루어지지만, let은 변수선언문에 도달했을때 초기화가 되기 때문
  • 즉, let은 선언 이전에 호출하면 레퍼런스에러 발생
  • 클로저: var는 함수 내에서만 사용했지만, let은 블럭단위기 때문에 for문 내에서도 클로저 사용 가능
  • 즉, 클로저를 위함 함수사용 없이 클로저로서 사용 가능
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var funcs = [];
    // 함수의 배열을 생성한다
    // i는 for loop에서만 유효한 지역변수이면서 자유변수이다
    // var의 경우에는 function으로 한번 감싸주는 동작이 필요했었음.
    for (let i = 0; i < 3; i++) {
      funcs.push(function () { console.log(i); });
    }
    // 배열에서 함수를 꺼내어 호출한다
    for (var j = 0; j < 3; j++) {
      funcs[j]();
    }

Const

  • const는 상수(변하지 않는 값)를 위해 사용 (eg. 에러메세지)
  • 반드시 선언과 동시에 초기화가 이뤄져야함
  • 따라서, 초기화 이후 재할당 X (let은 초기화 이후 다른값으로 재할당 가능)
  • 단, 프로퍼티의 값은 재할당 가능
  • 객체 타입 변수 선언에는 const를 사용하는 것이 좋음
    1
    2
    3
    - 객체에 대한 참조는 변경될 필요가 없음(즉, 재할당 필요X)
    - const를 사용한다 하더라도 객체의 프로퍼티를 변경할 수 있음
    - 자바스크립트의 값은 대부분 객체(primitive형 변수를 제외한 모든 값은 객체) -> 대부분의 경우 const를 사용하게 됨

var vs let vs const

  • ES6를 사용한다면 var 키워드는 사용 X
  • 변경이 발생하지 않는(재할당이 필요없는) primitive형 변수와 객체형 변수에는 const
  • 재할당이 필요한 primitive형 변수에는 let

템플릿 리터럴

  • 백틱(backtick) `문자 사용
  • 줄바꿈, white space 그대로 적용
  • 템플릿 대입문 ${}: 문자열, javascript표현식 사용 가능

Arrow function

  • 익명함수로만 사용할 수 있음 (호출 시 함수표현식 사용)
  • 함수몸체가 한줄의 표현식이라면 중괄호 생략 가능 (자동으로 리턴)

  • 객체를 반환할 때에는 소괄호 사용

    1
    2
    const pow = x => x * x;
    console.log(pow(10)); // 100

  • Arrow function은 언제나 자신을 포함하는 외부 scope에서 this를 계승

  • 즉, -> 메소드 내에선 일반 함수를 쓰도록
  • 생성자함수엔 사용 X (프로토타입 프로퍼티가 없으므로)
  • 보통 콜백함수에 사용하는 것을 추천 (addEventLister제외)
  • addEventListener의 콜백 함수는 function 키워드 사용 추천 (arrow function 사용 시, this가 상위 컨텍스트를 가리키게 되므로)
  • Rest Parameter의 사용성으로 argument 프로퍼티가 X
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Bad
const obj = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};
obj.sayHi(); // Hi undefined
// Good
const obj = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};
obj.sayHi(); // Hi Lee

Extended Parameter Handling

1. 기본 파라미터 초기값

파라미터에 초기값을 설정하여 방어코드가 필요X

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ES5
function plus(x, y) {
  x = x || 0;
  y = y || 0;
  return x + y;
}
// ES6
function plus(x = 0, y = 0) {
  // x, y에 인수가 할당되지 않으면 초기값 0이 할당된다.
  return x + y;
}
console.log(plus());     // 0
console.log(plus(1, 2)); // 3

2. Rest parameter

  • 스프레드 연산자를 사용하여 매개변수를 선언한 것
  • 인수를 함수 내부에서 배열로 전달받을 수 있음
  • argument(유사배열 반환)없이도 인자에 리스트를 전달, 배열로 반환
  • Rest 파라미터는 반드시 마지막 파라미터여야 함

3. Spread 연산자

  • 연산자의 대상 이터러블을 개별 요소로 분리.
  • eg) 배열의 요소를 개별적인 인자로서 매개변수에 전달하고싶을때 (ES5에선 apply를 써야했지만 spread로 가능)
    [참고] 이터러블
    map, set, node-list, string, array과 같이 key가 있고, 순서를 가진 채 순회할 수 있는 객체
1
2
3
4
5
console.log(...[1, 2, 3]) // -> 1, 2, 3
// 문자열은 이터러블이다.
// String객체 -> 유사배열 -> 순회 가능
console.log(...'Helllo');  // H e l l l o

오늘의 느낀점

지난 주 Todolist 만들기 2가지 버전 다들 어렵다는 말이 많았나보다 :( 처음으로 html에 적용하기도 했고, 단편적인 알고리즘 문제만 풀다보니 복합적인 연계관계가 무척 어렵게 느껴졌다. 오늘 단락 단락 풀어본 문제로 ES6도 적용해보면서 리마인드하자 (ES5배운지 얼마되지 않은것 같은데 벌써 5만 눈에 익어서 6적용하기가 은근 힘듬 ㅠㅠㅠ)