티스토리 뷰
1. Object shorthand assignment
let name = "yuni"
let age = "20"
//다음과 같이 객체를 선언할 때
let person = {
name: name,
age: age
}
//key와 value의 이름이 같다면 다음과 같이 줄여서 쓸 수 있다
let person = {
name,
age
}
2. Destructuring
let person = {
name: "yuni",
age: 20
}
//객체 안의 값을 변수에 할당할 때
let name = person.name
let age = person['age']
//다음과 같이 줄여서 표현 가능하다
let {name, age} = person //객체에서 가져오고 싶은 key를 {}안에 넣으면 key 이름의 변수가 만들어져서 key의 value값이 들어간다
//이는 다음과 같이 배열에서도 가능하다
let arr = [1,2,3,4]
let [a,b] = arr //a에는 1, b에는 2가 들어간다
let [a,b,...rest]=arr //1,2를 제외한 나머지를 배열에 넣는다
3. spread
let person = {
name: "yuni"
age: 20
}
//객체를 그대로 복사할 때 spread문법을 사용한다
let person1 = {...person}
//let person1 = person 이 방법은 객체의 주소값만 복사하는 것으로 객체는 하나이고 객체를 참조하는 변수가 두 개가 되는 것이다
//하지만 spread는 실제로 같은 객체가 두 개가 생기는 것
//복사뿐 아니라 내용 추가도 가능하다
let person1 = {...person, address: "seoul"}
//내용 바꾸기도 가능하다
let person1 = {...person, name: "kim"}
//배열에도 똑같이 적용된다
let a = [1,2]
let b = [...a]
4. 삼항연산자
let person = {
name: "yuni",
age: 20
}
if(person){
console.log(person.name)
}else{
console.log("there is no person")
//위의 if else 문은 다음과 같이 삼항연산자로 표현이 가능하다
console.log(person? person.name : "there is no person")
'React' 카테고리의 다른 글
Props / Memo / Prop Types (0) | 2023.05.02 |
---|---|
React로 단위 변환기 만들기 💻 (0) | 2023.05.01 |
Vanilla JS 🆚 React JS (0) | 2023.04.24 |
댓글