[Javascript 심화] 객체와 참조

ID : 2401271018

Tag : #javascript

객체 생성

자바스크립트에서 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체이다.
따라서 배열, 함수, 정규표현식 등 모두 객체로 표현을 할 수 있다.
자바스크립트에서 객체는 단순히 ‘이름(key) : 값(value)’의 형태로 프로퍼티들을 저장하는 컨테이너로써, 이는 Hash라는 자료구조와 상당히 유사하다.
특히 기본 타입은 한가지의 값만을 가지고 있는 것에 비해, 참조 타입의 객체는 여러개의 프로퍼티를 포함할 수 있다.

자바스크립트에서는 객체를 생성하는 세 가지 방법이 있다.

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

 

1. Object() 생성자

기본적으로 자바스크립트의 객체는 내장Object() 생성자 함수가 있다.
아래 실험을 통해 Object() 생성자 함수가 어떻게 객체를 생성하고 프로퍼티(name, age, gender)들을 추가하는지 살펴보자.

const user = new Object();

user.name = ‘kjw’;
user.age = 26;
user.gender = ‘male’;

console.log(typeof user); // 출력 : object
console.log(user); // 출력 : {name : ‘kjw’, age : 26, gender : ‘male’}

 

2. 객체 리터럴 방식

리터럴은 표기법이라고 생각하면 된다. 따라서 객체 리터럴이라고 하면 객체를 생성하는 표기법을 의미한다.객체 리터럴을 통해 객체를 생성하기 위해서는 중괄호 {} 를 이용해서 생성해야 한다. 만약 중괄호 {} 안에 key : value 형태의 프로퍼티가 추가가 된다면 해당 객체는 프로퍼티가 추가되어 있는 상태가 된다.
아래 실험을 살펴보자.

const user = {
    name : ‘kjw’,
    age : 26,
    gender : ‘male’
};

console.log(typeof user); // 출력 : object
console.log(user); // 출력 : {name : ‘kjw’, age : 26, gender : ‘male’}

 

 

참조

자바스크립트에서 기본 타입 (숫자, 문자, 불린, null, undefined)를 제외한 모든 값은 객체이다.
배열이나 함수 또한 객체로 취급되며 이러한 객체는 자바스크립트에서 참조 타입이라고 불린다.
이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다.

 

1. 참조 타입의 특징

아래 실험을 보며 참조 타입의 객체들에게 어떠한 특징이 나타나는지 보도록 하자.

const objectA = { //리터럴 방식으로 객체 생성
    val : 10
};
const objectB = objectA;

console.log(objectA.val); // 출력 : 10
console.log(objectB.val); // 출력 : 10

objectB.val = 30;
console.log(objectA.val); // 출력 : 30 
console.log(objectB.val); // 출력 : 30

실험 결과에서 나온 것 처럼
참조 타입의 객체는 다른 변수에 할당하게 될 경우 기본 타입처럼 ”복사“ 를 하는 것이 아닌 “참조” 를 하게끔 되어있다. 그래서 실제로 objectB는 단순히 objectA의 주소를 가리키는 역할을 하고 있어 objectB의 프로퍼티에 존재하는 값의 변화가 이뤄질 경우 objectA의 프로퍼티의 값에 반영이 되는 것이다.

 

2. 객체 비교

동등 연산자 ’ == ‘를 사용하여 두 객체를 비교할 때에는 객체의 프로퍼티값이 아닌 참조값을 비교한다는 사실에 주의해야 한다. 아래 실험을 통해 이해해보도록 하자.

const valueA = 100;
const valueB = 100;

const objectA = {value : 100};
const objectB = {value : 100};
const objectC = objectB;

console.log(valueA == valueB); // OUT : true
console.log(objectA == objectB); // OUT : false
console.log(objectB == objectC); // OUT : true

기본 타입의 값에서 비교 연산자 ‘ == ’를 사용 할 경우 값만 같으면 true 를 반환하게 된다.
하지만 참조 타입의 두 객체를 비교하게 될 땐 두 객체의 값이 같은 여부를 확인하지 않고 참조값이 같은지를 확인하게 된다.

 

3. 참조에 의한 함수 호출

기본 타입과 참조 타임은 함수 호출 방식도 다르다. 위에서 언급한 바와 같이 기본 타입은 값에 의한 호출 (Call By Value) 방식으로 동작한다. 즉, 함수를 호출할 때 인자로 기본 타입의 값을 넘길 경우, 호출된 함수의 매개변수로 “복사된 값“ 이 전달되게 된다. 따라서 함수 내부에서 전달받은 기본 타입의 값을 변경하려 해도 실제로 원본의 값이 변경되지는 않는다. 아래의 실험을 통해 기본 타입과 참조 타입의 차이점을 확인해 보자.

const valueA = 100;
const objectA = {value : 100};

function changeArg(val, obj){
    num = 200;
    obj.value = 100;

    console.log(num); // OUT : 200 //복사된 기본 타입의 값
    console.log(obj); // OUT : {value : 200} //참조된 참조타입의 값
}

changeArg(valueA, objectA);

console.log(valueA); // OUT : 100 //원본의 기본 타입의 값
console.log(objectA); // OUT : 200 //원본의 참조 타입의 값

 

 

# 프로토타입 맛보기

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 이것은 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것으로 쓸 수 있는 듯 한 특징이 있다. 자바스크립트에서는 이러한 부모객체를 “프로토타입 객체” 라고 부른다.
아래의 실험을 통해 프로토타입을 살펴보도록 하자.

const user = {
    name: ‘kjw’,
    age: 30
};

user.toString();
console.dir(user);

객체 리터럴 방식으로 user객체를 생성하고, 이 객체에서 toString() 메소드를 호출하였다.
하지만 user객체 어디에도 toString()이 없음에도 에러가 발생하지 않고 정상적으로 호출이 되었다.
그 이유는 바로 user객체의 프로토타입에 이미 toString() 메소드가 정의되어 있고, user객체가 상속처럼 toString() 메소드를 호출했기 때문이다.
ECMAScript 명세서에서는 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 Prototype 이라는 숨겨진 프로퍼티를 가진다고 설명하고 있다.
예를 들어 크롬브라우져에서는 __ proto __ 가 바로 이 숨겨진 프로토타입 프로퍼티를 의미한다.