[JS] ES6 문법을 알아보자

우선 ES6의 ES는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.

또한, 6는 버전을 의미하며 ES6는 2015년에 나타났다.

이 업데이트로 자바스크립트의 많은 부분이 변하였고, 편리한 기능이 생겨났다.

 

1. const / let의 등장

const와 let이 등장하기 전에는 변수를 선언 할 때 var만이 존재했다.

하지만 var에는 문제가 있었고, 이를 해결하기 위해 ES6를 통해 const / let을 추가하였다.

const:  객체와 함께 사용할 때를 제외하고 변경이 불가능한 변수 (상수) let: 새로운 값을 받을 수 있고, 재할당을 할 수 있다.

const와 let이 등장했기때문에 *var 사용을 피하는 것이 좋다.

 

( *변수 선언 let, var, const )

https://conquer-it.tistory.com/118

[JS] 변수 선언(var, let, const, var와 let의 차이)

---

2. 객체 초기화 방법의 변화

우리는 객체를 만들 때 이와 같은 방식으로 만들었다.

let name = "James";
let age = "20";

let person = {
  name: name,
  age: age
}

하지만 ES6 부터는 객체를 선언 할 때 이와 같이 만든다.

let name = "James";
let age = "20";

let person = {name, age}

이 방식은 키값과 변수명이 같을 경우에만 사용할 수 있다.

---

객체에 있는 내용을 꺼낼 때에도 비슷한 문법을 사용할 수 있다.

우리는 객체에 있는 내용을 꺼낼 때 .을 이용해서 객체에 접근해 내용을 가져왔다.

let person = {
  name: "James",
  age: 21
}

let name = person.name;
let age = person.age;

console.log(name, age);

하지만 ES6 부터는 아래와 같이 작성해도 똑같은 결과를 나타낸다.

let person = {
  name: "James",
  age: 21
}

// let name = person.name;
// let age = person.age;

let{name, age} = person;

console.log(name, age);

let name = person.name;

let age = person.age; 이 두 줄을 

 

let{name, age} = person; 한줄로 만든 것이다.

하지만 이것 또한 키값과 변수명이 같을 경우에만 사용할 수 있다.

---

3. 템플릿 리터럴 (Template Literal)

let name = "James";
let age = 20;

위와 같은 코드가 있고 이 코드를 통해 "제 이름은 James이고, 나이는 20살 입니다."라는 문장을 출력하고 싶을 때

기존에는 console.log("제 이름은 "+name+"이고, 나이는 "+age+"살 입니다."); 라고 작성을 해야 했다.

사용해본 사람은 알겠지만 저 문장들 사이 사이에 +를 넣는 게 굉장히 귀찮고, 헷갈린다.

그래서 ES6 부터는 약간 변화한 문법을 사용한다.

출력하고 싶은 문장을 ` `(back tick)으로 묶고, 변화할 수 있는 값은 ${ }안에 넣어준다.

( ` `(back tick)은 키보드의 Esc키 밑에 있다.)

console.log(`제 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

 

---

4. Spread

spread 연산자는 배열의 값을 다른 배열로 복사하거나 옮길 때, 합칠 때 사용한다.

예를 들어, 3개의 배열이 있다고 가정하자. 이 베열을 합치고 싶다면 아래와 같이 

...배열명을 하면 된다. '...은 그 배열을 내용을 전부 들고 와라'라고 생각하면 편하다.

let a = [1,2,3];
let b = [4,5,6];
let c = [7,8,9];

let result = [...a,...b,...c];

console.log(result) //[1,2,3,4,5,6,7,8,9]

---

5. 화살표 함수

함수의 표현식을 화살표로 간단하게 나타낸 것이다.

우리는 함수를 만들 때 아래와 같이 함수를 선언했다.

function a (){
  consloe.log(aaaaa)
}

하지만 화살표 함수에서는 조금 더 간단하게 함수를 선언한다.

let a = () =>{
  consloe.log("aaaaa")
}

function이 =>로 대체 된 것을 알 수 있다.

이것만으로는 딱히 간단한지 모를 수도 있다.

물론 화살표 함수는 다른 장점도 있는데

function a(){       //일반 함수
  return "aaaaaa"
}

let a = () =>"aaaaaa" //화살표 함수

일반 함수로 3줄이 나오는 저 코드가 화살표 함수로 표현하면

1줄로 표현이 가능하다. 

화살표 함수에서는 return이 생략 가능하고, { } 안에 들어가는 코드가 

1줄이면 { }를 생략할 수 있다.

(*물론 2줄 이상이면 { } 안에서 코드를 작성해야 한다.)