[JavaScript] 자주 사용하는 ES6 문법

1. const & let

const와 let은 변수 선언을 위한 키워드입니다. (기존엔 var로 변수 선언)

- const : var보다 강력하며, 변수가 사용되면 다시 할당할 수 없습니다. (상수이므로 변경 불가)

  * 아래 코드처럼 변경 불가능

const hobby = "walking";
hobby = "exercise";	// Error

---

- let : const와 달리 새로운 값을 가질 수도 있고 재할당도 가능합니다. (변경 가능)

let phone = "iphone11";
phone = "iphone13";
console.log(phone);	// Result : iphone13

---

2. Arrow Function

Arrow Function은 코드가 간결해져서 가독성이 높아지는 함수 문법입니다.

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

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

---

- Arrow Function을 map, filter 등 내장 함수에도 사용할 수 있습니다.

// ES5 문법
var testArray = ['a', 'b', 'c', 'd'];
var arr = testArray.map(function(item) {
	return item;
});
console.log(arr); // Result :  ['a', 'b', 'c', 'd']

// ES6 문법
let engArray = ['a', 'b', 'c', 'd'];
let arr2 = engArray.map((item) => item);
console.log(arr2); // Result :  ['a', 'b', 'c', 'd']

---

3. Template Literals

기존 ES5 문법에서는 문자열을 연결하기 위해 더하기(+) 연산자를 사용했는데, ES6에서는 더하기(+) 연산자를 사용하지 않고 문자열 내에서 변수로 사용이 가능합니다.

  * ES5 작은따옴표(')와 ES6 백틱(`)을 헷갈리지 않도록 주의 !

// ES5 문법
function myFunc1(name, age) {
	return name + '는 ' + age + '살';
}
console.log(myFunc1('도리', 24));	// Result : 도리는 24살

// ES6 문법
const myFunc2 = (name, age) => {
	return `${name}는 ${age}살`;
};
console.log(myFunc2('도리', 24));	// Result : 도리는 24살

---

4. Default Parameters (기본 매개 변수)

//ES5 문법
const myFunc1 = (name,age) => {
    return `${name}는 ${age}살`;
};
console.log(myFunc1('도리'));	// Result : 도리는 undefined살

위 코드를 보면 매개 변수를 정의하지 않는 경우 undefined를 반환하는데 아래 코드처럼 정의하면 변수에 해당 값을 사용할 수 있습니다.

//ES6 문법
const myFunc2 = (name,age = 24) => {
    return `${name}는 ${age}살`;
};
console.log(myFunc2('도리'));	// Result : 도리는 24살

---

5. Array and Object Destructing (배열 및 객체 비구조화)

배열 및 객체 비구조화를 통해 객체의 값을 새로운 변수에 쉽게 할당할 수 있고, 코드가 간결해집니다.

  * 속성명과 동일하지 않은 변수를 할당하면 undefined가 반환됩니다 !

// ES5 문법
const myInfo1 = {
    name : '도리',
    age : 24,
    job : 'programmer'
};

let name = myInfo1.name;
let age = myInfo1.age;
let job = myInfo1.job;

console.log(name, age, job);	// Result : 도리 24 programmer

// ES6 문법
const myInfo2 = {
    name : '도리',
    age : 24,
    job : 'programmer'
};

let { name, age, job } = myInfo2;

console.log(name, age, job);	// Result : 도리 24 programmer

---

- 변수명을 아래 코드처럼 콜론(:)을 사용하여 바꿀 수 있습니다.

const myInfo2 = {
    name : '도리',
    age : 24,
    job : 'programmer'
};

let { name: changeName, age, job } = myInfo2;

console.log(changeName);	// Result : 도리

---

- 배열인 경우 아래 코드와 같이 작성하면 됩니다.

const arr = ['집', '회사', '카페'];
let [place1, place2, place3] = arr;

console.log(place1, place2, place3);	// Result : 집 회사 카페

---

6. Promise

Promise는 비동기 코드인데, 주로 API에서 데이터를 가져오는 등 시간이 걸리는 함수를 가지고 있을 때 사용합니다.

const promiseFunc = () => {
    return new Promise((resolve, reject) => {
        resolve("success!");
    });
};

console.log(promiseFunc());

 

- 결과가 Promise 자체로 반환됩니다.

---

 

7. Rest Parameter and Spread Operator (나머지 매개변수 및 확산 연산자)

(1) Rest Parameter

Rest Parameter는 배열의 인수를 가져와 새 배열을 반환합니다.

const arr = ['a', 'b', 'c', 'd', 'e'];

const [val1, val2, val3, ...rest] = arr;

const func = (restArr) => {
    return restArr.filter(item => item).join(" ");
};
console.log(func(rest));	// Result : d e

---

(2) Spread Operator

Spread Operator는 Rest Parameter와 구문은 같으나 인수 뿐만 아닌 배열 자체를 복사합니다.

const arr = ['a', 'b', 'c', 'd', 'e'];

const copyArr = (...copy) => {
    return copy;
};

console.log(copyArr(arr));	// Result : ['a', 'b', 'c', 'd', 'e']

 

* 만약 arr 배열을 복사하고 싶어서 아래 코드처럼 작성한다면 내용이 아니라 값이 복사됩니다.

const valueArr = arr;