[TDL] 05/21 Today's-Done-List

- JS 최신 문법 (ES6, ES11)과 사용법 정리

ES6

• Destructuring Assignment

/* Destructuring assignment */

const Student = {
  name: 'Anna',
  level: 1,
};

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

// good
{
  const { name, level } = student;
  console.log(name, level);
    
  const { name: studentName, level: studentLevel } = student;
  console.log(studentName, studentLevel);
}


// array
const animals = ['cat', 'dog'];

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

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

• Spread Syntax

/* Spread Syntax 
주소의 참조값만 복사하기 때문에, 원본을 수정한다면 복사했던 변수들의 값들도 같이 수정된다. */

  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];
  console.log(array) // 0: {key: 'key1'} 1: {key: 'key2'}
  
  // array copy
  const arrayCopy = [...array];
  console.log(arrayCopy) // 0: {key: 'key1'} 1: {key: 'key2'}
  
  const arrayCopy2 = [...array, {key: 'key3'}];
  console.log(arrayCopy2) // 0: {key: 'key1'} 1: {key: 'key2'} 2: {key: 'key3'}
  
  
  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3); // { key: 'key1' }
  
  
  // array concatenation
  const fruits1 = ['peach', 'berry'];
  const fruits2 = ['banana', 'kiwi'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits); // ['peach', 'berry', 'banana', 'kiwi']
  
  
  // object merge
  const dog1 = { dog: 'bulldog'};
  const dog2 = { dog: 'poodle'};
  const dog = { ...dog1, ...dog2};
  console.log(dog); // {dog: 'poodle'}

• Default Parameters

/* Default parameters */

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

printMessage('hello'); // hello
printMessage(); // default message

• Ternary Operator

/* Ternary Operator */

{
  const isCat = true;

// bad
  let component;
  if (isCat) {
    component = 'cat';
  } else {
    component = 'dog';
  }

  console.log(component);


  // good
  const component = isCat ? 'cat' : 'dog';
  console.log(component);
  console.log(isCat ? 'cat' : 'dog');
}

{
  const weather = 'sunny';
  const temparature = '16C';
  
  // bad
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature
  );
  
  // good
  console.log(`Today weather is ${weather} and temparature is ${temparature}`);
}

 

ES11

• Optional chaining

/* Optional chaining */

{
  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  
  const person2 = {
    name: 'Bob',
  }

  // bad
  {
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1); // Bob
    printManager(person2); // Uncaught TypeError 
  }
  
  
  // good
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);
      }
      printManager(person1); // Bob
      printManager(person2); // undefined
  }
  
}

• Nullish Coalescing Operator

/* Nullish Coalescing Operator */

{
  // Logical OR operator
  // false: false, '', 0, null, undefined
  
  {
    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName); // Ellie
  }
  
  // bad
  // 유저가 그냥 name에 일부러 입력하지 않았을 경우에도 Guest로 적힘.
  {
    const name = null;
    const userName = name || 'Guest';
    console.log(userName); // Guest
  }
  
  // 유저가 num안에 0을 입력했을 경우에도 false값으로 되어 undefined으로 뜸.
  {
    const num = 0;
    const message = num || 'undefined';
    console.log(message); // undefined
  }
  
  
  // good
  // name이란 변수에 아무런 값이 없다면 Guest를 이용하자.
  {
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName); // 
    
    // num 변수에 값이 없을 경우에만 undefined를 이용하자.
    const num = 0;
    const messgae = num ?? 'undefined';
    console.log(message); // 0
  }
}

https://www.youtube.com/watch?v=36HrZHzPeuY

---

- leetcode array101

 

---

- 주말 셀프 회고

배탈 나서 계속 쉬다가 저녁 먹고 잠깐 알고리즘 몇 문제 풀고,
알고리즘 스터디에서 알고리즘 이외에 추가적으로 학습하기로 한 symbol에 대해 찾아보고 정리하였음.
요새 이런저런 일들 때문에 계획한 것들이 조금씩 뒤로 밀리고 있다...
계획은 세워도 늘 지키지 못해서 아쉽다. 계획을 미루지 말고 당일 계획은 당일에 최대한 끝내는 습관을 가지자.

---

[ 출처, 참고 : https://www.youtube.com/watch?v=36HrZHzPeuY ]