JavaScript 자바스크립트 원시타입과 참조타입 알아보기

자바스크립트 원시타입과 참조타입

자바스크립트는 동적 타입 언어로, 변수를 선언할 때 타입을 명시하지 않아도 됩니다. 그러나 모든 값은 내부적으로는 원시타입 또는 참조타입 중 하나로 분류됩니다.

원시타입이란?

자바스크립트의 원시 타입은 불변(immutable)하며, 값 자체가 메모리에 직접 저장됩니다.

원시 타입은 총 6가지가 있습니다.

1. string: 문자열을 나타냅니다. 문자열은 작은따옴표(”), 큰따옴표(“”), 또는 백틱(“)으로 감싸져 있습니다.
2. number: 숫자 값을 나타냅니다. 정수 및 부동 소수점 숫자를 모두 포함합니다.
3. boolean: 논리적인 참(true) 또는 거짓(false) 값을 나타냅니다.
4. undefined: 값이 할당되지 않은 변수의 기본 값입니다.
5. null: 값이 존재하지 않음을 나타냅니다.
6. symbol: 유일한 식별자를 만들 때 사용됩니다. (ES6부터 도입)

이러한 원시 타입들은 각각의 값을 직접적으로 변수에 저장하므로,
서로 다른 변수 간에는 독립적으로 존재합니다.
예를 들어, 변수에 할당된 값이 변경되더라도 다른 변수에는 영향을 주지 않습니다.
원시 타입은 불변성을 가지고 있어 값이 변경되지 않습니다.
즉, 한 번 생성된 값을 변경할 수 없습니다.
이러한 특성은 예측 가능하고 안정적인 코드를 작성하는 데 도움을 줍니다.

참조타입이란?

자바스크립트에서 참조 타입은 객체(object) 기반의 타입을 말합니다. 참조 타입의 값은 객체이며, 이러한 객체는 메모리의 특정 위치에 저장되어 있습니다. 참조 타입은 원시 타입과는 다르게 값이 직접 변수에 저장되는 것이 아니라, 변수에는 객체의 메모리 주소가 저장되고 해당 주소를 통해 실제 값에 접근합니다.

자바스크립트에서 흔히 사용되는 참조 타입에는 다음과 같은 것들이 있습니다

1. 객체(Object): 키-값 쌍의 집합으로 이루어진 데이터 구조를 표현합니다. 객체는 중괄호 {}를 사용하여 생성하며, 속성(프로퍼티)들을 포함할 수 있습니다.
2. 배열(Array): 순서가 있는 값들의 목록을 나타냅니다. 배열은 대괄호 []를 사용하여 생성하며, 각 값은 쉼표로 구분됩니다.
3. 함수(Function): 일련의 명령문을 실행하는 코드 블록을 나타냅니다. 함수는 일급 객체로 취급되어 변수에 할당하거나 다른 함수에 매개변수로 전달될 수 있습니다.
4. Date 객체, RegExp 객체 등: 자바스크립트에는 다양한 내장 참조 타입이 있습니다.

참조 타입의 특징은 다음과 같습니다.

• 가변성(Mutability): 참조 타입은 값을 변경할 수 있습니다. 객체나 배열의 내용을 수정하면 해당 객체나 배열이 가리키는 메모리 내용이 변경됩니다.
• 복사 시 참조 전달(Copy by Reference): 변수 간에 값이 복사될 때 참조(메모리 주소)가 복사되어 변수가 같은 객체를 참조하게 됩니다.
• 동적 프로퍼티 추가 및 삭제: 객체의 속성은 동적으로 추가하거나 삭제할 수 있습니다.

원시타입 예제

string

문자열을 나타냅니다.
문자열은 작은따옴표(”), 큰따옴표(“”), 또는 백틱(“)으로 감싸져 있습니다.

let greeting = "Hello, World!";
console.log(greeting); // Hello, World!

number

숫자 값을 나타냅니다. 정수 및 부동 소수점 숫자를 모두 포함합니다.

let myNumber = 12;
let floatingPointNumber = 3.14;
console.log(myNumber); // 12
console.log(floatingPointNumber); // 3.14

boolean

논리적인 참(true) 또는 거짓(false) 값을 나타냅니다.

let isTrue = true;
let isFalse = false;
console.log(isTrue); // true
console.log(isFalse); // false

undefined

값이 할당되지 않은 변수의 기본 값입니다.

let variable;
console.log(variable); // undefined

null

값이 존재하지 않음을 나타냅니다.

let nullValue = null;
console.log(nullValue); // null

symbol

유일한 식별자를 만들 때 사용됩니다. (ES6부터 도입)

const uniqueKey = Symbol("unique");
console.log(uniqueKey); // Symbol(unique)

참조타입 예제

객체(Object)

키-값 쌍의 집합으로 이루어진 데이터 구조를 표현합니다. 객체는 중괄호 {}를 사용하여 생성하며, 속성(프로퍼티)들을 포함할 수 있습니다.

let person = { name: "John", age: 20 };
console.log(person); // { name: "John", age: 20 }

배열(Array)

순서가 있는 값들의 목록을 나타냅니다. 배열은 대괄호 []를 사용하여 생성하며, 각 값은 쉼표로 구분됩니다.

let colors = ["red", "green", "blue"];
console.log(colors); // ["red", "green", "blue"]

함수(Function)

일련의 명령문을 실행하는 코드 블록을 나타냅니다. 함수는 일급 객체로 취급되어 변수에 할당하거나 다른 함수에 매개변수로 전달될 수 있습니다.

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("John"); // Hello, John!

결론

자바스크립트에서는 원시 타입과 참조 타입이 서로 다른 동작 방식을 가지고 있습니다. 이러한 차이를 이해하면 변수 할당, 함수 호출, 데이터 전달 등 다양한 상황에서 예상치 못한 동작을 방지하고 더 효율적인 코드를 작성할 수 있습니다. 원시 타입과 참조 타입을 함께 사용하여 자바스크립트의 다양한 기능을 활용하는 것이 중요합니다.