[Javascript] ES6 문법 정리하기!

1. ES6?

ES6 let, const 전개 문법 spread 비구조화 할당문법 클래스 문법 promise, async, await for-of? 화살표 함수 - this

2. let, const

var로 선언했을 때의 scope관련 문제점을 타파하기 위해 제시된 변수 선언법

var : 함수형 스코프를 가짐 let, const 블록 스코프를 가짐.

let

지역 변수로만 사용하는 변수. var와 달리 선언된 블록 안에서만 변수에 접근할 수 있음.

const

변하지 않는 고정값 = 상수. 한번 선언되면 재할당이 불가능함. 상수명은 대문자로 적는 것이 관례.

let foo = 1
foo = 2
console.log(foo) // 2

const foo = 1
foo = 2 // TypeError

그러나, const로 객체를 선언했을 때 객체의 내용 변경은 가능함.

3. Arrow function

기존의 function 함수를 새롭게 표현하는 방식.

• function 키워드 생략

// function
function foo(){
    var foo = 1;
    return foo;
}

foo () => {
    let foo = 1;
    return foo;
}

만약 매개변수가 하나만 들어간다면 ()는 생략해도 됨. 그리고 return 값이 한줄로 구성되어 있다면 return 키워드 또한 암묵적으로 생략 가능! ㅇㅋ?

x => {
  return x
}
;() => ({ a: 1 })

• 기존 함수와 this가 가리키는 객체 참조값이 달라짐.

화살표 함수 내에서는 객체로 생성된 인스턴스를 가리키기 때문에 일반적인 함수랑은 조금 다름. this가 무조건 불러낸 자기 자신을 가리키기 떄문에 굳이 bind안해도 됨. 개개개좋음.

이전에 정리한 this의 정체 를 참고하자!

예제

fucntion BalckDog(){
    this.name = '흰둥이';

    }
}

4. spread 문법

반드시 배열이나 문자열 같은 반복 가능한 문자를 분해해서 객체로 확장하는 것을 의미함.

• apply를 대체해서 함수를 호출함

배열을 함수의 매개변수 값으로 넣어줄 때 apply를 사용하는데 얘를 대체해서 사용함. 매개변수 안에 몇개를 넣든 상관 ㄴㄴ, 어디에서건 사용 ㅇㅋ

function myFnc(a, b, c) {
  return a, b, c
}

var args = [1, 2, 3]

// myFnc.apply(null, args); // => args 배열을 두번째 인자에 넣어 전달하면 매개변수에 알아서 쏙쏙 대입
myFnc(...args)

• 객체 리터럴?
• 배열 리터럴 관련

이미 존재하는 배열을 가지고 새로운 배열을 생성할 때, concat(), slice() 대신 전개 구문을 사용하면 훨씬! 훨씬 더 간단하게 쓸 수 있음. 배열을 복사하기 때문에 기존의 배열을 건드리지 않고 처리할 수 있음.

그러나 배열 안에 있는 배열인 2차원 배열 등에선 사용 X 기존 배열을 건드리게 됨… 아무튼

var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]

// arr1.concat(arr2); // arr1에 arr2 이어 붙이기

arr1 = [...arr1, ...arr2] // 0,1,2,3,4,5

var arr3 = [6, 7, 8]
var arr4 = [...arr3]

arr4.push(9) // 6,7,8,9

5. 비구조화 할당 문법

destructuring 이라고도 하는데 배열이나 객체의 형식을 파괴하여 개별적인 변수에 알아서 할당시키는 것임. 필요한 값을 추출해서 새로운 변수에 할당하고 아님 반환하던지..

• 배열

const arr = [1, 2, 3]

const [one, two, three] = arr
// const one = 1; const two = 2; const three = 3 이랑 같은 결과

let [x, y, z] = [1, 2]
console.log(x, y, z) // 1 2 undefined

• 객체

const obj = { abc: '하이', def: 'ㄴㄴ' }

const { abc, def } = obj // abc = '하이', def = 'ㄴㄴ'

6. 클래스

자바스크립트는 함수형 프로토타입 기반의 언어임. 생성자 함수나 프로토타입, 클로저를 통해 객체지향 개념을 구현했지만 class 키워드로 정의할 수 있게 됨.

class Person{
    constructor(name){
        this.name = name;
    }

    sayHi(){
        console.log('하이 ${this.name});
    }
}

const me = new Person('yerina');
me.sayHi();

console.log(me instanceof Person);