javascript 객체(Object) (2023.04.28)

🎈 자바스크립트 객체(object)

 

여러 속성(property)을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

데이터(속성)과 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념

 

자바스크립트의 기본 타입(data type)은 객체(object)

객체란 이름(name 혹은 key)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합

프로퍼티의 값으로 함수가 올 수 있도 있음 (이를 메소드라고 함)

 

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체  

 

📖 객체의 기본 구조

 

📖 객체의 생성과 접근 및 수정

 

// 객체 : 여러 데이터를 하나의 변수에 저장할 수 있는 데이터 타입

// 구조 -> {key1 : value1, key2 : value2, key3 : value3 ... }
// key -> 객체의 속성(property)
// value -> 해당하는 속성의 값 / 기본자료형, 함수, 배열, 객체까지 여러 데이터 타입을 담을 수 있음

// 객체 생성
let person = {
    // key 값을 작성할 때는 ""를 붙여도 되고 안붙여도 된다.
    // 반드시 value 뒤에는 콤마(,)!! 
    name : "홍길동",
    age : 30,
    isPerson : true,
    friday : ()=>{
        console.log('여러분 금요일이에요!😘');
    },
    favorite : {
        food : "pizza🍕",
        drink : "coffee☕",
        color: "violet💜"
    },
    teacher : ['자바쌤👩', '파이썬쌤👧', '웹쌤👩‍🦰']
};

// 객체 접근
// Object.key (객체이름.키이름)
console.log(person);
console.log('이름: ', person.name);
console.log('나이: ', person.age);
console.log('사람: ', person.isPerson);
person.friday();
console.log('좋아하는 음료 : ', person.favorite.drink);
console.log('담임선생님: ', person.teacher[0]);

// 속성값 변경 및 추가
person.name = "지영이";
console.log('이름 변경: ', person.name);
person.height = 165;
console.log('키: ', person.height);
// weight 속성값 추가!
person.weight = 100;
console.log('몸무게: ', person.weight);

 

📖 객체의 종류

 

⚙️ 내장객체(Built - in Object)

Number, Math, Date, String, Array 등이 있음

 

// 내장객체 : 자바스크립트에서 제공하는 객체
// Array, Math, Date, ...

let today = new Date();
let yesterday = new Date(2023, 3, 27, 0, 0, 0);
// Date 객체 월 0부터 시작
console.log('오늘 : ', today);
console.log('어제 : ', yesterday);

// 필요한 데이터 하나씩 가져오기!
// 연도 추출 (OO년)
let tYear = today.getFullYear(); 
// 월 추출 (O월(0부터 시작))
let tMonth = today.getMonth() + 1; 
// 일 추출 (O일)
let tDate = today.getDate();
// 요일 추출 (O요일) : 0~6값이 들어가있음 + 일요일부터 시작 => 0 : 일요일
let tDay = today.getDay();
// 시간 추출 (O시)
let tHour = today.getHours();
// 분 추출 (O분)
let tMinute = today.getMinutes();
// 초 추출 (O초)
let tSecond = today.getSeconds();

// 요일 0~6 -> 일~토

switch(tDay){
    case 0 : tDay = '일'; break;
    case 1 : tDay = '월'; break;
    case 2 : tDay = '화'; break;
    case 3 : tDay = '수'; break;
    case 4 : tDay = '목'; break;
    case 5 : tDay = '금'; break;
    case 6 : tDay = '토'; break;
}

// 출력형태 -> 콘솔창
// OO년 O월 O일 O요일
// O시 O분 O초

console.log(`${tYear}년 ${tMonth}월 ${tDate}일 ${tDay}요일`);
console.log(`${tHour}시 ${tMinute}분 ${tSecond}초`);

 

⚙️ 브라우저 객체 (Browser Object Model, BOM)

웹 브라우저와 관련된 객체의 집합

종류로는 window(최상위), location, navigator, history, screenm, document 가 있음

 

window

모든 객체의 최상위 객체

새 창을 생성하는 역할 등을 함

 

location

브라우저의 현재 URL 주소값에 대한 정보 제공

 

screen 

스크린(모니터)에 대한 속성 제 

 

navigator

브라우저에 대한 정보를 제공

 

history

브라우저로 방문한 페이지들의 정보 제공

 

// BOM (Browser Object Model)
// 브라우저에서 제공하는 객체

// window
//  : 브라우저 객체 중 최상위 객체, 브라우저 창 관련 기능
// 주소, 주소의 제목, 크기 설정 가능
// window. ->  생략 가능
// window.open("http://naver.com", "네이버", "width=500; height=500");
// open("http://naver.com", "네이버", "width=500; height=500"); => 정상작동!

// location
// : 브라우저의 주소 관련 정보
console.log(location);
console.log('현재 주소 :', location.href);
// 페이지 이동
// location.href = 'http://www.smhrd.or.kr'

// screen 
// : 화면 해상도와 관련된 정보 (너비, 높이)
console.log(screen);

// navigator
// : 현재 브라우저 정보(버전, 이름, 위치 등)
console.log(navigator);

// history 
// : 브라우저의 이동과 관련된 기능 (뒤로, 앞으로)
// back() - 뒤로
// forward() - 앞으로 
// go(이동할 페이지의 숫자) - 페이지로 이동 
//    ex) 2 : 앞으로 두번, -3 : 뒤로 세번