자바스크립트 객체 (JavaScript Object)
객체 (Object)
- 여러 속성을 하나의 변수 안에 저장할 수 있도록 해주는 데이터 타입
- 대표 괄호 = { }
- key(속성), value(값)로 구성 (파이썬 딕셔너리와 유사)
1. 객체 생성 : 객체명 = { }
2. 객체 출력 : 자바와 달리 바로 출력 가능
3. 객체 내 데이터에 접근
- 객체명.key이름
- 객체명['key이름']
4. 객체 내 데이터 변경
- 객체명.바꿀데이터key = 바꿀데이터value
5. 배열 안에 객체를 넣을 수 있고, 객체 안에 배열을 넣을 수 있음
- 배열 함수 map() : 조건에 맞는 새로운 배열을 만들어내는 함수
객체명.map(매개변수 => 매개변수.key이름)
(배열 내 객체 각각의 같은 key값을 가진 모든 데이터를 가져옴) - 객체 안 배열 데이터 접근 : 객체명.배열명[인덱스번호]
<body>
<script>
// (1) 객체 생성
let person = {
name : '박명수',
age : 52,
team : '무한도전'
}
// (2) 객체 출력
console.log(person)
// (3) 객체 내 데이터에 접근
// case1) 객체이름.key이름
console.log(person.name)
// case2) 객체이름['key이름']
console.log(person['name'])
// (4) 객체 내 데이터를 변경하는 방법
person.name = '정준하'
console.log('현재 객체 :',person)
// 배열 안에 객체를 넣을 수 있고,
let orderList = [{
name : '아메리카노',
iced : 'iced',
place : 'takeout'
},{
name : '바닐라라떼',
iced : 'hot',
place : 'here'
}]
console.log(orderList)
// 아메리카노만 출력
// 배열에 접근 => 객체 안에 접근
console.log(orderList[0].name)
// 배열함수 map 함수
// 조건에 맞는 새로운 배열을 만들어내는 함수
let name = orderList.map(object => object.name)
console.log(name)
// 객체 안에 배열을 넣을 수 있다.
let chart = {
name : 'Menlon Top 100',
title : ['사건의 지평선', 'OMG', 'ditto'],
singer : ['윤하', '뉴진스', '뉴진스']
}
console.log(chart)
// 사건의 지평선만 출력
console.log(chart.title[0])
</script>
</body>
▶ 예제
① pokemon이라는 배열 생성
② pokemon 배열 안에 3개의 포켓몬을 만들고 각각 이름, 나이, 스킬 속성값을 주기
③ 콘솔창에 '제가 가장 좋아하는 포켓몬은 ~이고, ~속성입니다.' 출력
④ 콘솔창에 '제가 두번째로 좋아하는 포켓몬은 ~이고, ~속성입니다.' 출력
⑤ pokemon중 하나의 스킬을 함수로 설정하고 사용해보기
<body>
<script>
let pokemon = [{
name : '피카츄',
age : 2,
skill : '전기'
},{
name : '파이리',
age : 3,
skill : '불'
},{
name : '꼬부기',
age : 4,
skill : function(){
console.log('꼬부기 물대포 공격!!')
}
}]
console.log('제가 가장 좋아하는 포켓몬은',pokemon[0].name+'이고,',pokemon[0].skill+'속성입니다.')
console.log('제가 두번째로 좋아하는 포켓몬은',pokemon[1].name+'이고,',pokemon[1].skill+'속성입니다.')
// 객체 내 함수 사용
pokemon[2].skill()
</script>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| 자바스크립트 jQuery 기본 문법 (JavaScript jQuery) (0) | 2023.01.20 |
|---|---|
| 자바스크립트 DOM (JavaScript Document Object Model) (0) | 2023.01.15 |
| 자바스크립트 함수 (JavaScript Function) (0) | 2023.01.14 |
| 자바스크립트 배열 (JavaScript Array) (1) | 2023.01.14 |
| 자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop) (0) | 2023.01.14 |
댓글