ES6 문법

Shorthand property names

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

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

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

  const ellie3 = {
    name,
    age,
  };
}

object는 항상 key와 value로 이루어져있다.
key와 value의 이름이 동일한 경우에는 하나로만 생략해서 작성이 가능하다.

Destructuring Assignment4

{
//object에 접근
  const student = {
    name: 'Anna',
    level: 1,
  };

  {
    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);
  }

//배열에 접근
  const animals = ['🐶', '😽'];

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

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

object안에 정의된 키의 이름을 동일하게 괄호안에 작성하여 선언한다.
배열에서도 동일하게 사용가능하다.

Spread Syntax

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

//배열 복사
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

//배열 복사 후 object 추가
  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object 복사
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation 배열 합치기
  // 하나로 병합가능
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge
  // object도 병합가능
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();
}

object를 담고 있는 배열을 복사하기 위해서 spread syntax를 이용하면 이를 간단하게 할 수 있다. [...array] 를 이용하면 간단하게 배열을 복사 할 수 있다. '...'은 배열 안 item을 각각 낱개로 가져와 복사하는 것이다.

object를 가리키는 변수는 실제로 object를 담고 있는 것이 아니라
object가 들어있는 메모리의 주소의 값을 가지고 있다.

배열, object 둘다 병합가능.
키가 동일한 object를 병할 할 때 뒤에 오는 것이 앞에 것을 덮어 씌운다.

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);
    }

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

함수를 정의할 때 메세지 인자를 받아오는 경우, 함수를 호출할 때 아무런
인자를 전달하지 않으면 undefined가 출력된다.
인자 다음 초기값을 정의하여 인자가 전달될 때는 인자의 값을, 전달되지 않을때는 초기값을 전달하게 된다.

Ternary Operator

{
  const isCat = true;
  
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  {
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');
  }
  console.clear();
}

변수가 true인지 false인지에 따라 다른 component를 정의하고 싶다면, component 변수를 정의하여 할당하는 방식을 사용하는데, ternary operator를 이용하여 간단하게 작성한다.

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}.`);

}

문자열을 조합할때 templat literals를 이용하여 간편하게 작성하여 가독성이 좋고 편리하게 작성한다.

ES11 문법

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);
  }
//ternary operator
  {
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);
  }
// &&연산자 사용
  {
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);
  }
// 이런식으로 optional chaining을 이용하여 간단하게 작성한다.
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);
  }
  console.clear();
}

Nullish Coalesing Operator

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

  {
    const name = null;
    const userName = name || 'Guest';
    console.log(userName);
  }
  
// 사용자가 아무런 이름을 쓰고 싶지않을 경우에도 guest가 할당이 된다.
  {
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);
  }

  {
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined';
    console.log(message);
  }

boolean 변수 false, '', 0, null, undefined 도 false로 간주한다.
OR연산자는 앞에 있는 값이 false일때만 뒤에 값이 실행된다.