☰
고운소리의 블로그

DataType과 변수

Section

요즘 핫한 TS가 아닌 원래의 기본 JS는 동적 타입(느슨한 타입) 언어이기 때문에 타입을 미리 선언할 필요가 없다.

기본 자료형 ( Primitive )

◾ boolean

다른 언어들과 마찬가지로 true와 false값을 갖는다.

◾ null

값이 비어있다는 것을 표시하는 데이터 형으로 비교 연산시 false로 취급한다.
값이 존재하지 않는 다는 것(변수가 어떤 객체도 가리키고 있지 않음)을 의도적으로 가리키기 위해 사용하기 때문에 typeof null연산에 object를 반환한다.

◾ undefined

전역 객체의 속성을 가리키는 값으로 변수에 값을 할당하지 않은 상태이다.

null == undefined; //true
null === undefined; //false

undefined도 비교 연산시 false로 취급한다.
때문에 null과 동등 연산(==)시 true이지만, 엄연히 다른 타입이기 때문에 null과 일치 연산자(===)시에 false가 반환된다.

◾ number

다른 언어들과는 다르게 고정/부동 소수점 방식에 따라 자료형을 나누지 않고 통일된 형태로 사용된다.

const bigInt = 123456789n;

타입의 표현 범위는 -(2^53-1) ~ 2^53-1이다.
이보다 더 큰 숫자를 표현 하고 싶다면 숫자 끝에 n을 붙인 BigInt형을 사용할 수도 있다.

Infinity

이름 그대로 가장 큰 값(∞)을 표현하는 데 사용되고, 다른 언어들과 달리 특정 숫자를 0으로 나눌 수 있는데 이때 Infinity값이 반환된다.

또한, Js는 0을 +0과 -0 두가지로 표현할 수 있는데, 나누는 부호에 따라 Infinity도 부호가 결정된다.

NaN

약자 그대로 숫자가 아니라는 것을 표현하는 값이다.

console.log('문자열 나누기 숫자' / 2); //NaN


◾ String

2byte의 unsigned 정수값 들의 집합이다.
한번 생성되면 immutable 하다.

◾ symbol

유일하고 immutable한 원시 값이기 때문에, 객체의 식별자(일종의 private한 key값)에 사용된다.

Symbol() 메서드를 이용하여 고유한 심볼값을 반환받을 수 있다.

Symbol('ex') === Symbol('ex'); //false
Symbol('ex') == Symbol('ex'); //false

var ex = new Symbol(); //error
Symbol(12) + 1; //error
Symbol(12) + '1'; //error
typeof Symbol() === 'symbol';

특징

  • 비열거형 (for…in사용 불가)

  • new 키워드를 지원하지 않는다.

  • 숫자나 문자열로 형변환 되지 않는다. (TypeError)

  • Object.getOwnPropertyNames() 메서드에서 심볼 속성은 반환되지 않는다.

    • JSON.stringify()에서도 무시된다.

  • Object.assign() 은 심볼포함 모든 프로퍼티를 복사한다.

  • Symbol.for() 을 통해 전역 심볼을 만들 수 있다.


객체

let user = { name: 'hong' };
let user2 = new Object();

식별자를 통해 참조할 수 있는 Refrerence Type 이다.

여러 데이터들을 담을 수 있는 데이터타입으로 일종의 collection.
key와 value를 쌍으로 갖는 데이터 타입으로 key에는 문자열만 올 수 있따.

객체 안의 데이터를 변환하지 못하게 하는 속성이나 객체에 접근할 수 있게 하는 속성 두개의 속성이 있으며 둘 중 한개만 갖을 수 있다.

◾ 데이터 속성

객체 내 데이터를 수정하지 못하게 하는 속성

  • [[Writable]] : 객체안의 값의 수정 권한을 지정 (true면 수정 가능)

  • [[Enumerable]] : 열거형으로 사용 가능한지 지정 (true면 열거형으로 for…in 사용가능)

  • [[Configurable]] : false라면 Configurable과 Enumerable을 수정이 불가능하다.

◾ 접근자 속성

객체내 접근자 함수(get/set)를 기술하는 속성

  • [[Get]] : 객체 내의 get 키워드를 통해 정의된 메서드를 호출하고 그 반환값을 가져온다.

  • [[Set]] : 할당된 값을 인자로 객체 내의 set 키워드를 통해 정의된 메서드를 호출

  • [[Enumerable]] : 열거형으로 사용 가능한지 지정

  • [[Configurable]] : flase라면 Configurable과 데이터 속성을 수정할 수 없다.


Primitive Wrapper Object (원시 래퍼 객체)

앞서 나열한 원시값이 메서드나 프로퍼티에 접근할 수 있게 해주는 특수 객체

String, Number, Boolean, Symbol과 같다.

let user = 'hong';
console.log(user.toUpperCase()); //HONG

원시값을 래퍼객체의 함수를 이용하여 접근하는 순간 래퍼 객체가 자동으로 만들어져 메서드를 이용하고 반환값을 반환한 후 래퍼 객체는 자동 소멸된다.

Array

순서가 있는 객체를 표현하고, key를 문자열이 아닌 정수를 갖을 수 있는 객체

let user = ['hong', 'kim'];

alert(user[1]); //kim

대괄호 []로 표현이 가능하고 key를 정수로 접근이 가능하다.

그 외 Set, Map 등이 객체에 속한다.



형변환

◾ 명시적 형변환

typeof String(1); //"string"
typeof Number('1'); //"number"
typeof Boolean(0); //"boolean"

console.log(Number('12')); //12
console.log(Number('hello')); //NaN
console.log(Number(undefined)); //0
console.log(Number(NaN)); //0
console.log(Number(null)); //0

console.log(Boolean(0)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(NaN)); //false

형 변환을 명시적으로 해주는 것으로 예제와 같은 결과값을 갖는다.

◾ 자동 형변환

명시적으로 지시 하지 않아도 대부분 자동형변환을 통해 적절하게 변환된다.

이를 이용해 String을 숫자로 쉽게 변환 시킬 수 있다.

console.log(typeof +'11'); //number
console.log(typeof 1 * '11'); //number
console.log(typeof '11' / 1); //number

연산을 수행해도 값이 변하지 않는 1을 곱하거나 나누는 방식이나 +연산자를 붙이는 방법으로 쉽게 변환이 가능하다.

하지만, String이 모두 숫자가 아닌 문자가 섞여있다면 NaN을 반환하기 때문에 parseInt()/parseFloat()을 사용해 앞에서부터 읽을 수 있는 자리까지 변환 하는 방법이 있다.

console.log(+'100a'); //NaN
console.log(parseInt('100px')); //100
console.log(parseInt('12.3')); // 12, 정수 부분만 반환
console.log(parseFloat('12.3.4')); // 12.3, 첫번째 점까지만 반환
console.log(parseInt('a123')); // NaN



Refernece

https://ko.javascript.info/