출처 : 유튜브 드림코딩 자바스크립트

Shorthand property names

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

key와 value가 동일할 때는 하나로만 생략이 가능하다. (ellie3)

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

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

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

const ellie3 = {
    name,
    age,
}

console.log(ellie1, ellie2, ellie3)

Destructuring Assignment

object는 {}로, array는 []로 표기.

object)

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

💩 안좋은 예시

const name = student.name;
const level = student.level;
console.log(name, level);

✨ Destructuring Assignment

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

✨ key 를 원하는 이름으로 (선언한 후) 변경하여 출력하고 싶을 때

{
   const {name : studentName, level : studentLevel} = student;
   console.log(studentName, studentLevel);
}
const arrayCopy = [...array];

array)

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

💩 안좋은 예시

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

✨ Destructuring Assignment

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

Spread Syntax (...)

... 의 의미 : array가 가지고 있는 item 하나하나씩을 낱개로 복사해온다.

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

array copy 예시

const arrayCopy = [...array];
console.log(array, arrayCopy); //동일 

const arrayCopy2 = [...array, {key : 'key3'}]; // item 추가 
console.log(array, arrayCopy, arrayCopy2);

만약 obj1.key = 'newKey'로 정보 변경을 한다면 모든 배열 다 정보가 변경된다.
...array(spread Syntax) 는 object 아이템 하나하나 가져오는 것이 아니라, 주소의 참조값만 복사해온 것일뿐 실제로 array와 같은 배열임

object copy 예시

 const obj3 = {...obj1};
 console.log(obj3);
	

array concatenation

   
    const fruits1 = ['🍑', '🍓'];
    const fruits2 = ['🍌', '🥝'];
    const fruits = [...fruits1, ...fruits2];
    console.log(fruits);
    

object merge

    const dog1 = {dog1 : '🐕'};
    const dog2 = {dog2 : '🐶'};
    const dog = {...dog1, ...dog2};
    console.log(dog);

유의) 동일한 key값이 있는 객체를 병합한다면 뒤에 있는 아이가 앞에있는 아이를 덮어씌움!

Default parameters

💩 안좋은 예시

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

✨ Default parameters

    function printMessage(message = 'default message'){
        console.log(message);
    
    printMessage('hello');
    printMessage(); }     

Ternary Operator

💩 안좋은 예시

	const isCat = true;

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

✨ Ternary Operator

     
        const component = isCat? '😽' :'🐶';
        console.log(component);
    

Template Literals

    const weather = '⛅️';
    const temperature = '16';
    
    ```

💩 안좋은 예시

  console.log(
    'Today weather is ' + weather + ' and temperature is ' + temperature + '.'
);

✨ Template Literals

  console.log(
        `Today weather is ${weather} and temperature is ${temperature}.`
    );