JavaScript 기초 : 자료형 업그레이드 4. 기본형과 참조형

 

4. 자료형

 

자료형은 크게 기본형과 참조형으로 나뉜다. 

기본형은 Primitve Type 이라고 부르며 참조형은 Reference Type이라고 부른다. 

 

기본형은 말 그대로 기본이다. 숫자, 문자열, 불린, null, undefined 처럼 한 개의 값을 가진 요소들이다. 

참조형은 객체와 배열을 말한다. 여러 값들이 묶여 있는 것이며 자바스크립트에서 매우 중요하다. 

 

기본형과 참조형 각각을 살펴보자!

 

 

4-1. 기본형(Primitive Type)

 

숫자

문자열

불린

null

undefined

 

 

프로그래밍을 할 때는 언어에 상관 없이 어떤 값을 사용할 때 보통 변수에 할당하여 사용한다.

(특별한 경우를 제외하면)

 

변수에 기본형 값을 할당하면 

해당 이름을 가진 변수 상자에 그 값을 넣어준다고 생각할 수 있다. 

 

예를 들어보자.

i라는 변수에 숫자 3을 할당해준다.

m이라는 변수는 i를 할당한다.

즉, 변수 m에 i가 가진 값을 복사해서 담게 된다는 의미이다. 

 

그리고 m이라는 변수에 새로운 값 30을 할당해보자.

//변수에 기본형 할당
let i = 3;
let m = i;

console.log(i);
console.log(m);
m = 30;
console.log(i);
console.log(m);

 결과가 어떻게 나올까?

 

3

3

3

30

 

m값이 30으로 바뀌고 나서

i와 m을 콘솔에 출력해보면 

i는 3 m은 30으로 출력된다. 

 

숫자 뿐만 아니라 문자열, 불린, null, undefined 등 기본형에 해당하는 값은 모두 마찬가지이다.

기본형 값을 변수에 담아 사용할 때는 값이 그대로 할당되는 것을 볼 수 있다. 

 

그럼 참조형은 어떨까?

 

 

4-2. 참조형(Reference Type)

 

참조형은 객체와 배열을 말한다.

 

변수 x에 프로퍼티 1개를 가진 객체가 할당되었다고 생각해보자. 

자바스크립트에서 변수에 객체값을 할당한 경우에는 기본형과는 달리 특별하게 동작한다.

 

특별하게 동작한다는 것은 어떤 의미일까?

 

기본형의 경우 변수에 그 기본형의 값이 저장된다고 본다면 

참조형의 경우 변수에 객체 값으로 가는 주소가 저장된다. 

변수 상자와 객체 값 사이에 길이 열리는 것이다.

 

 

예시를 보자. 

변수 x에 프로퍼티 1개를 가진 객체가 할당되었다.

그리고 변수 y는 x를 복사한다.

콘솔에 x와 y를 출력한 뒤 y에는 birth 프로퍼티를 추가했다.

//변수에 참조형 객체할당

let x = {name: 'Yunju'};
let y = x;

console.log(x);
console.log(y);
y.birth = 1989;
console.log(x);
console.log(y);

 

결과는 어떻게 나올까?

{ name : 'Yunju' }

{ name : 'Yunju' }

{ name : 'Yunju' , birth :1989 }

{ name : 'Yunju' , birth :1989 }

 

기본형에서는 y변수에 값이 30으로 변한다고 해서

x변수의 값이 변하지 않았다. 

 

하지만 참조형은 다르다. 

객체가 만들어지고 객체와 이어지는 길이 변수 x에 할당된다. 

 

변수 x에는 객체로 가는 길이 열려 있기 때문에

변수 y에는 이 길이 복사된다. 

따라서 변수 y 에는 객체로 가는 길 자체가 복사된 것이다. 

 

 

 

4-3. 참조형 배열 예시 

 

배열도 마찬가지이다. 

예시를 살펴보자. 

변수 x에 [1, 2, 3] 배열을 할당하고 변수 y는 x를 할당한다.

//변수에 참조형  배열

let x = [1,2,3];
let y = x;

console.log(x);
console.log(y);
y[2] = 5;
console.log(x);
console.log(y);

이 경우 어떻게 나올까?

 

[ 1, 2, 3 ]

[ 1, 2, 3 ]

[ 1, 2, 5 ]

[ 1, 2, 5 ]

이렇게 출력된다. 

결국 참조형의 경우

한 쪽 변수를 수정하면 다른쪽 변수도 똑같이 수정된다. 

 

 

정리해보자. 

 

기본형 값을

변수에 담아 사용할 때는 값이 그대로 할당되고

 

참조형 값을

변수에 담아 사용할 때는 해당 값으로 가는 주소가 할당된다. 

 

다른 예시도 풀어보자!

 

 

 

4-4. 기본형과 참조형 정리 예시 

 

 

기본형 예시를 살펴보자. 

1  let x = 'Yunju';
2  let y = x;
3
4  y = x + '!';
5  x = y.toLowerCase();
6
7  console.log(y);

결과가 어떻게 나올까??

 

바로 

'Yunju!' 이다.

 

4번 줄을 보면 y값에 x값 + ! 을 할당했다. 즉 x값에 !만 추가하면 되는 것이다. 

5번 줄을 보면 toLowerCase메소드를 이용해 y값에 할당된 값을 소문자로 변경한 값을 x에 재할당했다. 

하지만 x를 호출한 것이 아니라 y를 호출한 것이기 때문에 y값이 출력된다. 

 

 

참조형 예시도 살펴보자. 

x에 객체를 넣었고 x 안에는 numbers라는 배열도 넣었다. 

y는 x의 numbers프로퍼티를 할당하였고 z에는 x의 title 프로퍼티를 할당하였다. 

 1  let x = {
 2      numbers: [89, 5, 14, 16],
 3      title: 'Yunju'
 4  };
 5  let y = x.numbers;
 6  let z = x.title;
 7  
 8  x.numbers.unshift(5);
 9  x.title = 'Hello';
10 
11  console.log(y);
12  console.log(z);

결과는 어떻게 될까?

 

[ 5, 89, 5, 14, 16 ]

Yunju

이렇게 출력된다.

 

변수 y에는 x의 numbers 프로퍼티가 할당되었다. 

numbers프로퍼티 값은 배열이기 때문에 배열로 가는 주소 값이 할당된다. 

결국, 변수 y와  x.numbers 는 같은 배열을 가리킨다. 

 

x의 title프로퍼티를 변수 z에 할당하고 있는데 title프로퍼티 값은 기본형 값이기 때문에 값이 그대로 복사된다. 

즉, 변수 z는 x.title과 같은 값이지만, 서로 독립적이다. 

 

그렇기 때문에 

y는 바뀐 배열이 나타나게 되고z는 처음에 할당받은 x.title의 값이 나타난다. 

 

기억할 것은

기본형은 값이 저장

참조형은 값으로 가는 주소가 저장된다는 것이다!

 

다음 글에서는 참조형을 복사하는 방법에 대해 정리해보자!

 

JavaScript 기초 : 자료형 업그레이드 5. 참조형 복사