JAVASCRIPT

[JavaScript] 자료형(참조 타입)

이전 포스팅에서도 언급했지만 참조타입으로는 객체(Object), 배열(Array), 함수(Function)가 있다. 원시타입과 참조타입을 비교하는것에 초점을 두어 간단히 알아본다.

객체(Object)

자바스크립트에서 객체는 단순하게 표현하면 속성명(Key), 값(value) 형태의 속성(property)을 저장하는 그릇이라고 생각하면 된다. 즉 여러 값을 표현하는 묶음을 만들때 사용된다. 간단한 객체를 만들어 보겠다.

var person = {
    name: '철수',
    age: '20'
}

속성명(name, age)과 값(‘철수’, ‘20’)인 객체를 선언했다. 객체 선언 방식은 {}(중괄호)로 한다. 이 선언 방식은 객체 리터럴 방식이라고 하며, 리터럴이란 용어의 의미는 표기법이라고 생각하면 된다. 리터럴 방식은 간단한 표기법만으로도 객체룰 생성할 수 있는 자바스크립트의 강력한 문법이다. 객체의 프로퍼티에 접근하려면 마침표 표기법과 대괄호 표기법이 있다.

console.log(person.name); // 철수

배열(Array)

배열은 변수에 여러가지의 값을 한번에 담을 수 있는 그릇이라고 볼 수 있다. 위에 언급한 객체와 비슷해 보일 수 있지만 배열의 속성명은 각 프로퍼티의 인덱스 값이다. 선언방식은 [](대괄호)로 하고 객체와 마찬가지로 이는 배열 리터럴이다.

var person = ['철수', '20'];

객체와는 다르게 배열의 속성명은 인덱스 값이라고 했다. 그러므로 person의 첫번째 값인 ‘철수’의 속성명(Key)은 배열의 첫번째 인덱스인 0이고, 두번째 값(value)인 ‘20’의 속성명은 1이 되는 것이다. 배열의 프로퍼티에 접근하려면 대괄포 표기법을 이용하면 된다.

console.log(person[0]); // 철수 
console.log(person[1]); // 20

함수(Function)

함수는 특정 기능을 하는 구문(알고리즘, 로직)을 독립된 부품으로 만들어 재사용하고자 할때 사용하는 문법이다. 함수를 선언할때는 function키워드를 사용하며 구조는 아래에서 확인할 수 있다.

function 함수이름(파라미터) {
    // 알고리즘
    return 값 // 리턴 값
}

객체(참조)타입이 무엇이 있나 간단히 봤다. 원시타입과 객체(참조)타입의 차이점을 알아보도록 하자.

원시 타입과 참조 타입의 차이

자바스크립트에서는 원시타입인 숫자, 문자열, 논리형, 널, 언디파인드 다섯가지를 제외한 모든 값은 객체(참조)타입 이다. 참조 타입이라고 불리는 이유는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. 아래 예제를 살펴 보자.

원시타입은 값 자체를 복사한다. 

var num1 = 10,
    num2 = num1;
console.log(num2); // 10
    num1 = 20;
console.log(num2); // 10

변수 num1에다가 10을 대입하고 num1를 num2에 대입했다. 변수에 할당된 값 자체를 복사하였기 때문에 num2의 값은 10이다. num2에 20을 대입해도 num2의 값은 변하지 않는다. num2에 직접적으로 값을 대입하지 않았기 때문이다. 아래 참조타입을 보자.

참조타입은 참조(주소)값을 복사한다. 

var obj1 = {
    val: 10
}
var obj2 = obj1;
console.log(obj2.val); // 10
obj1.val = 20;
console.log(obj2.val); // 20

우선 obj1에 객체 리터널을 선언하고, val 프로퍼티에 10을 담았다. 그리고 obj2에 obj1을 할당했다. obj2의 val프로퍼티의 값은 10이 출력된다. 여기서 obj1의 val에 20을 담았다. obj2의 val값을 건들지도 않았는데 obj1 처럼 val값이 20으로 봐뀌어있다. 어떻게 된 것일까?
값 자체가 복사되는 원시값과는 달리 참조타입은 참조(객체를 가르키는 참조값 혹은 메모리 주소)만 복사되고 실제 값은 복사되지 않는다. 즉 obj1과 obj2는 실제 데이터를 가지고 있는 객체의 참조(주소)값만 가지고 있는 것이다.

updated_at 05-05-2017