ES6 문법 정리

ES6문법을 사용하면 코드를 더 깔끔하고 직관적으로 표현할 수 있다.

let + const 

• var: function scope
  함수 scope이기 때문에 함수 안에서 선언된 변수는 특별한 경우가 아니라면 함수 밖에서 접근할 수 없다.
  반면 if문이나 while문 등 안에서 선언된 변수를 밖에서 접근하는 것이 가능하다.
• const, let: block scope
  함수 scope보다 더 넓은 범위를 포괄한다. 일반적으로 {}으로 둘러쌓인 부분을 말하며, if문이나 while문 안에서 선언한 변수들도 밖에서 접근할 수 없다.

Destructing

객체를 함수의 파라미터로 받아와 사용하는 경우에 편리한 방법이다.

이전에는 일일히 객체에 있는 속성들을 하나하나 변수로 다시 선언해줬었다.

const obj = { fruit: "apple", num: 5, color: "red" };

function fruitInfo (obj) {
  const fruit = obj.fruit;
  const num = obj.num;
  const color = obj.color;
  console.log(`I have ${num} ${fruit}, this color is ${color}`);
}

fruitInfo(obj);

 

그러나 destructing을 사용하면 이것을 코드 한줄로 해결할 수 있다.

const obj = { fruit: "apple", num: 5, color: "red" };

function fruitInfo (obj) {
  const { fruit, num } = obj;
  console.log(`I have ${num} ${fruit}.`);
}

fruitInfo(obj);

{} 괄호 안에 객체의 속성 이름을 적어주면 알아서 객체 속성에 해당하는 값을 삽입해준다.

(꼭 객체의 모든 속성을 다 가져올 필요가 없고 필요한 속성만 선언하고 사용하면 된다.)

 

Object properties

1. 객체 속성 이름으로 변수를 넣고 싶을 때

객체 속성의 이름도 변수로 넣을 수 있는 신기한 기능이다. 

[] 괄호 안에 원하는 변수나 값을 넣으면 된다. 심지어 그 안에서 연산을 해도 된다.

const attrName = "my fruit";

const obj = {
  [attrName]: "apple",
  [1 + 2]: "hello"
};

결과는 {3: "hello", my fruit: "apple"} 이렇게 나온다.

 

2. 객체 속성 이름과 똑같은 이름의 변수를 값으로 넣을때

설명하기가 어렵지만 코드를 보면 이해하기 쉽다.

const a = "1";
const b = "2";

const obj = {a: a, b: b};

위와 같은 코드를 아래와 같이 간략화할 수 있다.

const a = "1";
const b = "2";

const obj = { a, b };

 

Template strings (백틱 사용하기)

ES5문법에서 문자열을 사용할때 '' 나 ""를 사용한다. 그러나 아래와같이 문장을 합치는 상황에서 불편함이 생긴다.

const name = "Jenny";
const age = 20;
const greet = "My name is " + name + ". I am " + age + " years old";

백틱은 ``표시를 사용한다. (숫자판 맨앞에 물결칸에 같이 있는 표시이다.)

백틱을 이용하면 아래와 같다.

const name = "Jenny";
const age = 20;
const greet = `Hello. My name is ${name}. I am ${age} years old.`;

백틱 안에서 문장을 자유롭게 적되, 변수를 적어야한다면 ${}안에 적어주면 된다.

 

default arguments

함수를 사용할때 기본 값을 지정해줄 수 있다.

function greet(name="somebody", age=30){
  return `Hello. I am ${name}. I am ${age} years old.`; 
}

greet();

따라서 아무 인자도 넣지 않고 함수를 호출해도 "Hello. I am sombody. I am 30 years old."라고 출력이 된다.

(디폴트값을 지정해주지 않으면 변수자리에 undefined가 채워진다.)

 

Arrow functions

다음 두 코드는 동일한 add 함수를 생성한다.

// ES5 까지의 함수 선언 방법
function sum(a,b){
  return a + b;
}

// ES6 arrow function
const sum = (a, b) => a + b;

훨씬 간단하게 함수를 선언할 수 있다. 함수 내용부분에 리턴값 하나만 있다면(위 코드와 같은 경우) return 키워드를 생략해도 된다. 따라서 위 코드도 a+b를 리턴하게 된다.