ES6 알아보기 - 1

OkGyoung·2023년 10월 31일

2023.11 이전 자료

목록 보기

2/30

이력서를 지원하면 항상 ES6에 대해 언급된다. 확실하게 어떠한 문법들이 있는지 확인하고 어째서 좋은 건지 확인하자.

let, const

var : 재정의, 재선언 가능
let : 재선언 가능
const : 재선언, 재정의 모두 불가능 (불변)

// 선언
var num = 2;

// 재정의
num = 4;

// 재선언
var num = 4;

Why? var변수는 의도하지않은 변경이 일어날 가능성이 다분하다. 예를 들면

변수선언 전에도 참조가 가능하고,

함수 레벨 스코프(Function-level scope)로 인해서 for문 밖에서도 그 속의 변수를 참조가능하다.

호이스팅(var, function 선언을 선두로)으로 인해 이전에 참조가 가능한 문제가 생기도한다.

위와 같은 특징으로 let, const가 권장된다.

템플릿 리터럴

`즉 백틱을 사용해서 문자열을 만들 수 있다.

const temp = "감자"
// 템플릿 리터럴 방식
console.log(`여긴 ${temp}나라야.`);

Why? 템플릿 리터럴을 사용하면 위처럼 ${}를 이용해 바로 변수를 추가할수도 있고(강제 문자열 변경) 줄넘김 또한 반영할 수 있다.

화살표 함수

화살표 함수는 기존 function을 적고 만드는 과정대신 =>를 이용해 간단하게 함수를 만드는 방식이다.

// 화살표 함수
const sum = (a,b) => a+b;

Why? 매개변수가 없거나 하나인 경우 괄호를 생략가능하고 return대신 한줄 구문을 통해서 작성가능하다. 기존 방식의 함수는 this를 사용 시 객체가 동적으로 선택되는 반면 화살표함수는 선언식에 정적으로 결정되는 차이를 가진다.

그렇다면 화살표함수를 사용하면 곤란한 경우는 언제일까?

// Bad
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

위의 경우처럼 메소드를 화살표 함수로 정의 하면 상위 객체인 window를 선택하기에 오류가 발생한다. person을 먼저 선언하고 후에 prototype에 메소드를 할당하여도 같은 오류가 발생한다.

이 경우 아래처럼 ES6의 축약 메소드 표현을 사용해야한다.

const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

또한 생성자 함수로 화살표 함수를 사용할 수도 없다.

또 이벤트리스너에서 콜백으로 이용할 수도 없다.

// Bad
var button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

위 경우 또한 똑같이 window를 가르킨다.

매개변수 관련

function sum(x = 0, y = 0) {
  return x + y;
}

ES6에서는 위처럼 매개변수를 할당하지 않을 때 기본값을 바로 적용할 수 있다.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

또한 위처럼 특정 매개변수만 받고 나머지를 rest에 넣는 방식인 Rest 파라매터를 이용할 수 있다.(마지막 매개변수로 사용가능)

또한 함수.length에 영향을 주지 않는다.

화살표 함수에는 arguments 프로퍼티가 없으므로 가변인자 함수를 구할 때는 rest파라미터를 이용해야한다.

Spread

이터러블한 객체를 분리할 때 사용하는 문법으로

console.log(...[1, 2, 3])

위와 같은 코드에서 [1,2,3]과 ...[1,2,3]은 구별된다.
이를 이용해서

function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

const arr = [1, 2, 3];

foo(...arr);

위처럼 x, y, z에 각각 바로 인수를 전달할 수 있다.

// ES6
function foo(v, w, x, y, z) {
  console.log(v); // 1
  console.log(w); // 2
  console.log(x); // 3
  console.log(y); // 4
  console.log(z); // 5
}

foo(1, ...[2, 3], 4, ...[5]);