JavaScript 공부 [12. 코딩을 간단하게 만드는 문법들]

ES6

Shorthand Property Names

  const minbro1 = {
      name: 'Minbro',
      age: '25'
  }

  const name = 'Minbro'
  const age = '25'
  // 일일이 이렇게 쓸 필요 없이
  const minbro2 = {
      name: name,
      age: age
  }
  // 간단하게 이렇게 쓸 수 있다!
  const minbro3 = {
      name,
      age
  }

Destructuring Assignment

Object

  const student = {
    name: "James",
    level: 3,
  };

  // 일일이 이렇게 쓸 필요 없이
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  }

  {
    // 간단하게 이렇게 쓸 수 있다!
    const { name, level } = student;
    console.log(name, level);
    
    // 이름을 다르게 선언하려면 이런식으로!
    const { name: studentName, level: studentLevel } = student
    console.log(studentName, studentLevel)
  }

Array

  const animals = ["🐷", "🐵"];

  {
    // 일일이 이렇게 쓸 필요 없이
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  }

  {
    // 간단하게 이렇게 쓸 수 있다!
    const [first, second] = animals;
    console.log(first, second);
  }

Spread Syntax (...)

  const obj1 = { key: "key1" };
  const obj2 = { key: "key2" };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];

  // array copy & add
  const arrayCopy2 = [...array, { key: "key3" }];

단, Spread Syntax를 사용하면 배열의 값 자체를 복사하는것이 아니라, 참조하고 있는 주소값을 복사한다! 따라서 ... 구문을 사용해 복사한 후 어떠한 값을 바꾸면, 복사했던 모든 배열의 값이 변경된다!

  // object copy
  const obj3 = {...obj1}
  
  // array concatenation
  const fruit1 = ['🍎', '🍌']
  const fruit2 = ['🍓', '🍒']
  const fruits = [...fruit1, fruit2]
  console.log(fruits)			// ["🍎", "🍌", "🍓", "🍒"]
  
  // object concatenation
  const cat1 = {cat1: '🐱'}
  const cat2 = {cat2: '🐈'}
  const cats = {...cat1, ...cat2}
  console.log(cats)			// {cat1: "🐱", cat2: "🐈"}
  // 단, key 이름이 같은 경우에는 제일 마지막의 object key의 값으로 덮어씌어진다!

Default Parameters

{
    function printMessage(message) {
        if (message == null) {
            message = 'default message'
        }
        console.log(message)
    }

    printMessage('hi')		// hi
    printMessage()		// default message
}

// Dafault parameter를 사용하여 parameter가 없을 경우 default를 설정할 수 있다!
// 한마디로 parameter가 undefined인 경우!
// null인 경우에는 parameter로 인식한다!
{
    function printMessage(message = 'default message') {
        console.log(message)
    }

    printMessage('hi')		// hi
    printMessage()		// default message
}

ES11

Optional Chaining

  const person1 = {
      name: 'minbro',
      job: {
          title: 'S/W Engineer',
          manager: {
              name: 'James'
          }
      }
  }
  const person2 = {
      name: 'Kate'
  }
  
  // 이렇게 함수를 만들면, person2에는 job이라는 object가 없어서 에러가 발생한다!
  function printManager(person) {
      console.log(person.job.manager.name)
  }
  printManager(person1)
  printManager(person2)
  // James
  // Uncaught TypeError: Cannot read property 'manager' of undefined

이 문제를 ? operator나 && 를 사용해서 함수를 만들 수도 있지만, Optional chaining을 사용하면 한결 수월하다!

  function printManager(person) {
      console.log(person.job?.manager?.name)
  }
  printManager(person1)
  printManager(person2)
  // James
  // undefined

Nullish Coalescing Operator

  // Logical OR operator
  // false: false, '', 0, null, undefined
  {
      const name = 'minbro'
      const userName = name || 'Guest'
      console.log(userName)		// minbro
  }
    
  {
      const name = null
      const userName = name || 'Guest'
      console.log(userName)		// Guest
  }

하지만 ''과 0 등도 false 취급을 받기 때문에, 사용자가 공백이나 숫자 0을 입력해도 false로 판단되는 버그가 발생할 수 있다!

  {
      const name = ''
      const userName = name || 'Guest'
      console.log(userName)		// Guest
      
      const num = 0
      const message = message || 'undefined'
      console.log(message)		// undefined
  }

이를 해결하는것이 바로 Nullish Coalescing Operator!

  {
      const name = ''
      const userName = name ?? 'Guest'
      console.log(userName)		// 
      // name이 있다면 name을 쓰고, name에 아무런 값이 없다면 'Guest'를 써라!
      
      const num = 0
      const message = message ?? 'undefined'
      console.log(message)		// 0
      // num이 있다면 num을 쓰고, num에 아무런 값이 없다면 'undefined'를 써라!
  }