Destructuring

y0ung·2020년 11월 18일
0

JavaScript

목록 보기
4/20
post-thumbnail

Object

const settings =  {
	notifications:  {
		follow: true,
		alerts:  true,
		unfollow:  false
	},
	color:{
		theme:"dark"
	}
}

문법

const {원하는 객체 key값} = 객체를 가지고 있는 변수명

예제

ex. 객체 자체를 호명하고 싶을때

const { notifications } = settings

console.log(notifications) // notifications객체가 나온다.

ex2. 객체안에 있는 key값을 호명하고 싶을때.

const { notifications : { follow}} = settings

console.log(follow) // ture
  • notifications를 로그에 찍어봐도 값이 안나온다.
  • notifications안에있는 follow를 보여주라는 뜻이다.

만약 값이 없을경우 default값을 줄수 있다.

const  { notifications :  {follow =  false}={}}  = settings;

Array

배열일 경우

const  days  =["Mon", "Tue", "Wed"];

const  [mon, tue, wed, thu =  "Thu"] = days;

console.log(mon, tue, wed, thu); // Mon,Tue, Wed,Thu

함수안에 있는 배열일 경우

const  days  = ()=> ["Mon",  "Tue",  "Wed"];

const  [mon,tue,wed, thu =  "Thu"] = days();

renaming

const settings =  {
  color:  {
    chosen_color:  "dark"
  }
}

예제

  1. key명을 변경하기
const {
  color:{chosen_color: chosenColor = "ligth"}
} = settings2

console.log(chosenColor) // dark 
  1. 같은 변수명이 있을 경우
let chosenColor =  "blue";
console.log(chosenColor); // blue

({ color:  { chosen_color: chosenColor="light"  }}  = settings)
console.log(chosenColor); //dark

function

함수안에서 객체 형식 불러오기(인자로)

function saveSettings({ notifications, color:{theme}}){
	console.log(notifications,theme);
}

saveSettings({
	notifications:{
		follow:  true,
		alert:  true,
		mrk:  true,
	},
	color:{
		theme:"blue"
	}
})

value shorthands

key = value 이름이 같을 경우.

const follow =  checkFollow();
const alert =  checkAlert()

const settingsFn =  {
	notifications:{
		follow, //follow:follow
		alert	//alert:alert
	}
}
  • 정해준 key값과value명이 이름이 같을경우에 이름 하나만 사용한다.
  • 만약 다르게 하고 싶다면 isFoolow : follow 이런식으로 사용 해도 되지만 코드가 지저분하다.

swapping and skipping

정보 바꾸고 싶을경우

let one =  2
let two =  1
 
const ch = [one,two]=[two, one]
// [one,two] = [1,2]

console.log(ch); //[1,2]

마지막 두 개만 부르고 싶을 경우

const number = ["one","two","three","four","five"];

const  [,  ,  , four,five]  = number;

console.log(four,five); //four, five
profile
어제보다는 오늘 더 나은

0개의 댓글