[javascript] 문법 정리

1. Shorthand property names

const name = 'elle';
const age = '18';

const ell1 = {
    name: name,
    age: age
}
const ell2 = {name,age}

ell1을 ell2처럼 축약 가능

콘솔로 찍어보면 {name: 'elle', age: '18'} 잘 나온다

 

2. Destructuring assignment

//객체
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 animals = ['강아지', '고양이'];

	//축약
const [dog, cat] = animals;
console.log(dog, cat);

객체에서는 {}, 배열에서는 []

보다 간단하게 축약해서 사용할 수 있음.

 

3. Spread syntax - 배열 복사하기

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

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

    //배열 추가
const arrayCopy2 = [...array, {key: 'key3'}];
obj1.key = 'newkey'; //전체 obj1에 적용됨
console.log(array, arrayCopy, arrayCopy2)

    //병합
const fruits1 = ['사과', '딸기'];
const fruits12 = ['배', '귤'];
const fruitss = [...fruits1, ...fruits12];
console.log(fruitss)
//['사과', '딸기', '배', '귤']

key값을 바꾸게 될 경우 전체에 적용되니 유의할 것

 

4. Default parameters

1. 기존 방법
function printMessage(message) {
    if (message === null) {
        message = '기본 메세지';
    }
    console.log(message);
}
printMessage('hello');
printMessage();

2. 최신 문법
function printMessage(message = '기본 메세지') {
    console.log(message);
}
printMessage('hello');
printMessage();

 

5. Ternary Operator

6. Template Literals

7. Optional chaining (ES11)

8. Nullish Coalescing Operator (ES11)