객체 (Object)
객체란?
여러 개의 속성(Property)과 메서드(Method)를 포함하는 데이터 구조
- 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상
- 속성(프로퍼티) : 객체의 특성이나 속성
- 메서드 : 객체에서 할 수 있는 동작
◉ 객체 구조
{key1:value1, key2:value2, ...}
- key = 객체의 속성(property) 또는 메서드(method) 이름
- value = 이름에 대응되는 값 또는 함수 (기본 자료형, 함수, 배열, 또 다른 객체 등 모두 가능)
- 이름과 값을 세미콜론(:)으로 한쌍이고, 여러 쌍들은 콤마(,)로 구분
파이썬의 딕셔너리 자료형과 비슷
- 파이썬의 딕셔너리형은 key를 작은따옴표(')나 큰따옴표(")로 묶어주지만,
자바스크립트의 객체는 이름(key)를 따옴표로 감싸주지 않아도 된다.
◉ 객체 생성
객체 생성하는 방법은 2가지가 있다.
중괄호({})를 사용한 객체 리터럴로 객체 생성하는 방법과
생성자 함수를 정의하여 생성자 함수를 사용하여 객체 생성하는 방법
객체 리터럴(중괄호 {}) 사용한 객체 생성
기본 문법
var/let/const 객체명 = {
key1 : value1, // property
key2 : value2,
key3 : function() {}, //method
…
};예시
var person = {
name: "minjee",
age: 26,
gender: "female",
getFullName: function() {
return this.name;
}
};- name, age, gender 는 person 객체의 속성(property)
- getFullName() 은 person 객체의 메서드(method)
생성자 함수 사용한 객체 생성
기본 문법
function 객체명(value1, value2, ...) {
this.key1 = value1; //property
this.key2 = value2;
this.key3 = function() { }; //method
…
};예시
// 객체 생성자 함수 선언
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.getFullName = function() {
return this.name;
};
};
// 생성자 함수로 객체 생성
var person2 = new Person("minjee", 26, "female");여러 가지 자료형을 갖는 객체 예시
let person = {
name : "김민지", // 문자열 속성
age : 26, // 숫자형 속성
wearGlasses : false, // 논리형 속성
introduce : function(){ // 메서드
console.log('오늘도 공부 화이팅!');
},
favorite : { // 또 다른 객체 속성
food : '면요리',
drink : '아메리카노'
},
smhrdTeacher : ['이람다', '최성우', '김윤호'] // 배열 속성
}◉ 객체 접근
객체 자체 접근
객체를 참조하는 변수를 사용하여 접근
객체변수명 : 객체 자체에 접근
예시
console.log(person); //person은 위의 리터럴로 생성한 객체- 결과
{
name: "minjee",
age: 26,
gender: "female",
getFullName: [Function: getFullName]
}
객체 속성 접근
객체 속성에 접근하는 방법은 크게 2가지가 있다.
온점(.)으로 접근하는 방법과 대괄호([])로 접근하는 방법
온점 표기법
객체변수명.key : 온점(.)으로 객체의 속성 접근
console.log(person.name); // "John"
console.log(person.age); // 30대괄호 표기법
객체변수명["key"] : 대괄호([])로 객체의 속성 접근
- 대괄호 표기법은 변수나 계산된 속성 이름을 사용할 수 있는 장점 존재
console.log(person["name"]); // "minjee"
console.log(person["age"]); // 26
// "name"을 변수에 저장하여 대괄호 안에 넣어서 객체의 속성 접근
var propertyName = "name";
console.log(person[propertyName]); // "minjee"참고사항
객체의 속성으로 또 다른 객체를 가지는 경우
객체변수명.key1.key2: 객체의 이름이 key1인 객체속성의 key2인 속성 접근
객체의 속성으로 배열을 가지는 경우
객체변수명.key[index]: 객체의 배열속성의 특정 인덱스의 요소 접근
객체 속성 변경/추가
객체변수명.key = value
객체변수명["key"] = value
객체 메서드 접근
온점(.), 해당 메서드 이름, 호출 연산자인 ()와 함께 사용
객체변수명.key() : 온점(.)으로 객체의 속성 접근
person.getFullName(); // "minjee"◉ 자바스크립트에서 사용하는 객체
-
내장 객체 (Built-in Objects)
: 자바스크립트에서 기본적으로 제공되는 객체- Object: 모든 객체의 기본이 되는 내장 객체
- Array: 배열 데이터를 다루는 내장 객체
- String: 문자열을 다루는 내장 객체
- Number: 숫자를 다루는 내장 객체
- Boolean: 논리값을 다루는 내장 객체
- Math: 수학적인 연산을 수행하는 함수와 상수를 제공하는 내장 객체
- Date: 날짜와 시간을 다루는 내장 객체
-
브라우저 객체 (Browser Objects)
: 웹 페이지와 상호작용하는 데 사용되는 객체- Window: 웹 브라우저 창을 나타내는 객체 (전역 객체)
- Document: 웹 페이지의 문서 객체
- 웹 페이지의 요소에 접근하고 조작하는 메서드와 속성을 제공
- DOM (Document Object Model) 객체들: 웹 페이지의 요소들을 나타내는 객체들
-
사용자 정의 객체 (User-defined Objects)
: 개발자가 직접 정의한 객체- 객체 리터럴을 사용하여 객체를 생성하거나, 생성자 함수를 사용하여 객체를 생성
