📌
ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었습니다. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선되었습니다.
대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 되곤합니다.
◼ let, const
let: 재할당은 가능. 재선언은 불가능.
const: 재할당, 재선언 둘 다 불가능. 초기값이 없으면 선언 불가능.
◼ 화살표 함수 (Arrow Function)
function이나 return 키워드 없이 함수를 만드는 방법
let add = (x) => {
return 1;
};
// {}안에 한 줄만 들어가면(return문이 한 줄이면) 아래와 같이 작성가능
let add = (x) => 1;this
function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해집니다.
◼ 삼항 연산자 (ternary operator)
condition ? true인 경우 : false인 경우
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓◼ 구조 분해 할당 (Destructuring)
배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법
destructuring = de(not) + structure(구조) + ing = 구조가 아니다. 구조를 분해한다.
배열
let [변수1, 변수2] = [배열1, 배열2];let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일
// let [a,b,c] = ["value1", "value2", "value3"];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,d] = arr
console.log(d) // 값이 없을땐 undefined
let [a,b,c,d = 4] = arr // d = 4는 초기값을 설정해준 것
console.log(d) // 4
let arr = ["value1", "value2", "value3", "value4"];
let [a,b,c,d = 4] = arr
console.log(d) // value4
// arr[3]에 값이 존재하므로 초기값인 4가 아닌 value4가 반환됨객체
let 변수명1 = {
key1: 값1,
key2: 값2,
};
let { 변수1, 변수2 } = 변수명1;
// ↑ 둘은 같은 뜻이다 ↓
// let { 변수1, 변수2 } = {
// key1: 값1,
// key2: 값2,
// };
// 변수1 === 값1, 변수2 === 값2let user = {
name: "nbc",
age: 30,
};
let { name, age } = user;
// ↑ 둘은 같은 뜻이다 ↓
// let name = user.name;
// let age = user.age;
console.log(name, age); // nbc 30새로운 이름으로 할당
let 변수명1 = {
key1: 값1,
key2: 값2,
};
let { key1: 변수3, key2: 변수4 } = 변수명1;
// ↑ 둘은 같은 뜻이다 ↓
// let { key1: 변수3, key2: 변수4 } = {
// key1: 값1,
// key2: 값2,
// };
// 변수3 === 값1, 변수4 === 값2let user = {
name: "nbc",
age: 30,
};
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) // nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // 값이 없을땐 undefined
let {name, age, birthDay = "today"} = user; // birthDay = "today"는 초기값을 설정해준 것
console.log(birthDay) // today
let user = {
name: "nbc",
age: 30,
birthDay: "yesterday",
};
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // yesterday
// birthDay에 값이 존재하므로 초기값인 "today"가 아닌 "yesterday"이 반환됨◼ 단축 속성명 (property shorthand)
객체의 key와 value 값이 같다면, 생략 가능
const name = "nbc"
const age = "30"
const obj = {
name, // name: name, - key(name), value(name)의 명칭이 같아서 생략 가능
age: newAge // key(age), value(newAge)의 명칭이 달라서 생략 불가능
}
// 아래 3개는 모두 같은 뜻임
const obj = {
name,
age
}
const obj = { name, age };
const obj = { name: name, age: age };◼ 전개 구문 (Spread)
배열이나 객체를 전개하는 문법. spread = 펼치다
현재 구조를 벗고 새로운 구조를 입어야할때 사용됩니다.
let arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3배열
let arr = [1, 2, 3];
let newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]객체
let user = { name: "nbc", age: 30 };
let user2 = { ...user };
user2.name = "nbc2";
console.log(user.name); // nbc
console.log(user2.name); // nbc2◼ 나머지 매개변수(rest parameter)
매개변수의 개수를 정확히 모를때 사용
function func(매개변수1, 매개변수2, 매개변수3, ...매개변수) {
console.log(매개변수1, 매개변수2, 매개변수3);
}
// 호출
func(매개변수1, 매개변수2, 매개변수3, 매개변수4, 매개변수5, 매개변수6);function func(a, b, c, ...args) {
console.log(a, b, c); // 1 2 3
console.log(...args); // 4 5 6 7
}
func(1, 2, 3, 4, 5, 6, 7);◼ 템플릿 리터럴 (Template literals)
백틱(``) 과 ${}로 표현. 멀티라인 지원.
// ${}안에 자바스크립트 코드를 넣을 수 있음
const text = "안녕하세요!"
console.log(`Hello World! ${text}`); // Hello World! 안녕하세요!
// 멀티라인
console.log(`
Hello
World!
`);
/*
Hello
World!
*/
