Jacob Ko

Jacob Ko

Everything is Awesome 👍

22.Using JS as an expert (자바스크립트 프로처럼 쓰기)

Updated:

1.Ternary Operator (삼항연산자)

// Ternary Operator

// ❌ Bad Code 💩
function getResult(score) {
  let result;
  if (score > 5) {
    result = "👍";
  } else if (score <= 5) {
    result = "👎";
  }
  return result;
}

// ✅ Good Code ✨
// 삼항 연산자를 이용해서 바로 return 해서 ? : 을 사용해서 조건문 만들기
function getResult(score) {
  return score > 5 ? "👍" : "👎";
}

console.log(getResult(6));
console.log(getResult(5));

2.Nullish Coalescing Operator

// Nullish coalescing operator

// ❌ Bad Code 💩
// 전달받은 parameter 가 있다면 바로 text 에 할당하고 null 이나 undefined 일때 message 출력
function printMessage(text) {
  let message = text;
  if (text == null || text == undefined) {
    message = "Nothing to display 😜";
  }
  console.log(message);
}

// ✅ Good Code ✨
// text 에 내용이 있다면 그대로 쓰고 없다고 하면이 ?? 임 Nothing to display 출력
function printMessage(text) {
  const message = text ?? "Nothing to display 😜";
  console.log(message);
}

🔷Default Parameter 와의 차이점

// 🚨 Default parameter is only for undefined
// Default parameter 의 값은 오직 undefined 만 되는것에 주의 text 에 값이 할당 되지 않을경우에 입력된 값을 출력하는것 (즉 parameter 에 어떠한 값이 있다고 하면 해당되지 않는경우임)
function printMessage(text = "Nothing to display 😜") {
  console.log(text);
}

🔷Logical Operator 와의 차이점

Nullish coalescing operator ?? 의 경우는 left 쪽이 null, undefined 일 경우에 right 쪽을 나타내는 것임

  • letExpr ?? rightExpr

비슷한 경우로 Logical OR operator || 의 경우에는 left 쪽이 falsy 일경우에 right 쪽을 나타내는 경우임 (* 참고 falsy 의 값은 false, undefined, null, 0, -0. “”, ‘’, `` 와 같은 빈 문자열도 해당됨)

  • leftExpr || rightExpr
// 🚨 Logical OR operator ||
function printMessage(text) {
  const message = text || "Nothing to display 😜";
  console.log(message);
}

const result = getInitialState() ?? fetchFromServer();
console.log(result);

function getInitialState() {
  return null;
}
function fetchFromServer() {
  return "Hiya from 💻";
}

printMessage("Hello");
printMessage(null);
printMessage(undefined);
printMessage(0);
printMessage("");

🔷Expr 의미

  • Nullish coalescing operator 는 value 값이 아닌 Expr 의 값으로도 사용이 가능함 (코드를 실행해서 실행된 값을 할당할 때도 많이 쓰이고 있음)
const result = getInitialState() ?? fetchFromSever();
console.log(result);

function getInitialState() {
  return null;
}

function fetchFromSever() {
  return "Hiya from 💻";
}

3.Object Destructuring

// Object Destructuring

const person = {
  name: "Julia",
  age: 20,
  phone: "0107777777",
};

// ❌ Bad Code 💩
// person. 을 반복적으로 사용해서 보기 좋지 않은 코드임
function displayPerson(person) {
  displayAvatar(person.name);
  displayName(person.name);
  displayProfile(person.name, person.age);
}

// ❌ Bad Code 💩
// name, age 지역변수를 만들어서 사용한 코드 그러나, person. 의 반복 과 코드가 늘어남
function displayPerson(person) {
  const name = person.name;
  const age = person.age;
  displayAvatar(name);
  displayName(name);
  displayProfile(name, age);
}

// ✅ Good Code ✨
// Object Destructuring 구조분해 할당 person 의 각각 해당되는 name 과 age 가 각각 구조 분해 되서 할당 되 다시 변수로 사용이 가능한 코드가 됨 (더 가독성 및 코드의 단순화가 됨)
function displayPerson(person) {
  const { name, age } = person;
  displayAvatar(name);
  displayName(name);
  displayProfile(name, age);
}

