티스토리 뷰

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")

출처 : https://www.youtube.com/watch?v=NcI-WJSWdv8

'React' 카테고리의 다른 글

Props / Memo / Prop Types  (0) 2023.05.02
React로 단위 변환기 만들기 💻  (0) 2023.05.01
Vanilla JS 🆚 React JS  (0) 2023.04.24
댓글