JS의 자료형

 

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.

이번에는 이 녀석을 살펴봅시다.

자바스크립트에서 변수는 자료형에 관계없이 모든 데이터가 가능합니다.

이게 무슨 말이냐면 어떤 변수를 let 키워드를 통해 선언한 뒤 문자열을 할당했다고 가정합시다.

여기서 저는 다시 이 변수에 숫자를 할당할 수 있습니다.

let a = "Hello";
a = 10
// 에러 상황이 아님. 정상적인 상황

따라서 어떤 순간에는 문자열일 수도, 어떤 순간에는 숫자일 수도, 또 어떤 순간에는 다른 자료형일 수도 있습니다.

이처럼 데이터의 타입이 존재하긴 하지만 타입이 언제든지 바뀔 수 있는 언어를 동적 타입 언어라고 합니다.

자바스크립트는 이에 속하겠죠.

이제 본격적으로 알아봅시다.

원시 타입과 객체 타입

자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 구분됩니다.

원시 타입에는 숫자나 문자열 등 기본적인 타입들이 포함되고, 객체 타입에는 배열이나 함수, 객체 리터럴 등 복합적인 데이터 구조가 포함됩니다.

두 타입은 메모리 저장 방식과 동작에 차이가 있습니다.

원시 타입

자바스크립트에서 제공하는 원시 타입은 7가지가 있습니다.

데이터 타입	설명
number	숫자 타입 (정수, 실수 구분 없이 하나의 타입으로 취급)
string	문자열 타입
boolean	불리언 타입 (true 또는 false)
undefined	값이 할당되지 않은 상태를 나타내는 타입
null	값이 없음을 표현하는 특별한 타입
symbol	ES6에서 추가된 심볼 타입 (고유한 식별자)
bigint	큰 정수를 표현하기 위한 빅인트 타입 (ES2020 추가)

원시 타입의 주요 특징은 불변성과 값 자체의 복사입니다.

• 불변성: 원시 값은 변경 불가능한 값입니다.새로운 문자열을 생성하는 방식으로만 변경이 가능합니다.이러한 특성을 불변성이라고 부릅니다.
• 숫자도 마찬가지로 한 번 생성된 숫자 값 자체를 변경할 수는 없고, 산술 연산을 하면 새로운 숫자 값이 만들어집니다.
• 예를 들어 문자열 "Hello"가 있으면, 이 문자열의 일부 문자를 바꾸는 것과 같은 직접 수정은 할 수 없습니다.
• 값 복사: 원시 값을 변수에 할당하면, 그 변수에는 실제 값 자체가 저장됩니다.즉 두 변수는 완전히 독립적인 값을 가지며, 한쪽을 변경해도 다른 쪽에 영향을 미치지 않습니다.
• 그리고 한 변수의 원시 값을 다른 변수에 복사(할당)할 경우, 값의 복사본이 생성됩니다.

  

  https://dev.to/iamgjert/copy-by-value-vs-reference-1bd3

let score1 = 90;
let score2 = score1;   // score1의 값을 score2에 복사
score2 = 100;          // score2의 값을 변경

console.log(score1); // 90 (score1은 영향을 받지 않음)
console.log(score2); // 100 (score2는 독립적으로 변경된 값)

let greeting1 = "안녕하세요";
let greeting2 = greeting1;  // 문자열 값 복사
greeting2 = greeting2 + " 여러분";
// 문자열 결합으로 새로운 문자열 생성

console.log(greeting1); 
// "안녕하세요" (greeting1은 원래 값 그대로)
console.log(greeting2); 
// "안녕하세요 여러분" (greeting2는 새 문자열을 가리킴)

객체 타입

객체 타입은 원시 타입이 아닌 모든 값들입니다.

예를 들어서 Onject, Array, Function, Date 등은 모두 객체 입니다.

객체 타입의 변수는 원시 타입과는 다른 방식으로 동작하며 주요한 특징은 참조에 의한 저장입니다.

• 객체는 변경 가능한 값입니다.
  이 말의 의미는 객체나 배열 내부 요소의 내용들 자유롭게 바꿀 수 있다는 것을 의미합니다.
  한번 생성한 객체는 나중에 새로운 속성을 추가하거나 기존 속성을 변경, 삭제 하는 것이 가능합니다.
