(38) JavaScript - 자료형(심화) / 기본형과 참조형

 

기본형(Primitive Type) , 참조형 (Reference

기본형은 객체를 제외한 나머지 자료형을 묶은 Number, String, boolean, null, undefined 가 속한다

 

우리가 어떤 값을 다룰 때 특별한 경우를 제외하면 모두 변수에 할당해서 사용한다.

자바스크립트에서 변수에 기본형 값을 할당하면

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

코드를 가지고 예를 들어보자면...

    let x = 3;
    let y = x;

    console.log(x);
    console.log(y);
    y = 5
    console.log(x);
    console.log(y);

 

 

 

▼ 코드 해석 과정

    let x = 3;
    let y = x;

    console.log(x);
    console.log(y);

변수x에 3이라는 값을 할당하고 있으므로 x라는 상자에 숫자 값 3을 담았다고 불 수 있다.

그리고 변수 y에 변수 x를 할당하고 있는데 

이러면 변수 y에 x가 가지고 있는 값을 복사해서 담게 된다.

 

 

    y = 5
    console.log(x);
    console.log(y);

이번에는 변수 y에 5라는 새로운 값을 할당해 주고 있는데,

이렇게 되면 y가 담고 있던 3이라는 값이 5가 되는 것이다.

 

 

예시로 숫자 값만 사용했지만 변수에 기본형 값을 다루는 방식은 모두 똑같다.

 

 

---

이번엔 객체로 바꿔서 어떻게 출력되는지 살펴보자

    let xx ={name: '섭이'}
    let yy = xx

    console.log(xx);
    console.log(yy);
    yy.year = 2024
    console.log(xx);
    console.log(yy);

 

▼ 코드 해석 과정

    let xx ={name: '섭이'}
    let yy = xx

    console.log(xx);
    console.log(yy);

프로퍼티 하나를 가지고 있는 객체를 변수xx에 담고

xx가 가지고있는 값을 yy에 복사해주면 똑같은 결과가 출력 될 것이다.

 

    yy.year = 2024
    console.log(xx);
    console.log(yy);

그리고 yy의 새로운 프로퍼티 '2024' 를 추가했을때,

서로 다른 결과를 보여야 하지만

결과를 보니 xx에도 year가 추가된 것을 확인할 수 있다.

 

사실 자바스크립트에서 변수에 객체 값을 할당한 경우에는 

객체 값이 어딘가에서 만들어지고 변수에는 그 객체 값으로 가는 주소가 저장된다.▼

 

좀 더 쉽게 표현하면 변수 상자와 객체 값 사이의 길이 열리는 것으로 보면 된다.▼

 

    let xx ={name: '섭이'}
    let yy = xx

    console.log(xx);
    console.log(yy);
    yy.year = 2024
    console.log(xx);
    console.log(yy);

코드를 다시보면 첫 번째 줄에서 프로퍼티 하나를 가진 객체를 변수 x에 할당하고 있으며

이러면 어딘가에서 이 객체가 만들어지고 

이 객체와 이어지는 길이 변수 xx에 이어지게 된다.

 

그리고 두 번째 줄에서는 변수 yy에 xx를 할당해 주고있는데 

변수 x에는 객체 값이 담긴 게아니라 객체로 가는 길이 열려있기 때문에 그 길이 복사 되는 것이다.

 

그렇기 때문에 xx와 yy가 서로 같은 객체를 바라보게 되고

그래서 yy만 '2024'로 수정했지만 결과적으로 xx도 같이 수정 된 것처럼 보이는 것이다.

 

이렇게 주소 값을 참조해서 그 값에 접근하기 때문에

객체와 같은 자료형을 참조형(Reference Type) 라고 한다.

---

또한 배열도 객체이니까 참조형이기 때문에 한번 살펴보자

    let xxx = [1, 2, 3]
    let yyy = xxx

    console.log(xxx);
    console.log(yyy);
    yyy[2] = 4
    console.log(xxx);
    console.log(yyy);

배열도 마찬가지로 변수에 할당될 때

배열 자체가 변수에 담기는 것이 아니라 주소값이 담긴다.

 

그래서 이 변수 xxx를 yyy에 복사하게 되면 주소값이 복사되고

yyy에 2번 인덱스 값을 수정하게 되면 

결과적으로 xxx도 함께 수정된다는 것이다.

 

---

정리해보면 기본형 값을 변수에 담아 사용할 때는

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

해당 객체를 가리키는 주소값이 할당된다는 특징을 살펴 봤다.

 

그래서 참조형의 경우에는 변수를 통해 다른 변수에 할당되면 

값 자체가 복사되는 것이 아니라 주소값이 복사되기 때문에

결국은 같은 객체를 가리키게 되고

결과적으로 한쪽을 수정하면 다른 한쪽도 같이 수정이 된다는 점을 기억해두자.

 

기본형과 참조형은 자바스크립트뿐만 아니라

다른 프로그래밍 언어에서도 모두 적용되는 기본적인 개념이므로

잘 이해해두면 유용하게 활용 할 수 있다.

---

★GitHub 주소 (기본형과 참조형)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/10-%EC%9E%90%EB%A3%8C%ED%98%95(%EC%8B%AC%ED%99%94)/6.%EA%B8%B0%EB%B3%B8%ED%98%95%2C%EC%B0%B8%EC%A1%B0%ED%98%95.html

JavaScript_soloPlay/Basic/10-자료형(심화)/6.기본형,참조형.html at main · SeopE9611/JavaScript_soloPlay