https://youtu.be/BUAhpB3FmS4?t=562 볼차례 임

4.Spread Syntax

Object 에서 사용하기

// Spread Syntax - Object
const item = { type: "👔", size: "M" };
const detail = { price: 20, made: "Korea", gender: "M" };

// ❌ Bad Code 💩
// key 와 value 등을 수동적으로 update 할 수 있긴 하지만, 기존의 object 를 변경하는것은 좋지 않음
item["price"] = detail.price;

// ❌ Bad Code 💩
// 새로운 생성자 object 를 만들어서 하나씩 하드코딩 하는것은 좋지 않음
const newObject = new Object();
newObject["type"] = item.type;
newObject["size"] = item.size;
newObject["price"] = detail.price;
newObject["made"] = detail.made;
newObject["gender"] = detail.gender;
console.log(newObject);

// ❌ Bad Code 💩
// 만약 1000개 이상의 key 와 type 이 있을경우에 이렇게 수동코딩하게 되면 좋지 않음
const newObject2 = {
  type: item.type,
  size: item.size,
  price: detail.price,
  made: detail.made,
  gender: detail.gender,
};
console.log(newObject);

// ✅ Good Code ✨
// Object assign 함수를 이용해서 함께 묶고 싶은 변수를 전달하면 shirt0 에 전달 되는 방식임
const shirt0 = Object.assign(item, detail);
console.log(shirt0);

// ✅ Better! Code ✨
// spread syntax 를 사용해서 새로운 object 에다가 모두 가져온다음에 detail 에 price 값을 30으로 덮어 씌울때 편함
const shirt = { ...item, ...detail, price: 30 };
console.log(shirt);

Array 에서 사용하기

// Spread Syntax - Array
let fruits = ["🍉", "🍊", "🍌"];

// fruits.push('🍓');
// 딸기가 제일 마지막에 push 되는것. ...fruits 를 하나씩 다 꺼내와서 다시 배열에 담는것임
fruits = [...fruits, "🍓"];
console.log(fruits);

// fruits.unshift('🍇');
// array에 앞에 추가하고 싶은 unshift 와 같이 하려면 앞에다 추가해주면 됨
fruits = ["🍇", ...fruits];
console.log(fruits);

const fruits2 = ["🍈", "🍑", "🍍"];

// 2개의 배열을 합치고 싶을때 concat() 을 통해 합쳐도 되고
let combined = fruits.concat(fruits2);

// spread Syntax 를 사용해서 합쳐도 되는데 아래와 같이 중간에 체리를 넣고 싶으면 중간에 위치 시켜서 넣으면 됨
combined = [...fruits, "🍒", ...fruits2];
console.log(combined);

5.Optional Chaining

// Optional Chaining
const bob = {
  name: "Julia",
  age: 20,
};
const anna = {
  name: "Julia",
  age: 20,
  job: {
    title: "Software Engineer",
  },
};

// ❌ Bad Code 💩
// person 에 잡이 있고 title 이 있으면 그 person 의 job 을 출력하는 코드
// && 의 연산자를 이용하면 코드가 길어지고 가독성이 떨어짐
function displayJobTitle(person) {
  if (person.job && person.job.title) {
    console.log(person.job.title);
  }
}

// ✅ Good Code ✨
// optional Chaining 을 사용해서 person.job? 이 있다면 title 안의 값을 검색하고 job 이 비어 있다면 이것이 바로 false 가 되기 때문에 if 문은 실행되지 않음
function displayJobTitle(person) {
  if (person.job?.title) {
    console.log(person.job.title);
  }
}

// ✅ Good Code ✨
// Nullish coalescing 과 같이 사용하게 되면 false 일 경우의 msg 도 출력 할 수 있는 간단한 코드로 만들 수 있음
function displayJobTitle(person) {
  const title = person.job?.title ?? "No Job Yet 🔥";
  console.log(title);
}

displayJobTitle(bob);
displayJobTitle(anna);

6.Template Literals

// Template Literals (Template String)
const person = {
  name: "Julia",
  score: 4,
};

// ❌ Bad Code 💩
// + 연산자를 이용해서 계속 붙여 나가는 코드는 코드가 길어지고 보기가 좋지 않게 됨
console.log(
  "Hello " + person.name + ", Your current score is: " + person.score
);

