개발하는 루루언니

javascript : 객체 비구조화 할당 본문

컴퓨터 정보/javascript

javascript : 객체 비구조화 할당

혜닝혜루 2023. 3. 1. 16:36
728x90
반응형

자바스크립트가  부족하다고 느끼는  요즘 다시 처음부터 기초를 잡자라는 마음으로 공부하게 되었다 

 

객체 비구조화 할당은 함수와 같이 쓰이는데 조금더 객체를 간단하게 사용할 수 있다.

 

 

 

import "./styles.css";

export default function App() {
  const ionsman = {
    name: '로버트',
   
    alias : '아이어맨'
  }
function 아이어맨 (value){
 const {name,alias} = value
 const result = `${name}은 ${alias} 입니다.`
 console.log(result)
}
  아이어맨(ionsman)
  return (
    <div className="App">
    
    </div>
  );
}

 

 

여기서 깊게 봐야할 부분은 보통 객체를 사용할때  ionsman.name 이런식으로 쓰이기 마련이다.

객체 비구조화 할당은 한번에 키값을 불러오는 것이다.

 

💛💛💛💛💛💛 여기만 보면 된다.

const { name,alias } = value 

`${name}은${alias}입니다. ` 라고 작성하면 굳이 value.name이라고 작성 안해도 값을 볼수있다.

여기서 value는 함수의 매개변수로 전달되어 오는데 ionsman의 객체 값을 가져온 것이다.

 

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

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

print(ironMan);
print(captainAmerica);

더 간결하게 쓰기위해서는 매개변수를 아에

 

{ alias , name, actor} 으로 객체형식으로 가져오는 것이다. 그럼 바로  사용이 가능하다.

 

 

 

 


해당 내용은  벨로퍼트 게시글을 참고하여 작성하였습니다. 

728x90