소년코딩의 자바스크립트 강좌 05. 참조 데이터 타입

자바스크립트에서 원시 타입을 제외한 모든 값은 객체다.

따라서 배열, 함수, 정규 표현식 모두 자바스크립트의 객체다.

---

1. object (객체)

'이름(key): 값(vlaue)' 형태의 프로퍼티들을 저장하는 컨테이너다.

기본(원시) 타입은 하나의 값만을 가지는데 비해 참조 타입인 객체는 여러개의 프로퍼티들을 포함할 수 잇으며, 이러한 객체의 프로퍼티들은 기본타입의 값을 포함하거나, 다른 객체를 가리킬 수 있다.

이러한 프로퍼티 성질에 따라 함수도 포함할 수 있으며 이것을 메서드라고 부른다.

---

2. object 생성

자바스크립트에서 명시적으로 객체를 생성하는 방법은 두 가지가 있다.

1) Object() 객체 생성자 함수

자바스크립트에서는 객체를 생성할 때 Object() 생성자 함수를 제공한다.

생성자 함수로 객체를 생성할 때는 반드시 new 연산자를 같이 써야한다.

// Object() 함수를 이용해서 blog 빈 객체 생성
var blog = new Object();

// blog 객체 프로퍼티 설정
blog.name = 'oppa';
blog.age = 25;

console.log(typeof blog);  // "object"
console.log(blog);         // {name: "oppa", age: 25}

Object() 생성자 함수를 이용하여 blog라는 빈 객체를 생성후, 여러가지 프로퍼티(name, age)를 추가하였다.

 

2) 객체 리터럴

객체 리터럴이란 객체를 생성하는 표기법으로 여러 가지 프로퍼티를 가진 객체를 쉽게 정의할 수 있도록 디자인된 표기법이다.

중괄호({}) 를 이용해서 객체를 생성하며, {} 안에 "프로퍼티 이름": "프로퍼티 값" 형태로 표기한다. (아무것도 적이 않은 경우는 빈 객체가 된다.)

프로퍼티 이름으로는 숫자, 문자열이 올 수있으며,

프로퍼티 값으로는 자바스크립트 값을 나타내는 어떤 표현식도 올수 있다. 이 값이 함수일 경우 메서드라고 부른다.

// 객체 리터럴
var blog = {
    name: 'oppa',
    age: 25
}

console.log(typeof blog);  // "object"
console.log(blog);         // {name: "oppa", age: 25}

 

객체의 인스턴스는 둘 중 어떤 방법으로 생성해도 상관없다.

객체는 새로운 값을 프로퍼티로 생성하고, 생성된 프로퍼티에 접근해서 해당 값을 읽거나 또는 원하는 값으로 프로퍼티 값을 갱신할 수 있다. 

---

3. 객체 프로퍼티 읽기

객체의 프로퍼티는 보통 다른 언어와 마찬가지로 '점 표기법'을 써서 접근하지만 '대괄호 표기법'을 쓸 수도 있다.

대괄호 표기법은 프로퍼티 이름을 나타내는 문자열을 대괄호 안에 쓰는 방식이다.

var blog = {
    full-name: 'oppa coding',
    name: 'oppa',
    age: 25
};

// 객체 프로퍼티 읽기
console.log(blog.name);    // 'oppa'  //    점 표기법
console.log(blog['name']); // 'oppa'  // 대괄호 표기법

(언뜻 보기에 별다른 차이점은 없다.)

 

console.log(blog.full-name);    // NaN
console.log(blog['full-name']); // 'oppa coding'

var propertyName = 'full-name';
console.log(blog[propertyName]; // 'oppa coding'

그러나 대괄호 표기법은  프로퍼티 이름에 문법 에러를 일으키거나 키워드 및 예약어에 해당하는 프로퍼티 이름에 접근할 수 있으며, 변수를 써서 프로퍼티에 접근할 수도 있다.

---

4. 객체 프로퍼티 갱신

프로퍼티에 접근해서 객체의 기존 프로퍼티 값을 갱신할 수 있다.

var blog = {
    name: 'oppa'
};

console.log(blog.name);    // 'oppa'

// 객체 프로퍼티 갱신
blog.name = 'coding';
console.log(blog.name);    // 'coding'

 

---

5. 객체 프로퍼티 동적 생성

자바스크립트에서는 객체가 생성된 후에도 동적으로 프로퍼티를 생성할 수 있다.

var blog = {
    name: 'oppa'
};
console.log(blog.age);    // undefined

// 프로퍼티 동적 생성
blog.age = 25;
console.log(blog.age);    // 25

---

6. for-in 문과 객체 프로퍼티 출력

for in 문을 사용하면 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

var blog = {
    full-name: 'oppa coding',
    name: 'oppa',
    age: 25
};

// for in 문을 이용한 객체 프로퍼티 출력
var property;
for(property in blog) {
    console.log(property, blog[property]);
}
/*
    full-name 'oppa coding'
    name 'oppa'
    age 25
*/

---

7. 객체 프로퍼티 삭제

자바스크립트에서는 객체의 프로퍼티를 delete 연산자를 이용해 즉시 삭제할 수 있다.

delete 연산자는 객체의 프로퍼티만 삭제할 뿐, 객체 자체를 삭제하지는 못한다.

var blog = {
    name: 'oppa'
};
console.log(blog.name);    // 'oppa'

// 객체 프로퍼티 삭제
delete blog.name;
console.log(blog.name); // undefined

// 객체 삭제 시도
delete blog;
console.log(blog);    // Object{}

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.