ES6

모르면 손해!! 더욱 간편해진 최신 문법을 공부해뷰쟈!

Destructing assignment

'구조분해 할당' 이라고 불린다. 배열이나 object내 값들을 정해진 변수에 할당하여 편하게 호출 가능하다!

const student = {
    name: "gyng",
    age: 20,
};

{
    const name = student.name;
    const age = student.age;
}

• 기존에는 이렇게 하나하나 변수에 나눠서 할당해 줘야하지만
• destructing assignment를 활용한다면!?

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

• name과 age말고 다른 이름을 입력할 수도 있다!

{
    const { name: studentName, age: studentAge } = student;
    console.log(studentName, studentAge);
}

Object 뿐만 아니라 배열도 가능!

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

배열에는 [ ], Object는 { } 기억!

spread syntax

배열, Object 값을 손쉽게 복사,추가,병합 할 수 있다!

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


    const arrayCopy = [...array];
    console.log(arrayCopy);

    //복사 + 새로운 값 추가 하고싶다면!?
    const arrayCopy2 = [...array, 4];
    // 주소값을 복사해온 것이기 때문에, obj1의 값을 만약 변경한다면 복사한 배열의 값도 다 변경된다
    console.log(arrayCopy2);
}
{
    //spread 문법 통해 배열,객체 합치기도 가능
    const dogs = ["진돗개", "풍산개"];
    const cats = ["페르시안,스핑크스"];
    const animals = [...dogs, ...cats];
    console.log(animals);
    // 키값이 중복되면 더 나중에 선언한 값으로 덮어씌워지는 것 유의
    const fruit = { key1: "apple" };
    const fruit2 = { key1: "banana" };
    const fruits = { ...fruit, ...fruit2 };
    console.log(fruits);
}

• 이 때, 복사된 값은 값을 하나하나 복사하는게아니다.
• 각 배열,object가 할당된 주소값을 복사하는 것이다!!
• 때문에 당연히 원래 object나 배열의 값이 변경된다면, 복사된 배열이나 object값도 바뀌게 된다!! 이점 유의하자!!

ES11

optional chaining

객체 내 요소를 호출할 때, 번거롭게 연산자를 사용하여 예외처리를 해주는 것을 더욱 손쉽게 해주는 문법!

  const person1 = {
        name: "gyong",
        job: {
            title: "s/w engineer",
            manager: {
                name: "bob",
            },
        },
    };

    const person2 = {
        name: "json",
    };

    // 코드가 너무 중복되는 방식

    function managerName(person) {
        console.log(
            person.job && person.job.manager && person.job.manager.name
        );
    }

• 위의 방식은 딱 봐도 동일한 코드가 계속해서 반복되어 지저분해보인다.
• person1은 정상적으로 'bob'이 출력
• person2는 선언된 값이 없어 에러가 발생한다.
• 요럴때 사용할 수 있는 문법이 optional chaining

  // optional chaining

    function managerName(person) {
        console.log(person.job?.manager?.name);
    }

    managerName(person1);
    managerName(person2);

• 코드가 훨씬 간결해졌다!😗

nullish coalescing operator

or(||) 연산자의 모지란(?) 부분을 해결해 줄 수 있는 연산자(??)

    //or 연산자는 앞에 것이 false여야 뒤에것이 실행된다.
    const name = "gyong";
    const userName = name || "Guest";

    // 여기서 문제점 발생!

    const num = 0;
    const number = num || "numbering";
    console.log(number); // 0을 대입하고 싶으나, 숫자ㅏ 0은 false로 처리되기때문에 numbering이 출력된다.

• false : 0,' ',false,undefined
• 나는 숫자 0을 출력하고 싶어! 하지만 or연산자를 사용하면 0도 false이기 때문에 or연산자(||) 뒤에 있는 numbering을 출력해버린다.
• 이럴때 사용할 수 있는 연산자가 ?? 연산자

'??' 연산자는 왼쪽의 피연산자가 null, undefined 일때 오른 쪽을 return한다!

    const num = 0;
    const number = num ?? "numbering";
    console.log(number);

• ?? 연산자를 사용하면 왼쪽의 피연산자(num)의 값이 null,undefined가 아니기 때문에 0을 정상적으로 출력해준다!!!