기본 상식 JS-2 (ES6)

ES란 ECMAScript의 약자로 자바스크립트의 표준, 규격을 나타내는 용어입니다. ES 뒤의 숫자는 버전을 뜻하는 것으로 ES6은 버전 6을 의미하며, 2015년에 출시되어 지금까지 보편적으로 사용되어지고 있다. 이전버전인 ES5에서 ES6으로 업데이트 될 때 많은 변화가 있었는데 그것에 대해 간략하게 알아보도록 하자.

1. let, const
   기존에는 var를 통해서 변수를 선언하고 할당했지만, ES6부터는 let과 const가 지원된다.
   let은 재선언 불가, 재할당 가능한 변수
   const는 재선언 불가, 재할당 불가능한 변수
   이전에 var만 사용 할 수 있었을 때는 var의 특성상 재선언, 재할당 모두 가능한 변수 였기 때문에 코드가 길어질 수록 다시 찾기 힘들어지고 선언별로 명확히 구분짓기 힘들었지만 let과 const과 나오면서 이러한 점들이 보완 되었다.

2. 템플릿 리터럴(template literal)
   이전에 따로 디테일하게 설명했었지만, 다시 설명하자면

백틱(Back tick)을 통해서 지원하는 기능.
기존에 자바스크립트 변수를 문자열과 함께 쓰기위해서는 +를 통해서 연결해주어야 했지만, 템플릿 리터럴이 지원되며 한번에 나타낼 수 있게 되었다.
사용방법은 나타내고자 하는 문자열을 백틱으로 감싸고, 중간에 자바스크립트 표현식을 사용하고 싶다면 해당 변수를 ${}로 묶어 표현이 가능.

3. 객체 리터럴
   객체 안에 함수를 사용하는 것이 가능해졌다. 이전보다 간결해진 코드로 객체를 선언하는 것이 가능해 졌다. 객체 리터럴로 함수 프로퍼티도 만들 수 있다.

const plus = {a1: 1, a2: 2};

console.log(plus); // { a1: 1, a2: 2 }

const plus = {
    a1: 100,
    a2: 123,
    result: function () {

        return this.a1 + this.a2;
    }
};

console.log(plus.result()); // 223

4. 화살표 함수(Arrow Functions)
   함수표현식을 화살표 함수로 간결하게 표현 가능해졌습니다. 화살표 함수를 통해 만들어진 본문에 return 만 있는 경우 return과 {}를 생략할 수 있게 되었다.

// 일반 함수식
function add(a, b) {
  return a + b;
}

// ES6 함수표현식 - 화살표 함수
const add = (a, b) => {
  return a + b;
}

// ES6 함수표현식 - 화살표 함수 return 생략
const add = (a, b) => a + b;
5. 구조 분해 할당
말 그대로 구조를 분해해서 할당하겠다는 뜻으로 객체나 배열에서 사용됩니다. 
값을 해체하고, 각각 개별 값을 변수에 새로 할당하는 과정을 의미합니다.

const arr = [1, 2, 3]
const [one, two, three] = arr

console.log(one)	// 1
console.log(two)	// 2
console.log(three)	// 3

6. Promise
   이전에는 비동기를 처리하기 위해서 callback함수를 이용한 콜백패턴을 통하였는데 콜백헬을 발생시키는 문제가 있었습니다. 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해서 에러 처리를 효과적으로 할 수 있게 되었습니다.

7. Class
   자바스크립트는 프로토타입 기반의 객체지향언어로 클래스 기반의 객체 지향 프로그래밍을 지원하도록 Class 키워드를 도입되었다.
   Class의 도입으로 상속 등의 개념을 적용할 수 있어 더 좋은 가독성을 가진 코드를 만들어 낼 수 있게 되었으며
   Promise 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

8. String 함수
   includes, statrsWith, endsWith 함수가 새로 지원되었다.

9.구조 분해 할당(Destructuring)

구조 분해 Destructuring 를 사용하면 객체나 배열의 필드 값을 원하는 개별 변수에 대입할 수 있다.

배열 선언시 원하는 인덱스의 값을 다음과 같이 변수로 할당할 수 있다.
또한 콤마를 사용하여 불필요한 값을 무시할 수 있는 리스트 매칭도 가능하다.

   let data = ["godori", "cheeze", "rajephon", "kine"];
    
    // 일반적으로 배열 데이터를 가져오는 방법
    let name1 = data[0];
    let name2 = data[1];
    
    // ES6에서는 다음과 같이 표현 가능
    let [name3, ,name4] = data;
    
    console.log(name3, name4); // godori , rajephon

rest / spread 연산자와 같이 활용해서 '...'(점3개)를 이용하여 객체나 배열의 값을 분해한 후에 값을 변수에 재할당할 수 있게 되었다.

10.Set 객체
중복된 값을 갖지 않는 객체인 Set객체가 추가되었다.
중복 없이 유일한 값을 저장할 때 set을 사용하며, 순회가 가능하다.
이미 값이 존재하는지 체크할 때 유용하다.

 let mySet = new Set()
    
    mySet.add('godori')
    mySet.add('irodog')
    mySet.add('godori')
    
    mySet.forEach(function(v){
    	console.log(v); // godori, irodog (중복된 값은 나오지 않음)
    })
    
    console.log(mySet.has('godori')) // 값을 가지고 있는지? true