// ✅ Good Code ✨
// backtick 키를 사용해서  template literals 를 사용하게 되면 더 직관적인 code 가 됨
console.log(`Hello ${person.name}, Your current score is: ${person.score}`);

// ✅ Good Code ✨
// object destructuring 을 사용해서 같이 사용하게 되면 좀더 심플하게 볼 수 있게됨
const { name, score } = person;
console.log(`Hello ${name}, Your current score is: ${score}`);

// ✅ Good Code ✨
// 재사용이 가능하도록 함수를 만들어서 사용하게 되면 나중에 문자열이 변경된다면 한곳에서만 수정하면 되니까 코드 수정이 간편해짐
function greetings(person) {
  const { name, score } = person;
  console.log(`Hello ${name}, Your current score is: ${score}`);
}

7.Loops

// Looping
const items = [1, 2, 3, 4, 5, 6];

// ❌ Bad Code 💩
function getAllEvens(items) {
  const result = [];
  for (let i = 0; i < items.length; i++) {
    if (items[i] % 2 === 0) {
      result.push(items[i]);
    }
  }
  return result;
}

function multiplyByFour(items) {
  const result = [];
  for (let i = 0; i < items.length; i++) {
    result.push(items[i] * 4);
  }
  return result;
}

function sumArray(items) {
  let sum = 0;
  for (let i = 0; i < items.length; i++) {
    sum += items[i];
  }
  return sum;
}

const evens = getAllEvens(items);
const multiple = multiplyByFour(evens);
const sum = sumArray(multiple);
console.log(sum);

// ✅ Good Code ✨
// 함수를 사용하지 않고 arr API 를 사용해서 filter, map, reduce 를 사용해서 각각의 수식을 처리 할 수 있음

// filter 는 조건의 값을 가져와서 새로운 값을 return 함
const evens = items.filter((num) => num % 2 === 0);

// map 은 기존 arr 에 하나씩 탐색하고 모든 조건에 맞게 한다음에 모두 return 하게 됨
const multiple = evens.map((num) => num * 4);

// reduce 는 하나의 값을 return 하게 되는 데 누적 합계, 곱하기 이든 a 를 고정 시키고 b 를 대입하는 방식임 (마지막에 0 쓰는거 잊지 말기)
const sum = multiple.reduce((a, b) => a + b, 0);
console.log(sum);

// ✅ Good Code ✨
// 만약 연속적인 일을 처리한다면 chaining 을 통해서 일을 처리 할 수 있게 됨
const result = items
  .filter((num) => num % 2 === 0) // 짝수 인것들만 filtering 한 다음에
  .map((num) => num * 4) // 그값들을 4로 곱해서  mapping 해준 다음에
  .reduce((a, b) => a + b, 0); // 그 값들의 총 합을 구하면 됩니다
console.log(result);

8.Async-Await

// Promise -> Async/await

// ❌ Bad Code 💩
// Promise 를 계속 중첩해서 사용하는 경우에는 then then then 을 계속사용해서 코드가 복잡해 질 수 있음
function displayUser() {
  fetchUser() //
    .then((user) => {
      fetchProfile(user) //
        .then((profile) => {
          updateUI(user, profile);
        });
    });
}

// ✅ Good Code ✨
// 순차적으로 진행하기 때문에 더 가독성이 좋게 async 와 await 을 사용해서 2가지 연속되는 Promise 를 사용하는 경우라면 async 와 await 을 이용해서 변경하면 좋은 코드가 완성 됨
async function displayUser() {
  const user = await fetchUser();
  const profile = await fetchProfile(user);
  updateUI(user, profile);
}

9.Set

  • arr 는 중복을 허용하는 자료 구조 인데 new Set 을 통해서 중복된 값을 제거 할 수 있음
// Remove Duplicates!

const array = ["🐶", "🐱", "🐈", "🐶", "🦮", "🐱"];

// 새로운 배열로 spread syntax 를 사용해서 Set() 에서 중복이 허용된것을 지워서 사용하는 방법
console.log([...new Set(array)]);

🔶 🔷 📌 🔑

Reference

Leave a comment

You may also enjoy