Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자바스크립트배포
- JSON
- foreach
- javascript React
- first-child
- 콜백함수
- db.json
- useEffect
- couchcoding
- redux 사용방법
- sort
- 6주포트폴리오
- JavaScript
- 인라인블럭
- 자바스크립트
- redux toolkit
- javascript코딩테스트
- useParams
- 협업프로젝트
- React state
- react redux
- toString
- 카우치코딩
- React onClick
- Redux store
- 블럭요소
- useSearchParams
- line-through
- Redux
- react
Archives
- Today
- Total
개발하는 루루언니
javascript : 객체 비구조화 할당 본문
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
'컴퓨터 정보 > javascript' 카테고리의 다른 글
javascript / createElement 엘리먼트 생성 후 html 에 추가하기 (0) | 2023.05.31 |
---|---|
javascript: 객체안에 함수 this (0) | 2023.03.01 |
javascript : Number 숫자변환 / 숫자 ( , ) 콤마 toLocaleString 알아보기 (0) | 2023.02.28 |
javascript: sort의 객체 배열 정렬 정리 (0) | 2023.02.21 |
javascript: sort. 정렬 개념잡기 (0) | 2023.02.21 |