자바스크립트 ES6 문법

1. 화살표 함수

• 함수 표현식을 화살표 함수로 표현할 수 있다.
• 화살표 함수가 추가되어 ES5의 함수 표현식보다 간결하고 가독성 및 유지보수성이 올라간다.
• 함수의 본문에 return만 있을 경우 return 과 {} 를 생략할 수 있다.

//일반적인 자바스크립트 함수(ES5)
function function_test(a, b) {
    return a + b;
}
​
// 화살표 함수(ES6)
(a, b) => {
    return a + b;
}

// 화살표 함수(ES6) - return, {} 생략
(a, b) => a + b;

 

​

2. 템플릿 리터럴(Template literals)

템플릿 리터럴은 기존 자바스크립트에서 문자열을 표시할 때 사용하는 작은 따옴표(')나 큰 따옴표(') 대신

백틱(')을 사용하는 것을 의미합니다.

​

// ES5
var test1 = ', ';
var test2 = 'Hello!';
var test3 = 'World! ' + test1 + test2;

// ES6
let test1 = ', ';
let test2 = 'World!';
let test3 = `Hello ${test1} ${test2}`;

ES5 사용

 

​ES6 템플릿 리터럴(백틱 `) 사용

ES6 에서는 javascript 문자열에 ``(백틱, Back Tick)을 사용하여 ${} 중괄호 표시를 통해

자바스크립트 표현식 사용이 가능하다.

​

 

3. let, const 키워드

var

• 함수 레벨 스코프를 지원한다.
• var 키워드 생략을 허용한다.(암묵적 전역 변수를 양산할 가능성이 크다.)
• 변수 중복 선언을 허용한다. (의도하지 않은 변수값의 변경이 일어날 가능성이 크다.)
• 변수 호이스팅 (변수를 선언하기 이전에 참조할 수 있다.)

* 함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

즉, 함수 내부에서 선언된 변수는 지역 변수이며 외부에서 선언한 변수는 모두 전역 변수이다.

 

이러한 var 단점을 보완하기 위해 let 과 const 키워드가 생겼다.

 

* 호이스팅(Hoisting)

변수 선언을 포함한 모든 선언문(변수 선언, 함수 선언 등)을 찾아내 먼저 실행하여

선언 및 초기화를 한다. 그 이후 코드가 실행되면서 할당된 변수 메모리에 데이터가 저장된다.초기화 시 undefined 로 초기화 되며 var 키워드로 선언된 변수 및 함수 이전에 변수에접근하더라도 에러가 나지 않고 undefined가 나온다.

 

let

• 블록 레벨 스코프 지원한다.
• let 키워드로 변수 중복 선언이 불가능하다.
• 재할당은 가능하다.(변수 데이터 변경)

 

const

• 블록 레벨 스코프 지원한다.
• 변수 선언과 동시에 초기화를 진행해야 한다.
• let 과 마찬가지로 변수 중복 선언이 불가능하다.
• let 과 다른점은 재할당도 불가능하다.

 

* 블록 레벨 스코프(Block-level scope)

모든 코드 블록(함수, if문, for문, while문, try/catch 문 등) 내에서 선언된 변수는

코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

즉, 코드 블록 내부에서 선언된 변수는 지역 변수이다.

 

 

* 스코프란

스코프는 식별자(변수, 함수, 클래스)의 유효범위를 뜻하며 선언된 위치에 따라

유효범위가 다르다.

전역에 선언된 변수는 전역 스코프, 지역에 선언된 스코프는 지역 스코프를 갖는다.

 

전역에 선언된 전역 변수는 어디에서든지 참조 가능한 값이며, 지역에 선언된

지역변수는 함수에 선언된 변수이며 자신의 지역 스코프 및 하위 스코프에서 유효하다.

 

 

4. 구조 분해와 확장 문법

• ES6의 구조 분해문법을 이용하면 객체의 특정 값을 다른 변수에 할당하기가 쉽습니다.

​

* 구조 분해

// 할당 구조 분해 하기 전

let myObo = {

    prop1: 'Hello',

    prop2: 'World'

}

​

const prop1 = myObo.prop1;

const prop2 = myObo.prop2;

​

// 할당 구조 분해 사용

let myObo = {

    prop1: 'Hello',

    prop2: 'World'

}

​

const { prop1, prop2 } = myObo;

​

​

* 확장 문법

확장 문법은 객체에 키(Key), 값(Value)이 많을 때 해당 객체의 값을 특정 객체의 값으로 쉽게 복사할 수 있습니다.

​

// ES5에서 복사방식

let myObo = {

    prop1: 'Hello',

    prop2: 'World'

}

​

let newObo = {

    name: 'ok',

    prop1: myObo.prop1,

    prop2: myObo.prop2

};

​

// ES6에서 확장문법으로 복사 (Spread 연산자(...)를 이용)

: 말 그대로 퍼뜨리다. 객체 혹은 배열을 펼칠수 있습니다.

let myObo = {

    prop1: 'Hello',

    prop2: 'World'

}

​

let newObo = {

    name: 'ok',

    ...myObo

}

​

ex)

const animals = ['개', '고양이', '참새'];

const otherAnimals = [...animals, '비둘기'];

​

console.log(otherAnimals);

결과 : ['개', '고양이', '참새', '비둘기'];

​

 

5. Promise

Javascript 에서 기존 비동기 처리는 콜백 함수를 사용한 콜백 패턴을 사용했다.

결과적으로 콜백헬을 발생시켰다.

이를 해결하기 위해 Promise가 도입되었고 Promise 후속처리 메소드를 이용해

에러 처리를 효과적으로 할 수 있게 되었다.

 

6. Class

자바스크립트는 프로토타입 기반의 객체 지향 언어이다.

클래스 기반의 객체 지향 프로그래밍도 할 수 있도록 Class 키워드를 도입했다.

자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.

클래스는 호이스팅이 let, const 키워드 처럼 동작한다.

 

 

7. String Method(includes, startsWith, endsWith)

• .includes(찾을 문자열) : 문자열에 포함되어 있는지 찾는다.
• .startsWith(시작 문자) : 특정 문자열의 시작 문자가 맞는지 찾는다. 
• .endsWith(종료 문자) : 특정 문자열의 끝나는 문자가 맞는지 찾는다.

 

8. Default Parameter

기존 함수에는 매개변수에 초기화를 하려면 함수 내부에서 특정 작업이 필요했으나

ES6 에서는 호출과 동시에 초기화가 가능해졌다.

 

// ES5
function oboTest(a, b){
    var a = a || 10;
    var b = b || 20;
    return a + b;
}

// ES6
let oboFunction = (a = 10, b = 20) => a + b;