Javascript 신기하고 자주쓰는 문법1

Lv.1의 신입개발자가 자바스크립트를 처음 접하면서
신기하고 유용했던 자스 문법기록을 위한 게시물입니다!

null 병합연산자 (Nullish coalescing operator)

왼쪽 연산자가 null 또는 undefined일 때,
오른쪽 연산자를 반환하고 그렇지 않으면 왼쪽 연산자를 반환함

// Nullish coalescing operator

let leftExpr = null;
let rightExpr = 'Hi';

// bad code

let bad;

if (leftExpr === null || leftExpr === undefined) {
	bad = rightExpr;
} else {
	bad = leftExpr;
}

console.log(bad); 

// good code

let good = leftExpr ?? rightExpr;

console.log(good); 

논리 OR 연산자 (logical OR operator)

왼쪽 연산자가 false일 때, 오른쪽 연산자를 반환하고
그렇지 않으면 왼쪽 연산자를 반환함

// logical OR operator

let leftExpr = 0;
let rightExpr = 'Hi';

// bad code

let bad;

if (leftExpr) {
    bad = leftExpr
} else {
    bad = rightExpr
}

console.log(bad);

// good code

let good;

good = leftExpr || rightExpr;

console.log(good);

구조분해할당 (object destructuring)

객체나 배열을 해체한 뒤 해당 값을 변수에 담을 수 있음

// Object Destructuring

const dog = ['mingky', 4];


const person = {
    name: '당황스러운 신입개발자',
    lv: 1,
    job: 'engineer'
};

// 배열구조분해
// 배열 분해 후 순서대로 변수에 할당함
const [dogName, age] = dog;

console.log(dogName); // mingky
console.log(age); // 4


// 구조분해할당
// 객체 키와 동일한 이름으로 선언시, 자동으로 객체의 값이 할당됨!

const {name, job} = person;

console.log(name); // 당황스러운 신입개발자
console.log(job); // engineer

전개 구문 (Spread syntax Object)

두개 이상의 객체를 합친 새로운 객체를 생성함

// Spread Syntax Object

let person = {
    name: '당황스러운 신입개발자',
    lv: 1
}

let dog = {
    dogName: 'mingky',
    age: 4
}

let p = ['당황스러운 신입개발자', 1]

let d = ['mingky', 4]

// Object.assign()

const assignObj = Object.assign(person, dog)

console.log(assignObj); // { name: '당황스러운 신입개발자', lv: 1, dogName: 'mingky', age: 4 }

// spread syntax

const spreadObj = { ...person, ...dog, lv:2 }

const spreadArr = [ ...p, ...d ]

console.log(spreadObj); // { name: '당황스러운 신입개발자', lv: 2, dogName: 'mingky', age: 4 }

console.log(spreadArr); // [ '당황스러운 신입개발자', 1, 'mingky', 4 ]

!주의할점!

let person1 = {
    name: '당',
    job: 'engineer'
}

let person2 = {
    name: '황',
    age: 20
}

const spread = { ...person1, ...person2 }

console.log(spread);
// { name: '황', job: 'engineer', age: 20 }

객체의 중복되는 키값은 최종 객체의 키값으로 덮어쓰기 됨

옵셔널 체이닝 (Optional Chaining)

프로퍼티가 없는 중첩객체에 에러없이 접근할 수 있음

// Optional Chaning

const user1 = {
    id: 'embarrassedev',
    name: '당황스러운 신입개발자',
    state: {
        message: '안녕하세요, 잘부탁드립니다 :)'
    }
}

const user2 = {
    id: 'mingky',
    name: '밍키',
}

console.log(user1.state.message); // 안녕하세요, 잘부탁드립니다 :)

console.log(user2.state.message); // error

// optional chaining

console.log(user2.state?.message); // undefined

!주의할점!

옵셔널 체이닝은 없어도 되는 객체의 프로퍼티를 판별할 때만 사용할것.
남용시 꼭 있어야하는 프로퍼티가 없을때 디버깅이 어려워지기 때문!