구조 분해 할당

·2024년 6월 10일

자바스크립트

목록 보기
6/21

메모

in 문제점 : 없는 거라도 있다고 나오고 한 번에 하나만 조회할 수 있다.
객체의 키/배열만 모아서 배열을 반환하는 메서드 Object.keys / Object.values
정적 메서드 - 그냥 쓸 수 있음
오브젝트 메서드 - call 써야됨
remove 는 남겨두는 거 delete 는 메모리까지 날리는 거

// 계산된 프로퍼티 (computed property) 
// 키 값에 대괄호가 들어가는 형태 / 변수에 따라서 키 값을 지정한다.
let calculateProperty = "phone"; 

function createUser(name,age,phone){
  return {
    name:name,
    age:age,
    [calculateProperty]:phone
  }
}

구조 분해 할당


배열 구조 분해 할당

  • 순서 바꿀 수 없다.
  • 변수명은 내 마음대로 지을 수 있다.
  • 값을 추가해줄 수 있다. 나머지 파라미터 (... rest)로 접근할 수 있다!
const arr = [10, 100, 1000, 10_000];

// const a0 = arr[0];
// const a1 = arr[1]; // 만약 100이 엄청 많이 쓰이면 이렇게 나눠서 변수로 주고 쓴다.

const [a0, a1, a2, a3] = arr;
const [a0, ...rest]= arr;
  • 중간에 안 받고 싶은 건 _ 로 비워두면 된다.
  • ...rest 나머지 파라미터 쓸 수 있다.

Object.entries() : [ [키, 값], [키, 값] ]
for(let keyValue of Object.entries()) : [키, 값]
for(let keyValue of Object.entries()){ let key = keyValue[0]; let value = keyValue[1]; } : 키, 값

=>

for(let [key, value] of Object.entries()){}
🤔


일단 한번 나눠볼까 생각하기


객체 구조 분해 할당

  • 순서 상관없다.
  • 키랑 구조분해하는 변수명이랑 같아야 한다. -> 리네임해주면 된다. const {원래이름: 바꾸고싶은 이름} = {};
  • 값을 추가해줄 수도 있다. const {새거 = 새값} = {} (객체 안에 아예 추가되는 건 아님!)
function createUserObject(obj){

  const {name:n,age:a,gender:g,job:j = '홈프로텍터'} = obj;
  
  // 선언문이랑 위에 문장 
  // function createUserObject({name:n,age:a,gender:g,job:j = '홈프로텍터'}={}) 로 줄일 수 있다. 받을 때부터 구조분해할당하기.

  return {
    name:n,
    age:a,
    gender:g,
    job:j
  }
}


const data = {
  name:'beom',
  age:40,
  gender:'male',
  job:'developer'
}

const person = createUserObject( data );
profile
'한 번 더!'의 가능성을 믿어! 오늘도 열심히 굴러가 보는 프론트엔드 개발자 😎

0개의 댓글