[JavaScript] ES6 문법 간단히 정리

1. const, let

const는 변수가 사용되면 다시 할당할 수 없다. (상수이므로 변경 불가능)

const name = "mbappe";
name = "haaland"; // error

console.log(name);

 

let은 const와 다르게 새로운 값을 가질 수 있고 다시 할당할 수 있다. (변경 가능)

let name = "mbappe";
name = "haaland";
console.log(name); // haaland

 

 

2. Arrow Function

// ES5
var example = function example(a, b) {
    console.log(a, b);
};

// ES6
let example = (a, b) => {
    console.log(a, b);
}

 

 

3.Template Literals

작은 따옴표(')와 백틱(`)에 유의할 것

// ES5
function func1(name, height) {
    return name + '는 ' + height + 'cm입니다.';
}
console.log(func1('어피치', 180)); // 어피치는 180cm입니다.

// ES6
const func2 = (name, height) => {
    return `${name}는 ${height}cm입니다.`;
}
console.log(func2('어피치', 180)); // 어피치는 180cm입니다.

 

 

4. 기본 매개변수

// ES5
const func1 = (name, height) => {
    return `${name}는 ${height}입니다.`;
}
console.log(func1('haaland')); // haaland는 undefined입니다.

// ES6
const func2 = (name, height = 180) => {
    return `${name}는 ${height}입니다.`;
}
console.log(func2('haaland')); // haaland는 180입니다.

 

 

5. 배열 및 객체 비구조화

// ES5
const info1 = {
    name: 'haaland',
    age: 27,
    job: 'programmer'
};

let name = info1.name;
let age = info1.age;
let job = info1.job;

console.log(name, age, job); // haaland 27 programmer

// ES6
const info2 = {
    name : 'haaland',
    age : 27,
    job : 'programmer'
};

let { name, age, job } = info2;
console.log(name, age, job); // haaland 27 programmer