[JS] 유용한 JS 문법 시리즈(1)

개요

JS 로 개발을 하면서 유용하면서도, 코드의 의도가 같음에도 간결하고 명료한 코드를 작성하기 위한 몇 가지 유용한 JS 문법을 알아본다.

본론

📍 Ternery Operator

• 삼항연산자라고도 한다.

{
  /**
   * 삼항 연산자(Ternary Operator)
   * - 형식
   * 조건식 ? 조건식이 참일경우 : 조건식이 거짓일 경우
   */

  // Bad 💩
  function getResult(score) {
    let result;
    if (score > 5) {
      result = "good";
    } else {
      result = "bad";
    }
    return result;
  }

  // Good 👍
  function getResult(score) {
    return score > 5 ? "good" : "bad";
  }
}

📍 Nullish Coalescing Operator

{
  /**
   * Nullish Coalescing Operator
   * [형식]
   * leftExpr ?? rightExpr
   *
   * - leftExpr(왼쪽 "표현식") 이 [null,undefined] 이면 => rightExpr(오른쪽 "표현식") 이 실행, 아니면 왼쪽 표현식 사용	💡
   */

  // Bad 💩
  function printMessage1(text) {
    let message = text;
    if (text == null || text == undefined) {
      message = "Nothing";
    }
    console.log(message);
  }
  printMessage1("hello"); // hello
  printMessage1(undefined); // Nothing
  printMessage1(null); // Nothing
  console.clear();

  // Good 👍
  function printMessage2(text) {
    let message = text ?? "Nothing";
    console.log(message);
  }
  printMessage2("hello"); // hello
  printMessage2(undefined); // Nothing
  printMessage2(null); // Nothing
  console.clear();

  /**
   * Nullish Coalescing Operator 과 Default Parameter 차이점 🔍
   * - Nullish Coalescing Operator 는 undefined, null 모두 해당된다.
   * - Default Parameter 는 undefined 만 해당된다. 💡
   */

  function printMessage3(text = "Nothing") {
    console.log(text);
  }

  printMessage3("hello"); // hello
  printMessage3(undefined); // Nothing
  printMessage3(null); // null 🔍
  console.clear();

  /**
   * Logical OR Operator
   * [형식]
   * eftExpr || rightExpr
   *
   * - leftExpr(왼쪽 "표현식") 이 false 이면 => rightExpr(오른쪽 "표현식") 이 실행	💡
   * - 여기서 false 에 해당하는 것	🔍
   *   + null
   *   + undefined
   *   + 0, -0
   *   + '', "", ``
   *   + false
   *   + NaN
   */
  function printMessage4(text) {
    let message = text || "Nothing";
    console.log(message);
  }
  printMessage4("hello"); // hello
  printMessage4(undefined); // Nothing
  printMessage4(null); // Nothing
  printMessage4(0); // Nothing 🔍
  printMessage4(""); // Nothing 🔍
  printMessage4(false); // Nothing 🔍
  console.clear();

  /**
   * leftExpr 나 rightExpr 에서 "Expression"
   * - 값을 직접 할당하지 않아도, 함수 같은 코드를 실행한 결과를 받아내기도 한다.
   */
  function getNullValue() {
    return null;
  }
  function getNullishAndNothing() {
    return "Nothing";
  }
  const result = getNullValue() ?? getNullishAndNothing();
  console.log(result); // Nothing
}

📍 Object Destructuring

• 구조 분해 할당이라고도 한다.

참고문서

{
  /**
   * Object Destructuring (구조 분해 할당)
   * - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
   * - 객체를 Object Destructuring 할 때에는, 분해해서 받는 변수의 이름을, 객체에 키 이름과 같게해야한다.
   * - 이름을 커스터마이징 할 수도 있다.
   */

  function displayName(name) {
    console.log(name);
  }
  function displayAge(age) {
    console.log(age);
  }
  function displayPhoneNumber(phoneNumber) {
    console.log(phoneNumber);
  }

  // Bad 1 💩
  const person = {
    name: "min",
    age: 100,
    phone: "010-1234-5678",
  };

  function displayPerson1(person) {
    displayName(person.name);
    displayAge(person.age);
    displayPhoneNumber(person.phone);
  }
  displayPerson1(person);
  // min
  // 100
  // 010-1234-5678

  // Bad 2 💩
  function displayPerson2(person) {
    const name = person.name;
    const age = person.age;
    const phoneNumber = person.phone;
    displayName(name);
    displayAge(age);
    displayPhoneNumber(phoneNumber);
  }
  displayPerson2(person);
  // min
  // 100
  // 010-1234-5678

  // Good 👍
  function displayPerson3(person) {
    const { name, age, phone } = person;
    displayName(name);
    displayAge(age);
    displayPhoneNumber(phone);
  }
  displayPerson3(person);
  // min
  // 100
  // 010-1234-5678
}

📍 Spread Syntax

참고문서

