[JS] ES6&ES11 최신문법정리

/**
 * Shorthand property names
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer
 *
 */

{
  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };

  const name = 'Ellie';
  const age = '18';

  // 💩
  const ellie2 = {
    name: name,
    age: age,
  };

  // ✨
  const ellie3 = {
    name,
    age, //value 와 key 가 같을 경우 생략이 가능하다. 
  };

  console.log(ellie1, ellie2, ellie3);
  console.clear();
}

/**
 * Destructuring Assignment (비구조화 할당)
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 *
 */
{
  // object
  const student = {
    name: 'Anna',
    level: 1,
  };

  // 💩
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  }

  // ✨
  {
    const { name, level } = student; //object 의 key 값을 다음과 같이 표현 할 수 있다. 
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student; //override도 가능
    console.log(studentName, studentLevel);
  }

  // array
  const animals = ['🐶', '😽'];

  // 💩
  {
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  }

  // ✨
  {
    const [first, second] = animals; // array의 비구조화 할당은 []안 요소의 순서에 따라 이뤄진다. 
    console.log(first, second);
  }
  console.clear();
}

/**
 * Spread Syntax (스프레드 연산자) 
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 *
 */
{
  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array]; // 배열내의 obj만 새로운 배열인 arrayCopy 에 새로 담는다. 
  console.log(array, arrayCopy); // 두개의 결괏값은 같다. 

  const arrayCopy2 = [...array, { key: 'key3' }]; //요소를 추가하는 것도 가능하다. 
  obj1.key = 'newKey'; //이 때의 array와 arrayCopy2는 obj1의 값을 가지는것이 아닌 "주솟값" 을 복사하기 때문에 원본의 값이 바뀌면 그 값을 담은 Copy도 모두 바뀐다. 
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };// obj의 copy 도 가능하다. 
  console.log(obj3);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];// 다음과 같이 두개 배열의 요소를 합칠수도 있다. 
  console.log(fruits);

  // object merge
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };// obj의 요소를 합치는 것도 가능하다. 
  console.log(dog);
  console.clear();
}

/**
 * Default parameters
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
 */
{
  // 💩
  {
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }

  // ✨
  {
    function printMessage(message = 'default message') {
      console.log(message);
    } //위의 식과 로직은 같지만 훨씬 간단하다. message라는 params로 받는 인자가 없으면 default 값이 출력된다. 

    printMessage('hello');
    printMessage();
  }
  console.clear();
}

/**
 * Ternary Operator
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 */
{
  const isCat = true;
  // 💩
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  // ✨
  {
    const component = isCat ? '😸' : '🐶';
    console.log(component); //isCat이 true면 '😸'를 false면 '🐶'를 출력한다. 
    console.log(isCat ? '😸' : '🐶');// 위와 같은 식이다. 
  }
  console.clear();
}

/**
 * Template Literals
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
 */
{
  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  ); 

  // ✨
  
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);
 // 위와 같이 번거롭게 + 로 연결하는 대신 백틱과 변화하는 값은 ${variable}처리하여 한줄로 식을 작성한다. 
}

/**
 * 관련 강의 영상: https://youtu.be/36HrZHzPeuY
 */
/**
 * Optional Chaining (ES11)
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
 */
{
  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // 💩💩💩💩💩💩
  {
    function printManager(person) {
      console.log(person.job.manager.name);// 이경우 에러가 발생한다. 
    }
    printManager(person1);
    // printManager(person2);
  }

  // 💩💩💩
  {
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined// name 이 없을 때 예외처리 
          : undefined//manager가 없을 때 예외처리 
      );
    } 
    printManager(person1);
    printManager(person2);
  }

  // 💩
  {
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name); 
      // &&연산자로도 사용 가능하다.  
    }
    printManager(person1);
    printManager(person2);
  }

  // ✨
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);// 한 줄로 간단하게 표현할 수도 있다. 
    }
    printManager(person1);
    printManager(person2);
  }
  console.clear();
}

/**
 * Nullish Coalescing Operator (ES11)
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
 */
{
  // Logical OR operator
  // false: false, '', 0, null, undefined
  {
    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);
  }

  {
    const name = null;
    const userName = name || 'Guest';
    console.log(userName);
  }

  // 💩
  {
    const name = '';
    const userName = name || 'Guest'; // '' 값이 출력되지 않는다.(false 이기 때문)
    console.log(userName);

    const num = 0;
    const message = num || 'undefined'; //0 이 출력되지 않는다.(false 이기 때문)
    console.log(message);
  }

  // ✨
  {
    const name = '';
    const userName = name ?? 'Guest'; //'' 이 출력된다. 
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined'; //0이 출력된다. 
    console.log(message);
  }
}

[출처]: 드림코딩 엘리