[React] 자주 사용하는 자바스크립트 문법

자주 사용하는 자바스크립트 문법

1. object shorthand assignment

let name = "one"
let age = 10

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

console.log(person)  // { name: "one", age: 10}

// 📍 키와 키값에 들어가는 변수의 이름이 같다면 줄여서 작성 가능

let person = {
	name,
  	age,
}

console.log(person)  // { name: "one", age: 10}

2. Destructuring

📍 객체
let person = {
	name: "two",
  	age: 20
}

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

let {name, age} = person;

console.log(name, age)  // two 20

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

console.log(a,b)  // 1 2

let [a, b, ...rest] = array
console.log(rest)  // [3, 4]

3. spread

let person = {name: "three", age: 30}

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

console.log(person2)  // { name: "three", age: 30}
console.log(person3)  // { name: "three", age: 30}

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

💡 person2와 person3의 차이점

• person2는 객체가 두개
• person3는 객체의 주소값만 복사
  (객체는 하나이고 그 객체를 참조하는 변수가 두개)

📍 복사 + 내용 변경 또는 추가
let person = {name: "three", age: 30}

let person2 = {...person, adress: "seoul"}
let person3 = {...person, name: "four"}

console.log(person2)  // { name: "three", age: 30, adress: "seoul"}
console.log(person3)  // { name: "four", age: 30

📍 배열

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

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

let c = [...a, ...b]

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

4. 삼항연산자

let person = {name: "four", age: 40}

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

→
person?person.name:"no person"

console.log(person?person.name:"no person")  // four

✨ 끝!