[Javascript] 구조 분해 할당 Destructuring assignment

 

배열이나 객체 속성을 해체시켜  값을 개별 변수에 담은 것 

 

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

 

객체 구조분해 Object destructuring

const user = {
  id: 42,
  isVerified: true,
};

const { id, isVerified } = user;

console.log(id); // 42
console.log(isVerified); // true

 

객체 구조분해는 음악 플레이 바를 만들 때 사용했다

 

// Update Progress Bar & Time

function updateProgressBar(e){

if(isPlaying) {

const {duration, currentTime} = e.srcElement;

 

// Update progress bar width

const progressPercent = (currentTime / duration ) * 100;

progress.style.width = `${progressPercent}%`;

}

}

음악이 흐르는 과정을 보여줄 때 currentTime 과 duration 을 사용해서 만들었다

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment