3. 자바스크립트 데이터 타입과 연산자 #2 자바스크립트 참조 타입(객체 타입)

본 글은 INSIDE 자바스크립트 도서의 내용의 복습을 위하여 작성된 글입니다.

3.2 자바스크립트 참조 타입(객체 타입)

자바스크립트에서 기본 타입을 제외한 모든 값은 객체이다. 즉, 배열, 함수, 정규표현식 등도 자바스크립에서는 객체로 표현한다.

 

자바스크립트 객체 특징

1. 객체의 구성은 "이름(key) : 값(value)"의 형태로 저장하는 컨테이너이다.
2. 기본 타입은 하나의 값만을 가지는데 비해 객체 타입은 여러개의 프로퍼티(속성)을 가질 수 있다.
3. 객체의 프로퍼티에는 함수도 포함될 수 있다.
4. 객체안의 프로퍼티가 함수인 경우 이것을 메서드라고 부른다.

 

3.2.1 객체 생성

자바스크립트 객체 생성 방법

1. 기본 제공 Object() 객체 생성자 함수를 이용하는 방법
2. 객체 리터럴을 이용하는 방법
3. 생성자 함수를 이용하는 방법

3.2.1.1 기본 제공 Object() 객체 생성자 함수를 이용하는 방법

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

// foo 객체 프로퍼티 생성
foo.name = "foo";
foo.age = 30;
foo.gender = "male";

console.log(typeof foo);    // object
console.log(foo);           // Object { name:"foo", age:30, gender: "male"}

3.2.1.2 객체 리터럴을 이용하는 방법

// 객체 리터럴 방식으로 foo 객체 생성
let foo = {
    name : "foo",
    age : 30,
    gender : "male"
};

console.log(typeof foo);    // object
console.log(foo);           //  {name : "foo", age: 30, gender: "male"}

3.2.1.3 생성자 함수를 이용하는 방법

// 생성자 함수
function Person(name, age, gender)
{
    this.name = name;
    this.age = age;
    this.gender = gender;
}

// Person 생성자 함수를 이용해 bar 객체, baz 객체 생성
let bar = new Person("bar",33,"woman");
console.dir(bar);

let baz = new Person("baz",25,"man");
console.dir(baz)

 

3.2.2 객체 프로퍼티 읽기/쓰기 갱신

// 객체 리터럴 방식을 통한 foo 객체 생성
let foo = {
    name : "foo",
    major : "computer science"
};

// 객체의 프로퍼티 읽기
console.log(foo.name);      // foo   
console.log(foo["name"]);   // foo
console.log(foo.nickname);  // undefined

// 객체의 프로퍼티 갱신
foo.major = "electronics engineering";
console.log(foo.major);     // electronics engineering
console.log(foo["major"]);  //electronics engineering

// 객체 프로퍼티 동적 생성
foo.age = 30;               
console.log(foo.age);       // 30

// 대괄호 표기법만을 사용해야 할 경우
foo["full-name"] = "foo bar";
console.log(foo["full-name"]);  // foo bar
console.log(foo.full-name);     // NaN
console.log(foo.full);          // undefined
console.log(name);              // undefined

 

3.2.3 for in 문과 객체 프로퍼티 출력

for in 문이 수행되면서 prop 변수에 foo 객체의 프로퍼티가 하나씩 할다오딘다.

// 객체 리터럴을 통한 foo 객체 생성
let foo = {
    name : "foo",
    age : 30,
    major : "computer science"
};

// for in 문을 이용한 객체 프로퍼티 출력
let prop;
for (prop in foo){
    console.log(prop, foo[prop]);
    // name foo
    // age 30
    // major computer science
}

 

3.2.4 객체 프로퍼티 삭제

자바스크립트에서는 객체의 프로퍼티를 delete 연산자를 이용해 삭제할 수 있다. 단, 주의할 점은 delete 연산자는 객체의 프로퍼티를 삭제할 뿐 객체 자체를 삭제하지는 못한다.

// 객체 리터럴을 통한 foo 객체 생성
let foo = {
    name : "foo",
    nickname : "babo"
};

console.log(foo.nickname); // babo
delete foo.nickname;
console.log(foo.nickname);  // undefined

delete foo;
console.log(foo.name);      // foo

위의 결과에서 delete foo 명령으로 객체 자체를 삭제하려고 시도했으나 출력문에서는 foo.name이 정상적으로 출력된것을 볼 수 있다.

 

References

source code : https://github.com/yonghwankim-dev/javascript_study/tree/main
인사이드 자바스크립트, 송형주 저