(Javascript) 자바스크립트 심화 (10) 데이터 타입과 참조

안녕하세요, 영감을 주는 개발자 방민방민입니다.

오늘은 이전시간에 간단하게 다루었던 자바스크립트에서의 데이터타입과 참조 대하여 알아보고자 합니다.

자바스크립트에는 객체 데이터 타입과, 원시 데이터 타입입니다. 

-숫자

-문자

-불리언

-Null

-undefined 

위의 5가지 데이터 타입을 원시 데이터 타입이라고 하고, 5가지에 포함되지 않는 다른 데이터 모두를 객체 데이터 타입이라고 합니다.

1. 레퍼 객체

레퍼객체에 대하여 알아보기 위하여 아래 코드를 살펴보겠습니다.

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

str.length 는 6을 charAt(0) 은 C 를 출력합니다. 그런데 조금 이상합니다. str 은 분명 문자열 즉 객체가 아닌 원시 데이터 타입임에도 불구하고 .length , .charAt() 을 사용합니다. 즉 객체처럼 동작합니다.

이것은 자바스크립트가 내부적으로 문자열과 관련된 메서드를 사용하려고 할때, 문자열로 이루어진 String 객체를 생성하고, 사용 후 제거해 버림으로써 가능한 동작입니다.

2. 복제와 참조

아래의 코드를 보도록 하겠습니다.

var a =1;
var b =a;
b = 2;
alert(a);

b에는 a에 있던 1이 복제 되었습니다. 그리고 b를 2로 바꾸면 a의 값은 그대로 1을 유지합니다. 그 이유는 a 에 있는 1이라는 값을 b로 복제했기때문입니다. b의 변화에 대하여 a 는 영향을 받지 않습니다.

다른 예제를 보도록 하겠습니다.

var a = {id:1};
var b = a;
b.id = 2;
alert(a.id);

이 예제에서 b 에 또다시 객체 a를 복제하였습니다. 그리고 b의 데이터 id 값을 2 로 변화시켰습니다. 그리고 a의 id를 출력하면 2가 출력됩니다. 즉 b의 변화에 대하여 a는 영향을 받았습니다. 그 이유는 b 가 a를 복제한것이 아니라, 참조 하였기 때문입니다. 

이러한 객체의 참조는 a와 b를 연결시켜 a 를 변화시키면 b가 변화하고, b를 변화시키면 a 도 변화되도록 참조합니다.

3. 함수에서의 복제와 참조

함수에서 매개변수를 사용할때, 이 복제와 참조에 대한 명확한 이해가 없으면 문제가 발생할 수 있습니다.

아래의 예제를 보도록 하겠습니다.

var a = 1;
function func(b){
	b = 2;
}
func(a);//복제
console.log(a);//1을 출력

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

위에서 1의 값을 갖는 원시데이터 a는 함수 func를 호출할때, 복제되어 그 내부에서 동작합니다. 그렇기 때문에 매개변수로 넘어간 b 를 2로 변경시키더라도 a의 값은 변경되지 않습니다.

반대로 객체로 선언된 a는 id:1 이라는 값을 가지고 있습니다. 이러한 객체는 함수로 호출될때, 직접적으로 참조를 통해 그 값에 접근하기 때문에 함수 내부에서 그 값을 변경시키면 실제 a객체의 값도 변경됩니다.

a 의 id 값은 결과값으로 2를 출력합니다.

오늘은 자바스크립트에서의 데이터 타입과 참조에 대하여 알아보았습니다.

이러한 소프트웨어 세계에서의 개념들을 확실하게 잡지 못하면 프로그램의 동작에 치명적인 오류를 발생시킬수 있습니다. 복제와 참조에 대한 정확한 개념을 잡으시기 바랍니다.

그러면 지금까지 영감을 주는 개발자 방민방민 이었습니다:)