• 참조에 의한 저장이란 객체를 변수에 할당하면 변수에는 실제 객체 값이 저장되는 것이 아니라 객체의 참조 값(메모리 주소)가 저장되는 것을 말합니다.
  객체 자체의 데이터는 자바스크립트 엔진이 힙 영역에 저장하고, 변수는 스택 영역에 그 객체 데이터의 메모리 주소가 들어있습니다.
  요약하면 변수가 직접 값 자체를 들고 있는 것이 아니라 값이 있는 곳을 화살표로 가리키고 있다고 생각할 수 있습니다 (C언어에서 포인터 처럼요)
• 참조 복사는 객체 타입 변수를 다른 변수에 할당하면 객체의 참조 값이 복사되는 것을 말합니다.. 즉, 새로운 독립적인 객체가 만들어지는게 아니라 두 변수가 동일한 객체를 가리키게 됩니다.
  따라서 한 변수를 통해서 객체의 내용을 바꾸면 그 객체를 가리키는 다른 변수에서도 변경된 결과를 가지게 됩니다

https://dev.to/iamgjert/copy-by-value-vs-reference-1bd3

아래 객체와 배열일 때의 예시를 통해서 위 내용들을 쉽게 이해해보겠습니다.

//객체일 때
let obj1 = { value: 5 };
let obj2 = obj1;     
// 객체 참조를 복사 (obj1과 obj2가 같은 객체를 가리킴)

obj2.value = 10;     
// obj2를 통해 객체의 내용을 변경
console.log(obj1.value); 
// 10 (obj1을 통해 값 확인 - 변경 내용이 반영됨)

obj2 = { value: 7 }; 
// obj2에 새로운 객체 할당 (이제 obj2는 다른 객체를 가리킴)
console.log(obj1.value); 
// 10 (obj1은 여전히 원래 객체를 가리킴)
console.log(obj2.value); 
// 7  (obj2는 새로운 객체의 값을 가리킴)

위 코드에서 처음에 obj1과 obj2는 같은 객체를 가리키고 있기 때문에, obj2.value를 변경하면 obj1.value도 함께 변합니다.

실제로는 하나의 객체 { value: 5 }가 있고, 그 객체를 두 변수가 함께 참조(reference)하고 있기 때문입니다.

그러다가 obj2에 새로운 객체를 할당하면, obj2는 더 이상 기존 객체를 참조하지 않고 독립된 다른 객체를 가리키게 됩니다.

이제 obj1과 obj2는 서로 다른 객체를 가리키므로 영향을 주고받지 않습니다.

// 배열일 
let arr1 = [1, 2, 3];
let arr2 = arr1;    
// 배열 참조를 복사 (arr1과 arr2가 같은 배열을 가리킴)

arr2.push(4);       
console.log(arr1); 
// [1, 2, 3, 4] (arr2를 통해 추가한 요소가 arr1에서도 보임)

arr2[0] = 99;
console.log(arr1); 
// [99, 2, 3, 4] (같은 배열이므로 첫 번째 요소 변경이 공유됨)

arr1과 arr2가 동일한 배열 객체를 가리키고 있기 때문에, arr2로 배열을 수정하면 arr1에서도 수정 결과가 나타납니다.

객체 타입 변수 간의 할당은 새로운 복사본을 만드는 것이 아니며, 단지 참조(주소 값)만 복사된다는 점이 중요합니다.

요약하면, 원시 타입 변수는 값을 직접 저장하고 복사 시 독립적인 값이 생성되지만, 객체 타입 변수는 값이 있는 위치를 가리키는 참조를 저장하며 복사 시 동일한 객체를 가리키는 참조가 하나 더 늘어나는 것입니다.

이런 차이 때문에 객체를 복사할 때는 원본과 사본의 관계에 주의해야 합니다.

숫자형 (number)

숫자형은 정수와 부동소수점 숫자를 나타냅니다.

숫자이기 때문에 다양한 연산이 가능합니다. (곱셈, 나눗셈, 덧셈, 뺄셈, … )

숫자형에는 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 특수 숫자 값도 포함됩니다.

Infinity, -Infinity 는 이름처럼 +무한대와, -무한대를 의미합니다.

무한대는 아래와 같은 상황에서 발생합니다.

console.log(1/0); // Infinity
console.log(Infinity); // 값을 직접 사용할 수도 있습니다.

