5. 객체

객체

🔶개념 : 여러 데이터를 하나의 변수에 저장하는 데이터 타입

🔶 구조

• {key1 : value1, key2 : value2, key3 : value3 ....}
• key : 객체의 속성(Property)
• values : 속성의값 / 기본자료형,참조자료형(배열,객체,함수)

🔶특징
◻ 많은값을 포함할수 있는 자료형이다
◻ {key:val}형식으로 정보를 저장한다
◻ {key:val}에 값을 추가할 경우 쉼표로 구분
◻ 객체에서 정의한 값을 속성(property) 라고한다

🔶종류
◻ 내장 객체 (Built-in Object)

• 자바스크립트 엔진이 구동되는 시점에서 바로제공
  ◻ 브라우저 객체(Native Object)
• 자바스크립트 엔진이 구동되는 시점에서 브라우저에서 바로제공
  ◻ 사용자정의 객체(Host Object)
• 프로그램에 필요한것을 개발자가 직접만든 객체

🔶정의 방법
![[Screenshot_376 1.png]]

◻ 중괄호로 표기
◻ key 와 value로 구성
◻ key는 속성(Property)라고도 표현
◻ value는 기본자료형,참조자료형 모두 값으로 정의가능
◻ 객체의 값 접근은 마침표 사용

실습

// 배열 안에 객체 데이터 넣기
let = pokemon = [
    {
        name : '메타몽',
        type : '변신',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/013201.png'
    },
    {
        name : '따라큐',
        type : '고스트',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/077801.png'
    },
    {
        name : '이상해씨',
        type : '풀',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/000101.png'
    },
    {
        name : '파이리',
        type : '불',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/000401.png'
    },
    {
        name : '피카츄',
        type : '번개',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/002501.png'
    },
    {
        name : '꼬부기',
        type : '물',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/000701.png'
    },
    {
        name : '망나뇽',
        type : '드래곤',
        img : 'https://data1.pokemonkorea.co.kr/newdata/pokedex/full/014901.png'
    }
]

// 사용자에게 확인할 포켓몬 번호를 입력받기
// 확인할 포켓몬(1~7)

let num = Number(prompt('확인할 포켓몬(1~7)')) - 1

// console.log(`num ${pokemon[num]}`)
console.log(num,pokemon[num])

// 결과출력 -> 문서(document.write(<h1>안녕하세요</h1>))

if(num <7 && num >=0){
    document.write(`
    <div class="warp" style="display:flex;">
    <div style="flex:align-item-center;">
        <img src="${pokemon[num].img}" width="600px">
        <h1>이름 : ${pokemon[num].name}</h1>
        <h1>타입 : ${pokemon[num].type}</h1>
    </div>        
    `)
}else{
    document.write(`
    <h1>잘못된 번호를 입력하셨습니다.</h1>
    <h1>다시 입력해주세요!</h1>
    `)
}

화면출력
![[Screenshot_379.png]]