[Javascript] ES6 문법 정리

ECMAScript란?

 

ECMAScript(ES)는 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규겨에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말함.

 

1) const / let

const - 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수. 상수로 사용. 

ex) react에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용.

 

let - 새로운 값을 받을 수도 있고 재할당할 수도 있음.

 

*var을 쓰지않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위함이다.

 

2) 화살표 함수

• function 키워드 없이 함수를 만들 수 있음.
• return 키워드 없이 식을 계산한 값이 자동으로 반환.
• ()안에 함수의 parameter가 들어감.
• => 오른쪽에는 결과를 반환하는 식이 위치.

// ---------------- ES6 화살표 함수
// 함수 myFunc는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
const myFunc = (name) => {
  return `My name is ${name}`;
};
console.log(myFunc("Jook"));

// 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `My name is ${name}`;
console.log(myFunc("Jook")); // 출력 => My name is Jook

//인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.
// 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
let double = (n) => n * 2;

 

 

3) 비구조화 할당

• 객체와 배열로 부터 프로퍼티를 쉽게 꺼낼 수 있는 문법.
• 객체의 속성을 얻기 위해 값을 중괄호 안에 넣어 좀 더 간결하게 정의할 수 있음.
  ex) React에서 Props를 내려주거나 특정 상태를 정의할 때, 비구조화 할당 문법을 활용할 수 있음.

const Employee = {
  company: "JookCompany",
  name: "Jook",
  age: 19,
};

let { company, name, age } = Employee;

console.log(company);
console.log(name);
console.log(age);

 

const arr = ['string', {}, 1, true];

const [str, obj, , bool] = arr;
//str == 'string'
//obj == {}
//bool == true

4) for…of 문

const iterable = [10, 20, 30];

//es5
for (let i = 0; i < iterable.length; i++) {
  console.log(value);
}

//es6
for (const value of iterable) {
  console.log(value);
}

 

5) Spread Operator

• spread 연산자는 특정 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용한다.
  ex) React에서는 state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용.

const obj = {
  a: 10,
  b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }

const arr = [1, 2, 3];
const newArr = [...arr]; // [1, 2, 3]
console.log(newArr);

const addedArr = [...arr,4]; //[1,2,3,4]
console.log(addedArr);

 

6) Default Parameter(기본 매개 변수)

• 함수에 인자를 넘겨줄 때, default parameter 설정이 가능함.
• 따라서 함수 실행시, 별도로 인자를 넘기지 않을 경우, default로 지정된 값이 넘어가도록 작동.

//es6
const func = (a, b = "b", c = "c") => {
  console.log(a, b, c);
};

func("a");
//a b c

 

7) 템플릿 문자열

• 문자열에 백틱(`)을 사용.
• 문자열 안에 변수를 넣을 수 있음.
  ex) ${변수명}

// ES5
var num1 = 1;
var num2 = 2;
var result = num1 + num2;

var string1 = num1 + ' 더하기 ' + num2 + "는 \'" + result + "\'입니다.";
console.log(string1);

// ES6
const new1 = 1;
const new2 = 2;
const newResult = new1 + new2;

const string2 = `${new1} 더하기 ${new2}는 '${newResult}'입니다.`;
console.log(string2);

 

8) 객체 리터럴

• 객체 리터럴에서 몇가지 편리한 기능이 생김. (예시 참고)

=====ES5=====
var helloFunc = function() {
  console.log('Hello');
};

var name = 'J';

var obj = {
  insideFunc: function() {
    console.log('객체 안에서 함수를 선언');
  },
  helloFunc: hello,
};

obj[name + 'ook'] = '내이름';

obj.insideFunc(); // (출력값) 객체 안에서 함수를 선언
obj.helloFunc();  // (출력값) Hello
console.log(obj.Jook); // (출력값) 내이름


=====ES6=====
const helloFunc = function() {
	console.log('Hello');
};

const name = 'J';

const obj = {
  insideFunc() {
    console.log('객체 안에서 함수를 선언');
  },
  helloFunc,
  [name + 'ook']: '내이름',
};

obj.insideFunc(); // (출력값) 객체 안에서 함수를 선언
obj.helloFunc(); // (출력값) Hello
console.log(obj.Jook); // (출력값) 내이름

 

**insideFunc함수에는 콜론(:)을 붙이지 않아도 됨.

**객체 프로퍼티를 동적으로 생성가능 ([name + 'ook']을 바깥에서 선언할 필요없이 ES6부터는 바로 속성으로 사용가능)