[javascript] 써먹고 싶은 스퀼

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"