[JavaScript] 자바스크립트의 원시값과 복합객체 이해하기

자바스크립트는 다양한 데이터 타입을 제공하여, 개발자가 효율적으로 프로그래밍할 수 있는 환경을 만들어 줍니다. 이 포스트에서는 자바스크립트의 두 주요 데이터 타입인 원시값과 복합객체에 대해 깊이 있게 탐구해보겠습니다. 이해의 편의를 위해 정의에서 시작하여, 저장 및 복사 방법, 그리고 이들의 비교 방식에 대해 자세히 설명하겠습니다.

원시값(Primitive Values)
원시값은 변경 불가능한 가장 기본적인 데이터 타입을 말합니다. 자바스크립트에서는 null, undefined, 문자열(string), 숫자(number), 불리언(boolean), Symbol, BigInt를 원시값으로 분류합니다. 이들의 특징은 다음과 같습니다:

저장 및 복사: 원시값은 변수에 할당될 때 메모리에 그 값 자체가 저장됩니다. 변수를 다른 변수에 할당하면, 원래의 값이 복사되어 새 변수에 저장됩니다.

let myString = 'hello';
let myStringCopy = myString; // 'hello' 값이 복사됩니다.
myString = 'world';
console.log(myString, myStringCopy); // 'world hello'

비교: 원시값을 비교할 때는 값 자체를 비교합니다. 따라서 같은 값을 가진 두 변수는 서로 같다고 인식합니다.

let price1 = 10;
let price2 = 10;
console.log(price1 === price2); // true

복합객체(Composite Objects)

복합객체는 여러 값을 하나의 단위로 구성할 수 있는 데이터 타입입니다. 자바스크립트에서는 객체(Object), 배열(Array), 함수(Function), 날짜(Date), 정규 표현식(RegExp) 등을 복합객체로 분류합니다. 복합객체의 특징은 다음과 같습니다:

저장 및 복사: 복합객체는 메모리에 참조(주소)로 저장됩니다. 객체를 다른 변수에 할당하면, 원본 객체의 메모리 주소가 복사되어, 두 변수가 같은 객체를 가리키게 됩니다.

let myObject = {name: "John"};
let copyOfMyObject = myObject;
myObject.age = 30;
console.log(myObject, copyOfMyObject); // 두 객체 모두 동일한 속성을 가집니다.

비교: 두 복합객체를 비교할 때는 참조(주소)를 비교합니다. 따라서, 구조적으로 동일한 두 객체라 할지라도, 메모리 상에서 다른 위치에 저장되어 있다면 다르다고 평가됩니다.

let object1 = {name: "John"};
let object2 = {name: "John"};
console.log(object1 === object2); // false

예제: 원시값과 복합객체의 동작 이해하기
원시값 예제: 문자열 원시값을 다루는 예입니다.

var string1 = "foo";
var string2 = String("foo"); // 'foo' 문자열 원시값
console.log(string1 === string2); // true

복합객체 예제: 객체의 참조를 복사하는 예입니다.

var myObject = {name: "John"};
var copyOfMyObject = myObject;
myObject.age = 30;
console.log(copyOfMyObject.age); // 30

 

복합 객체를 가리키는 변수들은 변수가 메모리에서 모두 하나의 “주소를” 가리키고 있을 떄만 서로 같다고 판단합니다.

변수를 새로 만들어 이미 존재하던 복합 객체를 가리키더라도 기존 객체를 복사하지는 않습니다.

var objA = {prop:"val"}
var pointer1 = objA;
var pointer2 = ponter1

objA.prop = null;
-> 참조하는 pointer1 과 pointer2가 모두 null로 변경된다.

 

객체를 정의하고 참조를 만든 후 객체를 갱신하면 해당 객체를 가리키는 모든 참조도 변경 됨으로 동적인 객체 속성도 가능하다.

 

* typeof 특이사항

1. null은 object로 출력된다. ( 자바스크립트 처음 설계할때 잘못설계한것으로 알고 있음)
2. function은 function으로 출력된다.
3. RegExp는 object로 출력된다.

복합객체는 동적속성으로 이루어져 있다. 따라서 사용자 정의 객체 및 대부분의 네이티브 객체는 수정할수 있는 객체입니다.

→ 하지만 이런 동작은 주의(네이티브 객체는 수많은 사람들이 사용하는데 기존과 다른 방식으로 동작하는 객체로 변경하는것이기 떄문)

객체를 인스턴스로 만들면 객체/인스턴스에는 constructor라는 속성이 자동으로 추가됩니다.

var foo = {};

console.log(foo.constructor === Object) // Object()가 foo를 만들었음으로 true

console.log(foo.constructor) // Object() 생성자 함수를 가리킨다.

어떠한 인스턴스를 다루고 있는데 인스턴스를 만든 생성자 함수를 알 수 없는 경우

이 속성을 사용하면 간편하게 생성자 함수를 찾을 수 있습니다. 이를 사용하면 어떤 인스턴스가 배열인지 객체인지 혹은 다른 자료형인지도 확인 할 수 있습니다.

var MyNumber = new Number('23');
var MyNumberL = 23;
var MyString = new String("male");
var MyStringL = "male";
var MyBoolean = new Boolean('true');
var myBoolean = true;

myNumber.constructor === Number // true
...