TIL-JavaScript(원시타입,레퍼객체,복제,참조)

22.06.14

🎈 원시 데이터 타입

원시타입은 모두 하나의 '값'을 담고 있습니다. string,number,boolean,undefined,null 등의 원시 자료형은 값 자체에 대한 변경이 불가능(immutable) 하지만, 변수에 데이터를 재활당할 수 있습니다. 하나의 메모리에 하나의 데이터를 보관합니다. 변수를 재활당 해도 이전 변수의 할당 값에 영향을 주지 않습니다.

🎁 레퍼 객체

래퍼 객체란 이름처럼 원시 타입의 값을 감싸는 형태의 객체입니다. number,string,boolean,symbol 데이터 타입에 각각 대응하는 number,string,boolean,symbol이 제공됩니다. 자바스크립트의 문자열은 원시 타입으로 존재합니다. 우리가 문자열의 프로퍼티에 접근하려고 할 때 자바스크립트는 new string을 호출한 것처럼 문자열 값을 객체로 변환합니다. 이 객체를 래퍼 객체라고 합니다. 래퍼 객체는 프로퍼티를 참조할 때 생성되며 프로퍼티 참조가 끝나면 사라집니다.

var str = 'coding';
console.log(str.length);       // 6
console.log(str.charAt(0));     // "C"

문자열은 분명히 프로퍼티와 메소드가 있습니다. 그렇디면 객체입니다. 그런데 왜 문자열이 객체가 아니라고 할까? 그것은 내부적으로 문자열이 원시 데이터 타입이고 문자열과 관련된 어떤 작업을 하려고 할 때 자바스크립트는 임시로 문자열 객체를 만들고 사용이 끝나면 제거하기 때문입니다. 이러한 처리는 내부적으로 일어납니다. 하지만 원시 데이터 타입과 객체는 좀 다른 동작 방법을 가지고 있기 때문에 이들을 분별하는 것은 결국엔 필요합니다.

var str = 'coding';
str.prop = 'everybody';
console.log(str.prop);        // undefined

str.prop를 하는 순간에 자바스크립트 내부적으로 string 객체가 만들어집니다. prop 프로퍼티는 이 객체에 저장되고 이 객체는 곧 제거됩니다. 그렇기 때문에 prop라는 속성이 저장된 객체는 존재하지 않게 됩니다. 이러한 특징은 일반적인 객체의 동작 방법과는 다릅니다. 하지만 문자열과 관려해서 필요한 기능성을 객체지향적으로 제공해야 하는 필요 또한 있기 때문에 원시 데이터형을 객체처럼 다룰 수 있도록 하기 위한 객체를 자바스크립트는 제공하고 있는데 그것이 레퍼객체(wrapper object)입니다.

🎊 복제

전자화 된 시스템의 가장 중요한 특징은 복제입니다. 현실의 사물과 다르게 전자화 된 시스템 위의 데이터를 복제하는데 비용이 거의 들지 않습니다. 바로 이러한 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징입니다.

var a = 1;
var b = a;
b = 2;
console.log(a);      // 1

결과는 당연합니다. 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로입니다. 변수 b의 값에 변수 a의 값이 복제된 것입니다. 이를 그림으로 표시하면 아래와 같습니다.

✨ 참조

자연의 산물이 아니라 거대한 약속의 집합인 소프트웨어의 세계에서 당연한 것은 없습니다. 이것이 당연하지 않은 이유는 아래의 예제를 통해서 보자.

var a = {'id':1};
var b = a;
b.id = 2;
console.log(a.id);         // 2

이 코드의 주인공은 아래와 같습니다.

b.id = 2;
System.out.println(a.id);   

변수b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 되었습니다. 이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미합니다.
복제는 파일을 복사하는 것이고 참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷합니다. 원본파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면 심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 효과입니다. 심볼릭 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 됩니다. 다시 말해서 원본을 복제하는 것이 아니라 원본 파일은 참조(reference)하고 있는 것입니다. 저장 장치의 용량을 절약할 수 있고 원본파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 됩니다.
프로그래밍에서 광범위하게 사용하는 라이브러리라는 개념도 일종의 참조라고 할 수 있습니다. 공용 라이브러리를 사용하게 되면 하나의ㅣ 라이브러리를 여러 애플리케이션에서 공유해서 사용하게 됩니다.

a = 1;
a = {'id':1};

이 두 개의 차이점은 전자는 데이터형의 숫자이고 후자는 객체입니다. 숫자는 원시 데이터형입니다. 자바스크립트에서는 원시 데이터형을 제외한 모든 데이터 타입은 객체입니다. 객체를 다른 말로는 참조 데이터형이라고도 부릅니다. 기본데이터형은 위와 같이 복제되지만 참조 데이터형은 참조됩니다. 모든 겍체는 참조 데이터형입니다. 이를 그림으로 나타내면 아래와 같습니다.

🎉 함수와 참조

일종의 변수할당이라고 할 수 있는 메소드의 매개변수는 어떻게 동작하는지를 아래의 예제를 통해서 살펴보자.

var a = 1;
function func(b){
    b = 2;
}
func(a);
console.log(a);        // 1

원시 데이터 타입을 인자로 넘겼을 때의 동작 모습입니다.
결과는 1 이라는 숫자가 나옵니다.

var a = {'id':1};
function func(b){
    b = {'id':2};
}
func(a);
console.log(a.id);       // 1

참조 데이터 타입을 인자로 넘겼을 때 동작하는 장면입니다
결과는 1 이라는 숫자가 나옵니다.
함수 func의 파라미터 b로 전달된 값은 객체 a입니다. (b = a)b를 새로운 객체로 대체하는 것은 (b ={'id':2})b가 가르키는 객체는 변경하는 것이기 때문에 객체 a에 영행을 주지 않습니다.
하지만 아래의 예시는 다릅니다.

var a = {'id':1};
function func(b){
    b.id = 2;
}
func(a);
console.log(a.id);       // 2

파라미터 b는 객체 a의 레퍼런스입니다. 이 값의 속성을 바꾸면 그 속성이 소속된 객체는 대상으로 수정작업을 한 것이 되기 때문에 b의 변경은 a에도 영향을 미치게 됩니다.