1. 객체
-
객체(object)란 서로 관련있는 데이터들을 'key(이름)-value(값)'의 형태로 구성된 프로퍼티(property)와 메서드(method)로 (순서 없이)구성된 자료 구조이다.
-
객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터이다.
-
자바스크립트에서는 숫자, 문자열, boolean, undefined 타입을 제외한 모든 것이 객체이다. 하지만 숫자, 문자열, boolean과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.
1) 프로퍼티(property)
-
프로퍼티(property)는 속성이란 뜻으로, 자바스크립트에서는 '객체 내부의 속성'을 의미한다.
-
프로퍼티의 키(key)에는 빈 문자열을 포함한 모든 문자열 또는 심벌 값, 값(value)에는 모든 타입이 허용된다.
-
중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.
var empty = {};
console.log(typeof emptyh); // object- 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 이때 에러가 발생하지 않으므로 주의해야 한다.
var foo = {
name: 'Lee',
name: 'Kim'
};
console.log(foo); // {name: "Kim"}2) 메서드(method)
-
메서드(method)란 어떤 객체가 가지고 있는 어떤 동작을 말하는 것으로, 자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 말한다.
-
프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다.
var circle = {
radius: 5, // 프로퍼티
getDiameter: function () { // 메서드
return 2 * this.radius; // this는 circle을 가리킴
}
}
console.log(circle.getDiameter()); // 102. 객체 생성(선언)
1) 객체 리터럴
-
객체 리터럴은
{...}중괄호를 이용해 만들고, 중괄호 안에는 '키(key) : 값(value)'쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있다. -
객체 리터럴의 중괄호는 코드 블럭을 의미하지 않는다. 코드 블럭의 닫는 중괄호 뒤에는 세미콜론을 붙이지 않지만, 객체 리터럴은 값으로 평가되는 표현식이므로 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다.
- 기본 문법
let obj = { key : value, ... }
let obj = { // 객체
name: "John", // key: "name", value: "John" -> 첫번째 프로퍼티
age: 30, // key: "age", value: 30 -> 두번째 프로퍼티
"likes birds": true // 복수의 단어는 프로퍼티 이름(key)을 따옴표로 묶어야 한다.
};
console.log(obj). // {name: 'John', age: 30, likes birds: true}2) Object 생성자 함수
new연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환하고, 이후 프로퍼티 또는 메서드를 추가할 수 있다.
- 기본 문법
let obj = new Object ()
let obj = new Object ()
obj.name = "John", // key: "name", value: "John" -> 첫번째 프로퍼티
obj.age = 30, // key: "age", value: 30 -> 두번째 프로퍼티
obj[like birds] = true // 복수의 단어는 bracket notation 사용
console.log(obj). // {name: 'John', age: 30, likes birds: true}3. 객체 다루기
1) 프로퍼티 접근
-
프로퍼티에 접근하는 방법은 마침표 표기법(dot notation)과 대괄호 표기법(bracket notation) 2가지가 있다.
-
마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다.
-
마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근 연산자의 내부에는 프로퍼티 키를 지정한다.
기본 문법
// 마침표 접근법 obj.key // 대괄호 접근법 obj["key"]
let person = {
name: "홍길동",
age: 27,
score: [40, 50],
fullId: function() {
return this.name + this.age;
}
};
// 마침표 표기법
console.log(person.name); // 홍길동
console.log(person.score); // [40, 50]
console.log(person.fullId()); // 홍길동27
// 대괄호 표기법
console.log(person["name"]); // 홍길동
console.log(person["score"]); // [40, 50]
console.log(person.fullId()); // 홍길동27-
대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표(
'')로 감싼 문자열이어야 한다. -
대괄호 프로퍼티 접근 연산자 내에 따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석한다.
let person = {
name: 'Lee'
};
console.log(person[name]); // ReferenceError: name is not defined2. 프로퍼티 값 갱신
- 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
let tweet = {
writer : 'stevelee',
};
tweet.writer = 'Tom'
console.log(tweet); // {writer: 'Tom'}3. 프로퍼티 동적 생성
- 존재하지 않는 프로퍼티 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
let tweet = {
writer : 'stevelee',
};
tweet.category = '잡담';
console.log(tweet); // {writer: 'stevelee', category: '잡담'}변수명으로 프로퍼티 동적 생성
대괄호 표기법으로 객체의 프로퍼티에 변수를 활용하여 접근할 수 있다.
obj[property]와 같이 대괄호 안에 따옴표 없이 변수명을 넣어서 변수로 접근 가능하다.객체의 key 이름을 변수로 생성할 경우 대괄호 표기법을 사용해야 한다.
let newKey = 'test'; let countObj = {}; countObj[newKey] = 5; console.log(countObj); // {test: 5}
4) 프로퍼티 삭제
delete연산자는 객체의 프로퍼티를 삭제한다. 이때delete연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.
let tweet = {
writer : 'stevelee',
};
twwet.isPublice = true; // 프로퍼티 동적 생성
delete tweet.isPublice; // tweet 객체의 isPublice 삭제