티스토리 뷰

개발공부/🟨 JavaScript

[JS] 값(value)

2023. 4. 18. 19:12

자바스크립트에서는 값이 항상 특정 자료형, 예를 들어 문자열이나 숫자와 같은 형태로 존재한다.

그리고 자바스크립트 언어 레벨에서 값으로 취급하는 것은 무엇이든 변수에 넣을 수 있다는 원칙이 있다.

 

자바스크립트에서는 값으로 취급하는 범위가 매우 넓은데 숫자나 문자열뿐만 아니라 함수, 배열 등도 모두 값으로 취급한다.

또한, 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다.

let foo = 42;	// foo는 Number 타입이었다가
foo = "bar";	// 이제 foo는 String 타입이 되었고
foo = true; 	// 지금은 Boolean 타입이 되었다.

 

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 변할 수 있는 언어를 "동적 타입 언어"라고 한다.

 

 

 

 

✅ 원시 값 (Primitive Value)

Object 타입을 제외한 모든 타입은 언어의 최하위 수준에서 직접 표현되는 불변 값을 정의한다.

이러한 타입의 값이 원시 값이다.

 

기본 자료형이라고도 한다.

 

- Null

- Undefined

- Boolean

- Number

- Bigint

- String

- Symbol

 

 

 

Null 타입

값이 비어있음을 의미한다. 개념적으로, 객체가 없음을 의미한다.

Null 타입은 null이라는 오직 하나의 값만 가질 수 있다.

let foo = null;

 

다른 언어에서 null은 "존재하지 않는 객체에 대한 참조"나 "널 포인터(null pointer)"를 나타낼 때 사용한다.

하지만 자바스크립트에서 null은 "존재하지 않는 값(nothing)", "비어있는 값(empty)", "알수없는 값(unkown)"을 나타낼 때 사용한다.

 

 

 

 

Undefined 타입

값이 없음을 의미한다.

Undefined 타입은 undefined라는 오직 하나의 값만 가질 수 있다.

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

 

값이 할당되지 않은 상태를 나타낼 때 사용하고, 명시적으로 변수에 undefined를 할당할 수도 있지만 그런 경우 undefined보다 null을 사용하는 것을 권장한다.

 

 

 

 

Boolean 타입

논리 요소를 나타내며, true와 false 두 가지의 값을 가질 수 있다.

 

Boolean 타입은 긍정(true)이나 부정(false)을 나타내는 값을 저장할 때 사용한다.

let loveDay6 = true;	// 참
let hateDay6 = false;	// 거짓

 

또한, 비교 결과를 저장할 때도 사용된다.

let isGreater = 4 > 1;	// true

 

 

 

 

 

Number 타입 (숫자형)

Number 타입은 정수 및 부동소수점 숫자를 나타낸다.

조금 더 디테일하게 말하자면, 배정밀도 64비트 이진 형식 IEEE 754 값이라고 한다.

let n1 = 123;
let n2 = 45.678;

 

Number 타입에는 일반적인 숫자 외 Infinity, -Infinity, NaN 같은 특수 숫자 값이 포함된다.

 

Infinity는 문자 그대로 무한대, - Infinity는 -무한대를 나타내고, NaN은 Not a Number라는 뜻으로 산술 연산의 결과를 숫자로 표현할 수 없을 때 발생하는 특별한 종류의 Number 타입이다.

console.log(6 / +0);		// Infinity
console.log(6 / -0);		// -Infinity
console.log("데이식스" / 6);	// NaN

 

 

 

 

BigInt 타입

임의 정밀도를 정수로 나태낼 수 있는 숫자 원시 값이다.

Number타입의 안전한 정수 제한을 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있다.

 

자바스크립트 내부 표현 방식 때문에 2^53-1 (9007199254740991)보다 큰 값 혹은 -(2^53-1)보다 작은 정수는 Number 타입을 사용해 나타낼 수 없다. 하지만 BigInt 타입을 사용하면 길이의 제한이 없는 정수를 나타낼 수 있다.

 

