● 객체란?
![](https://blog.kakaocdn.net/dn/dgqCxn/btsyIMaoJJz/1S5FljBKLGQmZlDlUevWiK/img.png)
![](https://blog.kakaocdn.net/dn/92jyN/btsyHyDHCZN/pGrrhznsfq6PxMlyp4b8Nk/img.png)
![](https://blog.kakaocdn.net/dn/oV5l9/btsyMbNNChH/R1uMoyTAP4ecKFVe66UCXK/img.png)
- 객체 (Object)
여러개의 데이터를 속성 & 값 저장
{} 객체를 감쌀때
1. 객체를 저장(객체 안에서 Arrow Function 사용불가)
let person = {
name : '박진우',
subject : 'web',
intro : function(){
console.log('안녕하세요 박진우입니다.')
}
}
console.log(person)
결과 =>
![](https://blog.kakaocdn.net/dn/dqiQNB/btsyLG1BoTe/QJ9K34r01LplIfnGiIaHu0/img.png)
** 객체 내에 객체 저장
let IoTClass = {
cyk : {
name : '최운규'
},
mjh : {
name : '문지환'
}
}
console.log(IoTClass.mjh.name)
결과 =>
![](https://blog.kakaocdn.net/dn/SVOcW/btsyJyiGtm5/O6wOZrBSPFjg6yKWlG3eMk/img.png)
** 데이터를 볼때!
{} => 객체 => 안에 접근 .(dot)
[] => 배열 => 인덱스로 접근
2. 객체 내 데이터 접근 : .(dot) 기호 사용
객체이름, 속성이름
console.log(person.name)
person.intro()
결과 =>
![](https://blog.kakaocdn.net/dn/QH3XW/btsyMLORaae/8CdKRZPCz5ywWKtLerf451/img.png)
● 객체 실습
1. pokemon 객체를 생성
2. pokemon 객체 안에 pika라는 객체,
kkobook 이라는 객체 두개 생성
3. pika, kkobbok 객체 각각
name, age, skill을 보유
pika-> 이름: 피카츄, 나이: 2살, 스킬: '백만볼트!' 팝업창
kkobook-> 이름: 꼬북이, 나이: 1살, 스킬: '물대포!' 콘솔창
▶ 결과창
(1) 팝업창 : 백만볼트!
(2) HTML 문서 내에 :
피카츄의 나이는 2살입니다.
꼬북이의 나이는 1살입니다.
(3) console창에 : 물대포!
let pokemon = {
pika : {
name : '피카츄',
age : '2살',
skill: function(){
alert('백만볼트!')
}
},
kkobook : {
name : '꼬북이',
age : '1살',
skill : function(){
console.log('물대포!')
}
}
}
pokemon.pika.skill()
document.write(`${pokemon.pika.name} 의 나이는 ${pokemon.pika.age}입니다<br/>`)
document.write(`${pokemon.kkobook.name} 의 나이는 ${pokemon.kkobook.age}입니다`)
pokemon.kkobook.skill()
결과=>
- 알림창 화면(pokemon.pika.skill())
![](https://blog.kakaocdn.net/dn/en6BUu/btsyLnOJPRo/akqeonKyxWPoFOIXSy6ctk/img.png)
- HTML 화면(document.write(`${pokemon.pika.name} 의 나이는 ${pokemon.pika.age}입니다<br/>`)
document.write(`${pokemon.kkobook.name} 의 나이는 ${pokemon.kkobook.age}입니다`))
![](https://blog.kakaocdn.net/dn/pMCjN/btsyHxrhYBQ/8QZd15uMzlZZgnjVmRdmk0/img.png)
- 콘솔 화면 (pokemon.kkobook.skill())
![](https://blog.kakaocdn.net/dn/ekBl3M/btsyMp6lxXU/hWdJJcFATy511LE1Ck5io0/img.png)
![](https://blog.kakaocdn.net/dn/Sal2O/btsyHYvpEfU/ZYkirQK7qwHI33GoKB52F0/img.png)
=> 풀이 (intro1,2,3 함수 추가)
let person = {
name: '선영표',
age: '20',
intro1:function(){
alert("안녕하세요! 알림")
},
intro2:function(){
console.log("안녕하세요! 콘솔")
},
intro3:function(){
document.write("안녕하세요! HTML")
}
}
console.log(person)
console.log(person.name)
console.log(person.age)
document.write(`이름은 ${person.name}입니다.<br/>`)
document.write(`나이는 ${person.age}입니다.<br/>`)
person.intro1()
person.intro2()
person.intro3()
- 콘솔(console.log(person))
![](https://blog.kakaocdn.net/dn/cIsPHE/btsyNqcDYLQ/LWvpSSgzhbKE1YR2lIoueK/img.png)
- 콘솔(console.log(person.name),
console.log(person.age))
![](https://blog.kakaocdn.net/dn/piZMv/btsyMy221Qv/c6cWo0xkKEgOAOaxflsVx0/img.png)
- HTML화면(document.write(`이름은 ${person.name}입니다.<br/>`)
document.write(`나이는 ${person.age}입니다.<br/>`))
![](https://blog.kakaocdn.net/dn/bF6or6/btsyHHtVjsH/RZb1E8MLiMyaf7uMS4pZWK/img.png)
- 알림화면 intro1함수(person.intro1())
![](https://blog.kakaocdn.net/dn/27znz/btsyING9Qyz/LwniX2jyKYwkz9TPJxDdeK/img.png)
- 콘솔화면 intro2함수(person.intro2())
![](https://blog.kakaocdn.net/dn/bS5PZV/btsyNoy7XOh/iVcQTiT6y5RTBdy9klgVD0/img.png)
- HTML화면 intro3함수(person.intro3())
![](https://blog.kakaocdn.net/dn/bC7bKT/btsyH4PXMil/G8Hay5KgUbPVfWkP76g8u1/img.png)
'개발 공부 > JS, JQuery' 카테고리의 다른 글
자바스크립트 DOM (0) | 2023.10.19 |
---|---|
자바스크립트로 문자열 포매팅 구현하기. String.format() (0) | 2023.10.18 |
자바 스크립트, 함수 (0) | 2023.10.18 |
자바스크립트 for each 문 , for in 문 , for of문 (0) | 2023.10.18 |
자바 스크립트, 배열, 배열함수 (0) | 2023.10.18 |