1. Nullish Coalescing Operator ( 널리쉬 콜싱 오퍼레이터 )
function printMessage(text) {
const data = text ?? "is Nothing";
console.log(data)
}
// text="View" 일때
View
// text가 없을때 ( undefined )
is Nothing
// text가 null 일때
is Nothing
2. Default Parameters ( 디폴트 파라미터 )
function printMessage(text = "is Nothing"){
console.log(text)
}
// text="View" 일때
View
// text가 없을때 ( undefined )
is Nothing
// text가 null 일때
Null
3. spread-syntax-object
// 기존 Object
const item = { type: "shirt", size: "M" }
const detail = { price: 20, made: "Korea", gender: "M" }
// 괄호()로 감싸진 모든 Object를 합쳐준다. ( key, value 형식에 맞게 )
const shirt0 = Object.assign(item, detail);
// ...을 사용해 Object의 내용을 하나씩 가져오고, 이를 다시 Object로 만든다.
const shirt1 = { ...item, ...detail }
// 기존 Array
let fruits = ["watermelon", "orange", "banana"]
// fruits.push("strawberry")
fruits = [ ...fruits, "strawberry" ]
// fruits.unshift("grape")
fruits = [ "grape", ...fruits ]
// fruits.concat(fruits2);
combined = [ ...fruits, ...fruits2 ]
4. optional chaining
// 기존의 사용방법
function displayJobTitle(person) {
if (person.job && person.job.title) {
console.log(person.job.title);
}
}
// optional chaining 사용방법
function displayJobTitle(person) {
if (person.job?.title) {
console.log(person.job.title);
}
}
5. template literals
// 기존 javascript 사용방법
console.log(
"Hello " + person.name + ", Your current score is: " + person.score
);
// 백틱(`) 사용해서 간소화 하기
console.log(`Hello ${persone.name}, Your current score is: ${person.score}`)
6. filter, map, reduce
// 기존 배열
const numbers = [1, 2, 3, 4, 5, 6];
// filter를 사용해, 2로 나눈 나머지가 1인 경우에만 값을 가져오도록 함
const evens = numbers.filter(num => num % 2 === 0)
// map을 사용해, 각 배열요소에 4를 곱하여 값을 가져오도록 함
const multiple = numbers.map(num => num * 4);
// reduce를 사용해, b값에 각 배열요소를 넣어, a에 더해준다. ( 마지막 값 가져옴 )
const sum = numbers.reduce((a, b) => a + b, 0);
// 위의 작업을 연속적으로 실행하기
const result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 4);
.reduce((a, b) => a + b, 0);
7. async, await
// 기존의 javascript Promise 사용법
function displayUser() {
fetchUser()
.them((user) => {
fetchProfile(user)
.then((profile) => {
updateUI(user, profile);
});
});
}
// async, await으로 간소화
async function displayUser() {
const user = await fetchUser();
const profile = await fetchProfile(user);
updateUI(user, profile);
}
8. set
// 기존 배열
const array = ["dog", "cat", "tiger", "dog", "fox", "cat"]
// Set으로 배열 중복 제거
console.log([...new Set(array)]);
9. numeric separator
// 이제 언더바(_)가 포함된 숫자도, 숫자로 인식한다
const a = 2_455_819_541;
const b = 2455819540;
console.log(a-b);
// 결과
1
10. replaceAll
// replaceAll을 사용해서, 문자열안에 특정 문자열을 탐지해, 한번에 바꿀 수 있다.
const text = "I love sushi, sushi is good!";
console.log(text.replaceAll("sushi", "kimchi"));
// 결과
I love kimchi, kimchi is good!
11.logical asignment operator
// 기존의 javascript 방식
let a = 1;
if(a){
a = 2;
}
let b = false;
if(!b){
b = true;
}
let c = undefined;
if (c === undefined) {
c = "hello"
}
// 최신방식
// a가 true라면, a에 2를 넣는다.
let a = 1;
a &&= 2;
// b가 false라면, b에 true를 넣는다.
let b = false;
b ||= true
// c가 undefined 상태라면, "hello"를 넣는다.
let c = undefined;
c ??= "hello"
반응형