보통의 상황에서 이렇게 큰 숫자를 사용할 일이 잘 없긴 하지만 암호 관련 작업같은 아주 큰 숫자가 필요한 경우나 아주 높은 정밀도로 작업을 해야하는 경우 BigInt 타입의 숫자가 필요할 수 있다.

 

정수 끝에 n을 추가하거나 BigInt() 함수를 호출해 생성할 수 있다.

const x = BigInt(Number.MAX_SAFE_INTEGER);	// 9007199254740991n
const bigInt = 1234567890123456789012345678901234567890n;

 

또한, BigInt 타입은 소수를 나타낼 수는 없다.

BigInt 타입 연산 등의 조금 더 자세한 내용은 여기를 참고하면 읽어볼 수 있다.

 

 

 

 

String 타입 (문자열)

텍스트 타입의 데이터를 나타내며, UTF-16 코드 단위 수를 나타내는 16비트 부호 없는 정소 값의 나열로 인코딩된다.

 

자바스크립트에서 문자열은 따옴표로 묶어서 사용하는데 따옴표의 종류는 세 가지가 있다.

let str = "Hello";				// 큰 따옴표
let str2 = 'Single quotes are ok too';		// 작은 따옴표
let phrase = `can embed another ${str}`;	// 역 따옴표 (백틱)

 

String의 각 요소는 String 내부의 위치를 차지한다. 첫번째 요소는 index 0, 그 다음 요소는 index 1, ...

 

String의 길이는 UTF-16 코드 단위의 수 이며, 실제 유니코드 문자 수와 일치하지 않을 수 있다.

 

String은 생성되면 수정할 수 없다. String 메서드는 현재 String의 내용을 기반으로 새 String을 만든다.

ex) substring(), concat()

 

문자열에 대한 자세한 내용도 여기를 참고해서 더 알아보도록 하자.

 

 

 

 

Symbol 타입

Symbol은 고유하고 변경 불가능한 원시 값이며 객체의 속성 키로 사용할 수 있다.

객체의 고유한 식별자를 만들 때 사용된다.

 

 

 

 

 

✅ 객체 (Object)

 

컴퓨터 과학에서의 객체란 식별자로 참조할 수 있는 메모리 상의 값을 말한다.

자바스크립트에서 기본 자료형 외의 거의 모든 데이터 타입은 Object라고 생각하면 된다.

 

객체는 한가지만 표현할 수 있는 원시 값과 다르게 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

 

자바스크립트에서 객체는 유일한 변경 가능한 값이다.

 

 

 

 

 

 

✅ typeof 연산자

 

typeof 연산자는 인수의 자료형을 반환한다.

자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용한 연산자이다.

typeof null		// "obejct"
typeof undefined	// "undefined"
typeof true		// "boolean"
typeof 0		// "number"
typeof 10n		// "bigint"
typeof "foo"		// "string"
typeof Symbol("id")	// "symbol"

 

 

null을 제외한 모든 원시 값은 typeof 연산자로 테스트할 수 있다.

하지만 null의 경우 typeof null은 "object"를 반환하므로 비교를 통하여 null을 테스트해야 한다.

let foo = null;
console.log(foo === null);	// true

 

 

 

 

 

 

 

 

참고자료

🔗 [패스트캠퍼스] 김민태의 프론트엔드 아카데미 : 제1강 JavaScript&TypeScript Essential

🔗 [MDN] 자바스크립트의 타입과 자료구조

🔗 [모던 자바스크립트 튜토리얼] 자료형

반응형

'개발공부 > 🟨 JavaScript' 카테고리의 다른 글

[JS] Parallax Scrolling 구현하기  (0) 2024.04.18
[JS] 식별자 (Identifier)  (0) 2023.04.09
[JS] 프로토타입 (Prototype)  (0) 2023.02.19
[JS] 자바스크립트 비동기 처리  (0) 2023.01.29
[JS] 호이스팅 (Hoisting)  (0) 2023.01.18
프로필사진
개발자 삐롱히

프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그