[Javascript] 변수의 Type(원시형과 참조형)

원시 자료형(Primitive Type)과 참조 자료형(Reference Type)

자바스크립트에는 타입(Type)이라는 개념이 존재하는데, 변수에는 다양한 타입이 존재한다.

 

데이터에는 '원시 자료형'과 '참조 자료형'이라는 2가지 타입이 존재하는데, 원시 자료형이 할당될 때에는 변수에 값 자체(Value)가 담기고 참조 자료형이 할당될 때는 주소(Reference)가 담긴다.

 

원시 자료형(Primitive Data Type, 원시 타입)

• 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입
• 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있다.
• 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있다.
• string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 따지면 객체이다. 빈 참조를 나타내는 데 자주 사용된다.
• ( number : 3.141592 / string : ‘Hanamon’ / boolean : true & false / undefined : 변수가 정의되지 않았거나 값이 없다 / null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다. / symbol )

참조 자료형(Reference Data Type, 참조 타입)

• 연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(object) 타입
• 자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다.
• 참조형은 원시형 데이터의 집합이다.
• 배열([])과 객체({}), 함수(function(){})가 대표적이다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니다.
• 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
• 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다.
• 배열 – Array : [0,1,2,3,4]
• 객체 – Object : {name : “Hanamon”, age : 16}

👉🏻 즉, 변수에는 하나의 값 혹은 주소만 저장할 수 있다.

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

1. 원시 타입은 변경이 불가능한(immutable) 값이다. 반면에 객체(참조) 타입은 변경 가능한(mutable) 값이다.

2. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장 된다. 반면에 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장 된다.

3. 원시 값을 가진 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 call by value 또는 pass by value 라고 한다. 반면에 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 call by reference 또는 pass by reference 라고 한다.

Q.  const로 선언된 변수 배열에 Array.push를 적용할 수 있는 이유는?

배열은 참조형이기 때문에 데이터의 주소를 대입할 수 있기 때문이다.

• 값이 저장된 주소값을 할당한다.
• 비어있는 데이터 공간을 확보하고 객체 속 프로퍼티에 대한 공간을 다시 확보한다.
• 객체의 프로퍼티명과 주소를 매칭하고 확보했던 두 번째 주소에 데이터를 할당한다.
• 변수를 선언하면 데이터가 담길 공간을 확보하고, 확보된 데이터의 주소 값을 가지고 변수명과 매칭시키는 선언과정까지 동일하나, 할당과정에서 차이가 있다.

 

자바스크립트 속성(Property)과 메소드(Method)

Array 배열 내부에 있는 값은 ‘요소’
Object 객체 내부에 있는 값은 ‘속성’

• 배열의 요소처럼 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
• 객체의 속성 중 함수 자료형인 속성을 메소드(Method)라고 부른다.

 

자바스크립트 연산자 typeof

typeof는 변수의 데이터 타입을 반환하는 연산자이다.(🚨주의 : 참조형 데이터인 배열과 객체를 구분하지 못한다.)

typeof variable

typeof (variable)

반환 값

• undefined : 변수가 정의되지 않았거나 값이 없을 때
• number : 데이터 타입이 수일 때
• string : 데이터 타입이 문자열일 때
• boolean : 데이터 타입이 불리언일 때
• function : 변수의 값이 함수 일 때
• symbol : 데이터 타입이 심볼일 때
• object : 배열이거나 객체일 때 (사실 배열도 객체이다. 그래서 배열인지 객체인지 구분해주는 방법은 따로있다.)

 

엄밀한 비교 ( ===와 !==의 필요성)

❗️자바스크립트 : ‘==’와 ‘===’는 다르다!

‘===’는 비교하는 변수의 값 뿐만 아니라 변수의 형식이 동일하지 않은 경우도 확인한다.

 

즉, ‘===’는 변수 유형을 고려한다.

반면 ‘==’는 변수 값을 기반으로 유형을 수정한다.

 

출처 : https://hanamon.kr/javascript-%EB%B3%80%EC%88%98%EC%9D%98-%ED%83%80%EC%9E%85-%EC%9B%90%EC%8B%9C%ED%98%95%EA%B3%BC-%EC%B0%B8%EC%A1%B0%ED%98%95/

추가적으로 참조하면 좋을 만한 자료 :  https://devowen.com/481

[JS] 원시 타입과 객체 타입, 그리고 불변성에 관하여