[ Javascript ] 알아두면 유용한 문법 - 비구조화 할당(1)

안녕하세요, 코딩입니다.

요즘에 자바스크립트를 공부 중인데요, 공부를 하다보니

알아두면 유용할 개념들이 많더라구요.

그래서 자바스크립트도 포스팅을 하기로 했습니다.

| 비구조화 할당

비구조화 할당은 쉽게 말해서 객체 안의 변수를 꺼내는 것을 의미합니다.

객체 안에 있는 값을 사용할 때, 매번 객체명을 붙이지 않아도 되도록 합니다.

 

const SherlockHolmes   = {
  name: '셜록 홈즈',
  actor: '베네딕트 컴버배치',
  alias: '자문 탐정',
  age: '43'
};

 

우선 위와 같이 객체를 선언합니다. 그 다음엔 함수를 생성합니다.

 

function print1(actor) {
  const text = `${actor.name}(${actor.alias}) 역할을 맡은 배우는 ${actor.actor} 입니다.`
  console.log(text)
}

 

위의 함수는 해당 객체의 값을 출력하는 기능을 합니다.

객체 안에 있는 값들을 사용하기 위해서는 앞에 객체명을 반드시 붙여줘야합니다.

 

저렇게 매번 객체 이름을 앞에 붙여야 하는 게 번거로울 수 있습니다.

이러한 번거로움을 어떻게 해결할 수 있을까요? 

바로 비구조화 할당을 해주는 것입니다. 

 

function print2(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`
  console.log(text)
}

 

const { alias, name, actor } = person; 이 한줄을 써주면 끝입니다. 

이렇게 하면 person 객체 안에 들어있는 변수를 밖으로 꺼낼 수 있습니다.

그래서 위처럼 앞에 객체명을 붙이지 않고도 변수를 사용할 수 있는 것입니다.

 

또한, 함수에 바로 정의해서 사용할 수도 있습니다.

 

function print3({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`
  console.log(text)
}

 

반드시 객체 안의 모든 변수를 꺼내야 하는 것은 아닙니다.

사용할 변수에 대해서만 비구조화 할당을 해주면 됩니다.

age를 할당하지 않았는데도 정상적으로 동작하는 것을 보면 알 수 있겠죠?

 

위의 3개의 함수 모두 호출할 경우 아래와 같이 동일한 결과가 나옵니다.

 

셜록 홈즈(자문 탐정) 역할을 맡은 배우는 베네딕트 컴버배치 입니다.

 

이처럼 비구조화 할당은 알고있으면 유용하게 쓸 수 있는 개념입니다.

도움이 돼셨다면 좋아요 꾸욱 부탁드립니다.

감사합니다.

[ 비구조화 할당 (2) ]

[ Javascript ] 알아두면 유용한 문법 - 비구조화 할당(2)