[JavaScript] ES6 문법을 알아보자 (ECMAScript 2015)

ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠.

제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나 하고 알아가는 시간이 되었습니다.

 

JavaScript Versions

 

위 링크에 들어가시면 ES6에는 어떤 기능이 추가되었는지 볼 수 있습니다. 각 연도별로 또 버전이 나누어져 있습니다.

 

 

현재 낮은 버전의 브라우저에서는 ECMAScript 2019부터는 호환이 잘 안될 수도 있다고 합니다.

 

 

ECMAScript 2015

1. const, let 추가됨

원래 var로 변수를 선언했었는데요, 문제가 있어서 const와 let이 나온 지금은 쓰지 않는 것이 권장됩니다.

바로 var는 선언과 초기화가 동시에 이루어진다는 문제 때문입니다.

 

자바스크립트에서 변수는 선언 > 초기화 > 할당의 순서대로 생성됩니다.

console.log(a);    // 오류가 발생하지 않고 undefined가 출력됨
var a = "a";

 

2번째 라인에서 선언과 초기화가 동시에 일어났고 1번째 라인에서 바로 a라는 변수에 접근이 가능합니다. 다만 아직 "a" 라는 값이 할당이 되어 있지 않아서 undefined가 출력됩니다.

 

이전 라인에서 초기화된 변수에 접근 가능한 이유는 바로 자바스크립트의 호이스팅(Hoisting) 이라는 성질 때문입니다.

이 성질 덕분에 함수 선언 전에도 함수를 쓸 수 있는 것이지요.

 

let과 const에서도 호이스팅은 적용되지만, 선언과 초기화가 따로 이루어진다는 점 덕분에 오류를 출력합니다.

console.log(a);  // a is not defined
let a = "a";

console.log(a); 시점에서 a는 호이스팅에 의해 이미 선언되었지만, 아직 초기화되지 않은 상태입니다. 초기화는 console.log(a); 가 실행된 다음, 즉 라인 순서대로 이루어지기 때문입니다.

 

 

 

2. 파라미터에 default 값 지정 가능

function test(x, y = 10) {
    return x + y;
}

test(1);    // 11
test(1, 2);    // 3

 

파라미터 값을 넘기지 않았을 때 사용할 디폴트 값을 지정할 수 있습니다.

 

 

 

3. 화살표 함수 추가됨

// ES5
var test = function(x) {
    return x;
}

// ES6
const test = (x) => {
    return x;
}

// 위와 같은 함수
const test = (x) => x;

이 함수의 특징은 아래와 같습니다.

• 함수 표현식과 성질이 같음 (형태만 좀 더 간략해진 것)
• const를 사용하는 게 좋음
• 예시코드의 세 번째 함수와 같이 return을 생략할 수 있음 (단일식일 경우에만)
• new test(); 처럼 생성자로는 사용할 수 없음
• this를 가지고 있지 않음

this란 자신의 한 단계 상위 스코프에 있는 객체를 가리킵니다. 아래 코드를 보겠습니다.

const myObj = {
    name: "doringri",
	
    func: function() {
        setTimeout(function() {
            console.log(this);    // 바로 아랫줄에서 .bind(this)를 해줘야 myObj가 출력
        }.bind(this), 1000);
    },
	
    arrowFunc: function() {
        setTimeout(() => {
            console.log(this);    // myObj 출력
        }, 1000);
    }
}

myObj.func()
myObj.arrowFunc()

 

화살표 함수가 아닌 함수에서는 setTimeout 내부의 함수에서 myObj를 출력하기 위해 this(=myObj)를 명시적으로 바인딩해줄 필요가 있습니다.

 

.bind(this)가 그 부분인데요, 만약 바인딩을 해주지 않으면 myObj가 아닌, 그보다 한 단계 하위 스코프인 setTimeout 객체를 출력합니다.

 

그러나 화살표 함수는 자신만의 this를 가지지 않기 때문에, this를 호출했을 경우 바인딩 없이도 setTimeout의 상위 객체인 myObj를 곧바로 출력합니다.

 

