[React] React에서 자주 사용되는 JavaScript 문법 정리

1. Object shorthand assignment

let name="shape";
let age = 20;

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

console.log(person)

key 이름과 value에 변수 이름과 같으면 단축 가능

let person={
    name,
    age
}

2.Destructuring (객체를 분해해서 가져오다)

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

/*
let name = person.name
let age = person['age']
*/

let {name, age} = person

많이 사용되는 방식의 문법이며,
특히 React Hook인 useState와 함께 사용이 많이 된다.
객체뿐만 아니라 배열에서도 사용가능

let array = [1,2,3,4]
let [a,b] = array
console.log(a,b)

3. Spread

let person={
    name:"shape",
    age:12
}

let person2 = {...person} // person2에 person의 값을 복사
let person3 = person // person3에 person 복사

person2와 person3가 다른 점은 person2에는 객체를 복사해서 새로운 값을 가지게 되는 거고,
person3은 객체의 주소값을 복사하는 것

person === person2 // false
person === person2 // true
person2 === person3 // false

4. 삼항연산자

let person ={
  name: "shape",
  age: 17
}

if(person){
  console.log(person.name)
} else {
  console.log("there is no person")
}

person ? person.name : "there is no person";

출처 코딩알려주는 누나