[엘리의 드림코딩 JS] 자바스크립트 프로처럼 쓰는 팁✨

https://youtu.be/BUAhpB3FmS4

1) Ternary Operator (삼항 연산자)

/** Ternary Operator */
{
  // 💩Bad code
  {
    function getResult(score) {
      let result;
      if (score > 5) {
        result = "👍";
      } else {
        result = "👎";
      }
      return result;
    }
    console.log(getResult(6));
  }

  // ✨
  {
    function getResult(score) {
      return score > 5 ? "👍" : "👎";
    }
    console.log(getResult(6));
  }
}

 

2) Nullish coalescing operator ( + OR 논리 연산자와의 차이)

/** Nullish coalescing operator */
{
  // 💩Bad code
  {
    function printMessage(text) {
      let message = text;
      if (text == null || text == undefined) {
        message = "Nothing to display😥";
      }
      console.log(message);
    }
  }

  // ✨
  {
    function printMessage(text) {
      let message = text ?? "Nothing to display😥";
      console.log(message);
    }
    printMessage(null); // Nothing to display😥
    printMessage(undefined); // Nothing to display😥
    printMessage("love you."); // 'love you.'
  }

  // ? 이거 Default parameters 값을 주면 안돼? =>❌
  // 🚨Default parameter only for undefined.
  {
    function printMessage(text = "Nothing to display😥") {
      console.log(text);
    }
    printMessage(null); // null => default parameter은 undefined일 때만 작동하고, 개발자가 임의로 설정한 null이나 변수에 값 있을 경우 작동❌
    printMessage(undefined); // Nothing to display😥
    printMessage("love you."); // 'love you.'
  }

  // Nullish coalescing operator VS Logical OR operator(||)
  // Nullish coalescing operator은 A ?? B => A가 null 또는 undefined일 때만 B 실행
  // Logical OR Operator은 A || B => A가 falsy(null, undefined, false, 0, -0, NaN, ''("", ``))일 때 B 실행

  // Logical OR operator 적용하면
  {
    function printMessage(text) {
      const message = text || "Nothing to display😥";
      console.log(message);
    }
    printMessage(null);
    printMessage(undefined);
    printMessage("");
    printMessage(false);
    printMessage(0);
    printMessage(NaN);
  }

  // Logical OR Operator의 A || B => A와 B는 Expression(표현식이다)
  // 표현식이란 단일.특정 결과값으로 계산된다.
  // 그래서 A와 B에는 값 뿐 아니라 이런 함수 호출도 들어갈 수 있다. (함수 호출하면 단일한 특정 결과 값 return하므로 표현식이라 하는 듯. 아마...?🤔)
  {
    const result = getInitialState() ?? fetchFromServer();
    console.log(result);

    function getInitialState() {
      return null;
    }

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

 

3) Object Destructuring

/** Object Destructuring */
const person = {
  name: "Julia",
  age: 20,
  phone: "01077777777",
};

// 💩Bad code
{
  function displayPerson(person) {
    displayAvatar(person.name);
    displayName(person.name);
    displayProfile(person.name, person.age);
  }
  console.log(person);
}

// ✨
{
  function displayPerson(person) {
    const { name, age } = person;
    displayAvatar(name);
    displayName(name);
    displayProfile(name, age);
  }
  console.log(person);
}

 

4) Spread Syntax

/** spread syntax */
{
  const item = { type: "👔", size: "M" };
  const detail = { price: 20, made: "Korea", gender: "M" };
  {
    // 💩Bad code
    const newObject = new Object();
    newObject["type"] = item.type;
    newObject["size"] = item.size;
    newObject["price"] = detail.price;
    newObject["made"] = detail.made;
    newObject["gender"] = detail.gender;

    // 💩Bad code
    const newObject2 = {
      type: item.type,
      size: item.size,
      price: detail.price,
      made: detail.made,
      gender: detail.gender,
    };

    // 💩Bad code
    console.log(newObject);
    console.log(newObject2);
  }
  console.clear();
  {
    // ✨(ES5 이하 버전에서도 사용 가능!)
    const shirt = Object.assign(item, detail);
    console.log(shirt);

    // ✨(Spread Syntax. 최신 문법)
    const product = { ...item, ...detail, price: 40 }; // key값 원하는대로 update해서 덮어씌우기 가능.
    console.log(product);

    // Spread Syntax (Array update)
    let fruits = ["🍓", "🥭", "🍉"];

    // fruits.push("🍮")
    fruits = [...fruits, "🍮"];

    // fruits.unshift("🍮")
    fruits = ["🍮", ...fruits];
    console.clear();

    // Array concatenation
    const fruits2 = ["🥥", "🥝", "🍇"];
    let combined = fruits.concat(fruits2);
    console.log(combined);

    combined = [...fruits, "🍌", ...fruits2];
  }
}

 

5) Optional Chaining

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

  console.clear();

  // 💩Bad code
  {
    function displayJobTitle(person) {
      if (person.job && person.job.title) {
        console.log(person.job.title);
      }
    }

    displayJobTitle(bob);
    displayJobTitle(anna);
  }

  // ✨Good Code
  {
    function displayJobTitle(person) {
      const title = person?.job?.title ?? "No Job Yet😥";
      console.log(title);
    }

    displayJobTitle(bob);
    displayJobTitle(anna);
  }
}

 

6) Template Literals (Template String)

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

  // 💩Bad Code
  console.log(
    "Hello " + person.name + ", Your current score is: " + person.score
  );

  // ✨Good Code
  console.log(`Hello ${person.name}, Your current score is: ${person.score}`);

  // ✨Good Code (++ object Destructuring, making as function)
  function greetings(person) {
    const { name, score } = person;
    console.log(`Hello ${name}, Your current score is: ${score}`);
  }
  greetings(person);
}

 

7) Loop

/** Loop */
{
  //  짝수인 경우 *4 한 후 총 합을 구함.
  const items = [1, 2, 3, 4, 5, 6];

  // 내가 짠 로직: map => reduce => ✨Good Code
  const result = items
    .map((item) => (item % 2 === 0 ? item * 4 : item))
    .reduce((acc, curr) => acc + curr, 0);

  console.log(result);
}

 

8) Promise -> Async/Await

/** Promise -> Async/await */
{
  // 💩Bad Code
  {
    function displayUser() {
      fetchUser().then((user) => {
        fetchProfile(user)
          .then((profile) => {})
          .then("...");
      });
    }
  }

  // ✨Good Code
  async function displayUser() {
    const user = await fetchUser();
    const userProfile = await fetchProfile(user);
    return userProfile;
  }
}

 

9) 마지막 Quiz (30분정도 삽질했던....😥)

/** Quiz - Remove Duplicates! */
{
  const array = ["🐶", "😺", "🐕", "🐶", "🦮", "😺"];
  /** 내 답 */
  function deleteDuplicate(array) {
    let animals = {};

    // 배열에 falsy값이나 빈 배열 들어올 경우 에러 처리.
    if (!array || array.length < 1) {
      console.log("배열을 다시 확인해주세요.");
      return;
    }
    // key가 존재하면 덮어 씌우도록 (spread syntax - Object merge 이용)
    array.forEach((item) => {
      animals[item] = 1;
    });

    // key만으로 구성된 새로운 배열 반환
    return Object.keys(animals);
  }

  const result = deleteDuplicate(array);
  console.log(result);

  /** Ellie님 답 : 1줄이면 됨. */
  console.log([...new Set(array)]);
}

역시 자료구조를 잘 알고 있는 것이 중요하다..! JavaScript에서 set을 쓸 수 있다는 사실을 몰라서 이 고생을 했지 않은가😥