프론트엔드 프로젝트를 진행하면서 '이것도 몰랐단 말이야?' 라고 할 정도로 자주 쓰는 문법 중 몰라서 헤맸거나 후배들에게 질문을 자주 받았던 문법을 정리 했습니다. 추가가 필요한 문법이 있다면 언제든지 말씀 부탁드립니다!

1. 객체 선언 간소화

일반적인 자바스크립트의 객체 선언 방식

let name = "jy"
let age = 26

let person = {
    name: name,
    age: age
}

→ 이걸 줄여쓰게 되면...(object shorthand assignment)

let name = "jy"
let age = 26

let person = {
    name,
    age
}

• key와 value의 값이(name으로 같을 경우)에는 이렇게 줄여서 쓸 수 있음

2. destructuring

• 기존에는 객체에 있는 변수를 뽑아내려면

let person = {
    name:"jy",
    age:26 
}

let name = person.name
let age = person.age

• 이걸 줄여서 쓰게 되면...

let person = {
    name:"jy",
    age:26 
}

let {name, age} = person

• 객체를 분해해서 키값을 분해해서 가져오는 것
• name만 뽑아올꺼면 let {name} = person 이렇게 쓰면 됨
• 배열에서도 적용 가능

let array = [1,2,3,4]
let [a,b] = array

• a에는 첫번째 값, b에는 2번째 값이 들어가게 됨
• 이 문법이 리액트에서 정말 많이 쓰임 → state를 사용할 때

let array = [1,2,3,4]
let [a,b,...rest] = array

• rest에는 나머지 값들이 배열로 들어감 → [3,4]

3. spread

• 객체의 깊은 복사

let person = {
    name:"jy",
    age:26 
}

let person2 = {...person}

• person2에는 person이 복사되어 그대로 들어가 있음

let person = {
    name:"jy",
    age:26 
}

let person2 = {...person}
let person3 = person

• 마찬가지로 person3도 console.log를 찍었을 때 person2와 같은 결과가 나옴
• 그러나 person2와 person3의 복사 메커니즘은 다름
• person3의 경우 person의 주소값을 참조를 하게 됨 → 객체 자체는 한 개이고 person과 person3가 같은 주소를 참조하게 됨
• person2의 경우 person을 복사해 새로운 객체를 만듦

console.log(person2 == person)
//false

console.log(person3 == person)
//true

• 기존에 있는 값에 추가도 가능

let person = {
    name:"jy",
    age:20 
}

let person2 = {...person, address:"죽전"}

• 키값 중 하나의 값을 바꿀 수 도 있음

let person = {
    name:"jy",
    age:20 
}

let person2 = {...person, name:"jh"}

• 배열도 똑같이 사용됨

let a = [1,2]
let b = [...a,3]

console.log(b)
// [1,2,3]

4. 삼항 연산자

if(person) {
    console.log(person.name)
} else {
    console.log("사람이 없네")
}

• 이러한 조건문을 삼항연산자로 쓸 수 있음

console.log(person?person.name:"사람이 없음")

5. Null 병합 연산자(Nullish Coalescing Operator)

• 코드 상에서 특정 값이 null이라면 지정한 값을 넣어서 처리해줘야 할 경우가 있음

const a = 10;
const b = a == null? a : 20;

• 위의 예시처럼 b의 값을 결정할 조건을 복잡하게 쓸 필요 없이 Null 병합 연산자를 통해 처리할 수 있음

const b = a ?? 20;

• 물음표 두 개를 사용하면 해당 값이 null이거나 undefined일 경우 ?? 뒤에 값을 리턴한다라는 의미를 가짐
• 자바스크립트에는 falsey value가 있는데 문자가 아무것도 없는 스트링(’’), 숫자 0, undefined, null, false, NaN이 있음 → 그 중에서 ??은 null과 undefined만을 걸러냄

6. 옵셔널 체이닝

• 특정 객체에서 값을 꺼내보자

const person = {
    name:"jy",
    age:26 
};

console.log(person.address.zipCode);

• 먼저 address는 존재하지 않는 프로퍼티로 person.address는 undefined임 → 이 undefined안에 프로퍼티에 대해 추가적인 접근을 하고 있음(person.address.zipCode)
• 위처럼 존재하지 않는 프로퍼티의 프로퍼티에 접근하게 되면 TypeError를 뿜음
• 이 때 옵셔널 체이닝을 사용해 해당 값이 null이거나 undefined일 경우 TypeError없이 undefined를 리턴하도록 처리할 수 있음

console.log(person.address?.zipCode);  //undefined

*REFERENCES

코딩 알려주는 누나_리액트 강의(3. 리액트: 프론트엔드 개발자로 가는 마지막 단계)
https://developer-talk.tistory.com/300
https://seo-tory.tistory.com/38