arrowFunc: () => {
    setTimeout(() => {
        console.log(this);
    }, 1000)
}

그리고 위와 같이 arrowFunc 안에 있는 function까지 화살표함수로 대체될 수 있습니다. 간결하네요.

어쨌든 명시적 바인딩이 필요한 경우도 있을 수 있으니 상황에 맞게 function과 화살표 함수를 사용하면 될 것 같습니다.

 

 

 

4. 스프레드(...) 연산자 추가됨

리스트나 객체를 복사하는 기능입니다.

const numbers = [1, 2, 3];

위와 같은 리스트가 있을 때

const copiedNumbers = numbers.map((number) => number);

ES5까지는 위의 방법처럼 map을 이용하는 방법이 있지만,

const newNumbers = [...numbers];

스프레드 문자열으로 간결하게 복사할 수가 있습니다.

 

유의해야 할 점은 스프레드를 이용한 복사는 가장 바깥의 리스트/객체에서만 깊은 복사가 되고, 중첩된 리스트/객체에서 더 하위에 있는 요소들은 얕은 복사로 처리됩니다.

아래 코드를 보면 바로 이해되실 겁니다.

const profile = {
    name: "doringri",
    detail: {
        job: "developer"
    }
};

const newProfile = {...profile};

profile.name = "dooooringri";
profile.detail.job = "freelancer";

console.log(newProfile);    // { name: 'doringri', detail: { job: 'freelancer' } }

 

 

 

5. 향상된 For문 (For-of) 추가됨

향상된 For문 같은 경우에 자바엔 for(int item : items), 코틀린엔 for(item in items) 가 있습니다.

for (let item of items) {
    console.log(item);
}

자바스크립트에서는 이렇게 씁니다.

 

 

 

6. Map, Set 자료형 추가됨

Map은 Java의 Map, 그리고 파이썬의 딕셔너리처럼 key-value 형태의 쌍으로 이루어진 객체입니다.

const fruits = new Map([
    ["apple", 500],
    ["banana", 300]
]);

console.log(fruits.get("apple"));    // 500

 

 

Set은 파이썬의 Set처럼 중복이 제거된 객체입니다.

const letters = new Set();

letters.add("a");
letters.add("b");
letters.add("b");

console.log(letters);    // Set(2) { 'a', 'b' }

 

 

 

7. 클래스(class) 추가됨

클래스는 객체를 만들기 위한 템플릿입니다. 객체지향 언어를 다뤄보셨다면 익숙하실 겁니다.

클래스가 추가되기 전까진 특정 객체의 인스턴스를 만들기 위해 생성자의 기능을 하는 함수를 만들었었습니다. 아래 코드를 먼저 보고 가겠습니다.

// ES6 이전

function User(name, age) {
    this.name = name;
    this.age = age;
}

const user = new User("doringri", 20);
console.log(user.name);    // doringri

 

 

다음으로는 클래스로 만든 객체 템플릿을 보겠습니다. 클래스 안에는 생성자와 객체 내부에서 사용할 메소드가 포함될 수 있습니다.

// ES6의 클래스

class User {
    // 생성자는 필수로 만들어줘야 함
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.company = "doringri company";
    }
    
    // 클래스엔 메소드도 넣을 수 있음
    plusAge(x) {
        this.age += x;
    }
    
    // 인스턴스를 만들지 않고도 호출할 수 있는 static 메소드
    static print(name, age) {
        console.log(name + ", " + age);
    }
}

// 인스턴스를 담은 레퍼런스 만들기
const user = new User("doringri", 20);

// 메소드 호출
user.plusAge(3);
console.log(user.age);    // 23

// static 메소드 호출
User.print("ming", 25);    // ming, 25

 

 

 

8. Promise 추가됨

비동기 통신 시 사용하는 객체입니다. 콜백 함수보다 가독성이 좋고 예외 처리가 쉽습니다.

[JavaScript] Promise 객체

예시 코드는 위의 포스트를 참고하세요.

근데 위 포스트에서 다룬 async function은 ECMAScript 2015에서 추가된 건 아니고 2017에서 추가됐습니다.

 

 

 