{
  /**
   * Spread Syntax
   * - 기존에 데이터가 담겨있는 "배열"이나 "객체"에 변경을
   * - 기존에 배열이나 객체가 아닌, "새로운" 배열이나 객체에 적용하고 싶을 때는 복사본을 만들어야 한다. 🔍
   * - 이를 간단하게 할 수 있는 방법이 Spread Syntax
   *
   * 유의할 점
   * - spread 하는 요소의 값은, 가장 마지막에 등장한 요소의 값을 기준으로 설정됨 🔍
   */
  const item = { type: "one", size: 1 };
  const detail = { price: 100, made: "Korea", gender: "M" };

  // Bad1 💩
  const newObj = new Object();
  newObj["type"] = item.type;
  newObj["size"] = item.size;
  newObj["price"] = detail.price;
  newObj["made"] = detail.made;
  newObj["gender"] = detail.gender;
  console.log(newObj); // { type: 'one', size: 1, price: 100, made: 'Korea', gender: 'M' }

  // Bad2 💩
  const newObj2 = {
    type: item.type,
    size: item.size,
    price: detail.price,
    made: detail.made,
    gender: detail.gender,
  };
  console.log(newObj2); // { type: 'one', size: 1, price: 100, made: 'Korea', gender: 'M' }

  // Good 👍
  const newObj3 = Object.assign(item, detail);
  console.log(newObj3); // { type: 'one', size: 1, price: 100, made: 'Korea', gender: 'M' }

  // Best 👍
  const newObj4 = { ...item, ...detail };
  console.log(newObj4); // { type: 'one', size: 1, price: 100, made: 'Korea', gender: 'M' }
  console.clear();

  /**
   * 배열도 가능
   */
  let myArray = [1, 2, 3];

  /**
   * 배열에 요소추가
   */
  // myArray.push(4)
  myArray = [...myArray, 4];

  /**
   * 기존 여러 배열을 하나로 합친 새로운 배열
   */
  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];

  // let newArray = arr1.concat(arr2)
  let newArray = [...arr1, ...arr2];
  console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]
}

📍 Optional Chaining

참고문서

{
  /**
   * Optional Chaining
   */
  
  const min = {
    name: "min",
    age: 100,
  };
  const young = {
    name: "young",
    age: 200,
    job: {
      title: "Front-End Engineer",
    },
  };

  // 직업이 있고, 직업의 이름이 있다면 출력하는 상황
  // Bad 💩
  function displayJobTitle1(person) {
    if (person.job && person.job.title) {
      console.log(person.job.title);
    }
  }

  // Good 👍
  // job 이 있으면 title이 있는지보고, 애초에 job 이없으면 false
  function displayJobTitle2(person) {
    if (person.job?.title) {
      console.log(person.job.title);
    } else {
      console.log("No Job Yet ㅠㅠ");
    }
  }
  displayJobTitle2(min); // No Job Yet ㅠㅠ
  displayJobTitle2(young); // Front-End Engineer

  // Optional Chaining & Nullish Coalescing
  function displayJobTitle3(person) {
    const title = person.job?.title ?? "No Job Yet ㅠㅠ";
    console.log(title);
  }
  displayJobTitle3(min); // No Job Yet ㅠㅠ
  displayJobTitle3(young); // Front-End Engineer
}

📍 Template-Literal

• 백틱(``) 을 사용한다.
• 하나의 문자열안에 변수를 포함할 작업에 탁월하다.

{
  /**
   * Template-literals
   */
  const person = {
    name: "min",
    age: 100,
  };

  // 인사하는 코드상황
  // Bad 💩
  console.log("Hello My Name is", person.name, "I`m", person.age, "years old. haha~");

  // Good 👍
  console.log(`Hello My Name is ${person.name}, I'm ${person.age} years old. haha~`);

  // Best 👍 (자주 쓸 것 같은 것 함수로 모듈화 해놓기)
  function greeting(person) {
    const { name, age } = person;
    console.log(`Hello My Name is ${name}, I'm ${age} years old. haha~`);
  }
  greeting(person);
}

📍 Promise - Async/await

• 비동기처리를 하는 방법 중에 하나이다.
• 관련된 내용은 구체적으로 알아볼 필요가 있으므로 추후 포스팅

{
  /**
   * Promise -> Async/await
   * - 깊게 파보면 알아야 할 것이 좀 있는 Async/await 이나
   * - 핵심만 보자면, 2가지 이상의 연속된 Promise 를 사용해야하는 경우라면 🔍
   * - then 의 연속인 "콜백지옥" 대신, Async/await 를 생각해볼 것
   */

  // Bad 💩
  function displayUser() {
    fetchUser().then((user) => {
      fetchProfile(user).then((profile) => {
        updateUI(user, profile);
      });
    });
  }

  // Good 👍
  async function displayUser2() {
    const user = await fetchUser();
    const profile = await fetchProfile();
    updateUI(user, profile);
  }
}

결론

JS는 업그레이드 속도가 다른 언어들보다 비교적 활발하기 때문에, 이후 발표되는 효율적인 문법이 또 생긴다면, 포스팅할 것

참고

• Dream Coding Youtube