JS레벨업 - ES6 문법 정리하기 (2) 화살표형 함수 , (3) 템플릿 리터럴, (4) 객체 리터럴 개선

JS레벨업 - ES6 문법 정리하기 (2) 화살표형 함수

기존의 함수선언문(Function Declaration)

기존의 함수는 아래와 같이 기록해야 했다.

function add (a,b) {
	return a+b;
}

add(1,2)

기존의 함수표현식(Function Expression)

const add = function(a, b) {
  return a + b;
};

함수를 선언하는 방식은 기존의 두 가지 방식이 있었다. 두 가지 방식의 차이는 호이스팅(Hoisting)에 있다. 호이스팅은 자바스크립트의 실행컨텍스트 개념과 관련이 있는데, 실행컨텍스트는 변수, 함수 선언 등의 정보를 담고 있는 객체이며, 객체에 담겨진 실행 순서에 따라서 코드들을 관리한다.

이러한 실행컨텍스트의 관점에서 볼 때 함수선언문은 실행컨텍스트가 생성되기 이전 단게에서 그 전체가 끌어올려지지만, 함수 표현식은 변수 선언만 끌어올려진다는 점에서 선언 이후에야 함수를 실행할 수 있다는 차이가 있다.

ES6 이후의 함수표현식

const add = (a=0, b) => {
  return a + b;
};

기존의 함수표현식을 간결하게 작성하고자, 화살표형 함수가 ES6에서 제안되었다. 단순히 function가 제외되고, => 화살표가 추가된 부분이 아니라, 매개변수의 초기값을 설정할 수 있다는 것도 특징이다.

또한 위의 코드는 조건에 따라서 더 간단해 질 수 있다. 예를 들어서 반환문이 한줄이라면, 아래와 같이 축약할 수도 있다.

const add = (a=0, b) => a + b;

만약 매개변수가 하나라면 ()도 생략할 수 있다.

const add = a => a + 1;

JS레벨업 - ES6 문법 정리하기 (3) 템플릿 리터럴

문자열을 반영할 때, 선언된 변수를 활용할 때 깔끔하지 못했던 이전의 문법을 개선한 것이 템플릿 리터럴(백틱 `)이다. 코드로 살펴보자.

const name = 'John';
console.log("My name is "+{name})

만약 변수의 사용이 많아진다면 +변수+변수+변수를 통해서 기록해야 함으로 코드가 지저분해질 수 있었다. 이를 개선한 것이 ES6의 템플릿 리터럴이다.

const name = 'John';
console.log(`My name is ${name}`)

백틱을 감싸는 방식으로 코드를 간결하게 표현할 수 있다. 이 경우 백틱(${변수} ${변수} ${변수} ${변수})를 사용할 수도 있고, 나아가 기존의 방식에서는 복수의 줄에 대해서 입력할 수 없었지만, 템플릿 리터럴은 이를 지원한다.

JS레벨업 - ES6 문법 정리하기 (4) 객체 리터럴 개선

const name = 'John';
const age = 30;

// 객체 리터럴 개선 전
const person = {
  name: name,
  age: age,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// 객체 리터럴 개선 후
const person = {
  name,
  age,
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

코드로 살펴보면 이렇다. 객체의 key와 value 가 동일하다면, 둘 다 입력해야 했던 기존과 달리 하나만 입력하면 되는 표준이 ES6 이후 구현할 수 있는 문법체계이다.