9. Symbol이라는 자료형이 추가됨

Symbol은 number, string 같은 자료형입니다.

// Symbol("심볼 설명") 의 형태로 만듭니다.
// 설명이 같아도 심볼의 값은 만들 때마다 항상 다릅니다.

let id = Symbol("id");
let id2 = Symbol("id");

console.log(id);    // Symbol(id)
console.log(id == id2);    // false

 

어떤 오브젝트의 키로 사용될 수 있는 고유한 상수값을 만들어줍니다.

객체에 중복되지 않은 숨겨진 프로퍼티 키를 추가하는 용도로 사용될 수 있습니다.

let user = {
    name: "doringri"
};

let id_for_A_method = Symbol("id");
let id_for_B_method = Symbol("id");

user[id_for_A_method] = 1;
user[id_for_B_method] = 2;

console.log(user[id_for_A_method]);    // 1
console.log(user[id_for_B_method]);    // 2

만약 A와 B라는 사람이 C가 만든 코드에 있는 객체에 id라는 속성을 집어넣고 싶어 한다고 가정해봅시다.

둘 다 다른 코드를 구현하는데 id를 이용한다면 충돌이 나거나 값들이 섞여서 곤란한 상황이 생길 수 있죠.

 

그러나 심볼을 사용하면 이를 방지할 수 있습니다. user.id로는 접근할 수 없고 오직 처음에 만들었던 심볼값으로만 접근할 수 있어서 이름이 중복될 일이 없습니다.

 

 

 

10. 나머지 매개변수(Rest Parameter) 가 추가됨

매개변수를 무한한 개수만큼 추가할 수 있습니다.

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

 

 

 

11. String.includes(), String.startsWith(), String.endsWith() 가 추가됨

각각

특정 문자열이 포함되어 있으면 true를 출력합니다.

특정 문자열로 시작하면 true를 출력합니다.

특정 문자열로 끝나면 true를 출력합니다.

let text = "Hello world";

console.log(text.includes("world"));    // true
console.log(text.startsWith("Hello"));    // true
console.log(text.endsWith("Hello"));    // false

 

 

 

12. Array.from() 이 추가됨 (문자열 하나하나를 리스트로 리턴함)

Array.from("ABCDEFG")   // [A,B,C,D,E,F,G]

 

 

 

13. Array.keys() 가 추가 (배열 요소의 키를 리스트로 리턴함)

// 일반 리스트라면 key는 인덱스임

const fruits = new Map([["a", "Banana"], ["b", "Orange"]]);
const keys = fruits.keys();

for (let x of keys) {
    console.log(x);    // a b
}

 

 

 

14. Array.find() 가 추가

리스트에서 조건에 맞는 첫 번째 요소를 리턴하는 메소드입니다.

w3school 예시 코드가 함수 표현식(function)으로 나와있어서 화살표 함수로 바꿔봤습니다.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find((item, index) => 
    item > 18 && index > 3
);

console.log(first);    // 29

 

 

 

15. Array.findIndex() 가 추가

리스트에서 조건에 맞는 첫 번째 요소의 인덱스를 리턴하는 메소드입니다.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex((item, index) => 
	item > 18 && index > 3
);
console.log(first);    // 4

 

 

 

그 밖엔...

16. Math.trunc(x), Math.sign(x), Math.sbrt(x), Math.log2(x), Math.log10(x) 함수 추가

17. Number.EPSILON, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER 추가
18. Number.isInteger(x), Number.isSafeInteger(x) 추가

19. isFinite(x), isNaN(x) 추가

20. Arrays.entries() 추가 (자동으로 key-value 쌍으로 만들어줌)

 

뭐 이런 것들도 있네요. 필요한 상황이 생기면 쓰게 될 것 같습니다.

 

 

---

포스팅하다보니 생각보다 제가 자바스크립트에 대해 모르는 게 많았다는 걸 새삼 느끼는군요...

이번 기회에 많이 공부가 되었던 것 같습니다.

자바스크립트에 대해선 조만간 새로운 포스팅으로 찾아뵙겠습니다.

읽어주셔서 감사합니다!