자바스크립트는 객체(object)기반의 언어로 객체는 기능과 속성을 가지고 있다. 객체는 key : value pair 해준다. 하나의 변수에 여러개의 값을 넣을 수 있다.
자바스크립트의 객체와 메서드의 속성 기본은 다음과 같으며, ① 객체의 메서드를 실행하고, ② 객체의 속성값을 가져오고 , ③ 객체의 속성값을 바꾼다.
// ① 객체의 메서드를 실행하기
객체.메서드();
// ② 객체의 속성값을 가져오기
객체.속성;
// ③ 객체의 속성값을 바꿔주기
객체.속성 = 값;
TV라는 객체의 메서드와 속성 방법을 예시로 들자면..
// ① 객체의 메서드 실행하기
tv.켜다(); 또는tv.끄다();
tv.앞으로전진해 (X) // tv는 애초에 전진할 수 없으니까..
자동차.앞으로전진해 (O)
// ② 객체의 속성값 가져오기 - 티비의 너비를 알고싶다면
tv.width;
// ② 객체의 속성값 가져오기 - 티비의 색상을 알고싶다면
tv.color;
// ③ 객체의 속성 값 바꾸기
tv.color = black;
객체의 종류
자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM, Browser Object Mode), 문서 객체 모델(DOM, Document Object Model)로 나눌 수 있다.
객체의 종류
설명
내장객체
자바스크립트 엔진에 내장되어 필요한 경우 생성하여 사용할 수 있다. 문자(string), 날짜(date), 배열(array), 수학(math) 객체가 있다.
브라우저 객체 모델
BOM은 브라우저에 계층 구조로 내장되어 있는 객체를 뜻 한다. window, screen, locaton. history, navigator 객체 등이 있으며, 브라우저에 포함된 객체를 나타낸다. 브라우저(window)는 document와 location객체의 상위 객체다. 만약 자바스크립트를 이용해 현재 열려있는 사이트에서 다른 사이트로 이동하려면 location 객체에 참조 주소(href)속성을 바꾸면 된다.
window.location.href="사이트 url"
문서 객체 모델
DOM은 HTML 문서 구조를 뜻한다. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있고, 하위 객체로 <head>와 <body>가 있다. 만약 자바스크립트를 이용해 img의 src 속성을 바꾸고 싶다면 지정 된 <img>를 선택해 src 속성을 바꾸면 된다. 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)를 적용할 수 있다.
1. 객체 생성 방법
기본적인 객체 생성 방법
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
생성자 함수를 이용한 객체 생성 방법
functionperson(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
letperson1 = newperson("홍길동", 30, "남자");
letperson2 = newperson("홍길순", 29, "여자");
2. 객체에 접근하는 방법
객체의 속성을 가져오는 방법
functionperson(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
letperson1 = newperson("홍길동", 30, "남자");
letperson2 = newperson("홍길순", 29, "여자");
// 객체의 속성을 가져오는 방법
console.log(person1.name);
console.log(person2.age);
console.log(person2.gender);
// 객체의 속성을 가져오는 방법 + console.log 찍을 때 순서도 넣기
console.log("1", person1.name);
console.log("2", person2.age);
console.log("3", person2.gender);
3. 객체 메소드(객체가 가진 여러가지 기능)
Object.keys( ); : key를 가져오는 메소드
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
letkeys = Object.keys(person);
console.log(keys)
리스트 형태로 출력한다.
Object.values( ); : value를 가져오는 메소드
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
letvalues = Object.values(person);
console.log("values", values)
리스트 형태로 value를 출력한다.
Object.entries( ); : key와 value를 묶어서 리스트(배열)로 만든 배열(2차원 배열)
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
letentries = Object.entries(person);
console.log("entries", entries)
key와 value를 리스트 형태로 묶어주는 것
Object.assign( ); : 객체를 복사하는 것
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
// newPerson이라는 변수를 만들고 object.assign(복사해줄 대상, 복사할 대상)을 입력한다.
letnewPerson = {};
Object.assign(newPerson, person)
console.log("newPerson", newPerson)
객체를 복사하면서 속성값도 바꿔주기
letperson = {
name :"홍길동",
age :30,
gender :"남자"
};
// newPerson이라는 변수를 만들고 object.assign(복사해줄 대상, 복사할 대상)을 입력한다.
letnewPerson = {};
Object.assign(newPerson, person, {age :22})
console.log("newPerson", newPerson)
기존 person은 30살이었지만, newPerson은 22살로 객체가 복사되었다.
객체 비교하기 객체는 크기가 크기때문에 메모리에 저장할 때 별도의 공간에 저장한다. person1과 person2의 값을 가지고 있는 것이 아니고, person1과 person2가 존재하는 별도 공간에 대한 주소만 가지고있다. person1과 person2의 내용은 같지만 주소만 가져오기 때문에 비교가 불가능하고 json을 통해 문자열화(json.stringify) 시키면 비교가 가능하다.
객체 끼리 비교하기 = false
// 객체끼리 비교가 불가능하고 false가 나온다.
letperson1 = {
name :"홍길동",
age :30,
gender :"남자"
};
letperson2 = {
name :"홍길동",
age :30,
gender :"남자"
};
console.log(person1 === person2);
// 변수에 담은 값끼리 비교할 때에는 true가 나온다.
letperson01 = "홍길동";
letperson02 = "홍길동";
console.log(person01 === person02);
객체끼리 비교할 때에는 false가 나온다.
객체를 문자열 화 시켜서 비교하기 = true 가능
letperson1 = {
name :"홍길동",
age :30,
gender :"남자"
};
letperson2 = {
name :"홍길동",
age :30,
gender :"남자"
};
// JSON.stringify 객체의 속성을 문자열화 시켜서 비교하면 ture가 나올 수 있다.