Nan 은 Not a Number의 약자로 숫자가 아닌 값을 의미합니다. 이건 계산 중 에러가 발생했다는 알려주는 값입니다. 따라서 수학 연산이 정상적으로 수행되지 못한다면 Nan 값이 반환됩니다.

아래와 같은 예시가 있을 수 있습니다.

console.log("Hello" / 2); //Nan
console.log("호호호" / 2 + 5); //Nan

Nan 언뜻 생각해보면 숫자가 아니지만 타입은 숫자, number입니다!

문자형 (string)

자바스크립트에서는 문자열을 따옴표로 묶습니다.

let str1 = "abcd";
let str2 = 'welcome to likelion';
let str3 = `this is backtick`;

따옴표로 사용할 수 있는 문자는 3종류가 있습니다.

1. 큰 따옴표
2. 작은 따옴표
3. 역 따옴표 (backtick)
   (백틱은 보통 Tab 키 위에있어요!)

자바스크립트는 작은 따옴표와 큰 따옴표를 구분하지 않습니다. 똑같습니다

역 따옴표로 변수나 표현식을 감싼 후 ${...}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

let myName = "Kyeongwoo Kim";
alert(`Hello, ${myName}!`); // output: Hello, Kyeongwoo Kim!
alert(`lets add something: 1 + 2 = ${1 + 2}`); // output: lets add something: 1 + 2 = 3

${...} 안에는 myName 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있습니다.

이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝나면 문자열의 일부가 됩니다.

자바스크립트는 C나 Java와 다르게 char 형이 없습니다!

오로지 문자형만 사용하며 여기에 문자가 하나 혹은 여러 개가 들어가는 겁니다!

불리언형 (boolean)

불리언형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

let imTrue = true;
let imFalse = false;

위처럼 직접 boolean을 변수에 할당할 수도 있습니다.

혹은 아래처럼 비교식을 통해서도 값의 할당이 가능합니다

let bigger = 4 > 1; // 값은 true가 할당됨

null 값

null은 어느 자료형에도 속하지 않습니다.

null은 값이 없다는 것을 명시적으로 나타내기 위해 사용하는 값입니다. 다시 말해 우리가 의도적으로 비워놓은 상태를 말합니다.

let myBrain = null; // 🙃

let myBrain = null; 은 myBrain 을 알 수 없거나 그 값이 비어있음을 말합니다.

undefined 값

undefined는 값이 할당되지 않은 상태를 말합니다.

변수 선언은 했지만 값을 할당하지 않고 해당 변수를 읽으면 undefined가 출력됩니다.

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

직접 undefined를 할당할 수도 있긴 합니다.

let universe = "wonderful";
universe = undefined;
console.log(universe); // undefined

하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다.

변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하는 걸 권장합니다.

undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

객체 (Object)

객체는 다양한 데이터를 담을 수 있습니다.

객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.

객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용됩니다.

빈 객체를 만드는 방법은 두 가지가 있습니다.

let student = new Object();
let student = {};

중괄호를 이용해서 객체를 선언하는 것을 객체 리터럴이라고 부릅니다.

보통 이 방법을 많이 사용합니다! (완전 딸깍이네요)

중괄호 안에는 키: 값 쌍으로 구성된 프로퍼티들이 들어갑니다.

let student = {
    name: "KKW",
    age: 24,
};

현재 student 객체에는 두 개의 프로퍼티가 있습니다.

1. “name” 과 “KKW”
2. “age”와 24

객체의 값에 접근하기

객체의 값에 접근할 때는 점 표기법을 사용합니다.

console.log(student.name); // KKW
console.log(student.age); // 24

점 표기법을 사용하면 프로퍼티의 값을 읽는게 가능합니다.

객체 다루기(more)

객체에 프로퍼티 추가하기

객체는 프로퍼티를 추가할 수 있습니다.

불리언형 프로퍼티를 한번 추가해 보겠습니다.

student.grade= 4;

위와 같이 하면 키가 grade 인 프로퍼티를 추가할 수 있습니다.

간단합니다. 그냥 만들고 싶은 프로퍼티에 접근해서 값을 넣어주면 됩니다.

객체의 프로퍼티 삭제하기

반대로 삭제도 가능합니다.

delete student.age;

이렇게 하면 stduent 객체에는 더 이상 키가 age 프로퍼티는 존재하지 않게됩니다.