Javascript Types

uoM·2021년 1월 14일
0

동적 타이핑 (dynamic Typing)

자바스크립트는 동적 언어로 변수를 설정할 때 미리 타입을 지정하지 않아도 상관없다.
변수의 값에 따라 타입이 지정되기 때문이다.

var ex1 = 42;    // ex1은 이제 Number 임
var ex2 = "bar"  // ex2는 이제 String 임
var ex3 = true   // ex3는 이제 Boolean 임

데이터 타입 (Data Type)

최신 ECMAScript(ES)표준은 다음과 같은 7개의 자료형을 갖는다.

  • 원시 자료형 (Primitive) 6개
    • Null (null)
    • Boolean (True/False)
    • Undefined (값이 정해지지 않음)
    • Number (1, 2, 3.2, 4,-Infinity, +Infinity, NaN...)
    • String ('example')
    • Symbol : ES6에 추가됨
  • 참조 자료형
    • Object (+Array)
    • Function

원시 자료형 (Primitive Type)

Object를 제외한 모든 원시 자료형 (Primitive Type)은 변경 불가능한 값(immutable Value)이다.
Javascript에서는 string, number, undefined, symbol, boolean, null, bigint 이 있다.

var ex1 = "hello";
console.log(ex1); // hello
ex1 = "hi";
console.log(ex1); // hi

ex1에 hello를 할당하는 순간 문자열'hello'는 메모리에 쓰여지고,
ex1은 'hello'의 문자열 메모리 주소를 참조하게 된다.

이후 ex1에 다시 hi를 할당할 때, 문자열 'hello'의 메모리를 변경하지 않고 hi를 새로운 메모리에 작성하고 그 주소를 참조하게 된다.

이런식으로 다른 메모리에 다른 String 값을 저장해두었다가 변경되는 시점에 다른 메모리 주소를 참조하게 된다.
즉, 메모리에 할당된 데이터가 변경되지 않는다.

Boolean

True와 False 두 가지 값을 가질 수 있는 논리 타입이다.

Null

null 이라는 한 가지 값만 가질 수 있다. 보통 어떠한 객체도 결과값에 해당되지 않았음을 의미한다.

null과 undefined의 차이

typeof null          // "object"
typeof undefined     // "undefined"
null === undefined   // false
null == undefined    // true
null === null        // true
null == null         // true
!null                // true
isNaN(1 + null)      // false
isNaN(1 + undefined) // true
  • 값을 의도적으로 비웠음 null / 값을 처음부터 할당하지 않음 undefined

Undefined

값이 할당되어 있지 않음을 뜻하며 undefined라는 값을 갖는다.

Number

64비트 형식으로 정수(int)위한 타입은 없다. +infinity, -infinity, NaN, 등이 있다.

String

16비트 부호없는 정수값 요소의 집합이다.

Symbol

ES6에서 추가된 타입으로 Object의 key로 사용할 수 있다.
유일하고 변경 불가능한 기본값이다.

문법

Symbol([description])

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1);
// expected output: "symbol"

console.log(symbol2 === 42);
// expected output: false

console.log(symbol3.toString());
// expected output: "Symbol(foo)"

console.log(Symbol('foo') === Symbol('foo'));
// expected output: false

심볼에 대한 설명을 ()안에 입력할 수 있으나, 그 값을 통해 심볼에 접근하지 못한다.

참조 자료형 (Reference Type)

Object

키(key)와 값(value)의 조합으로,
속성은 key를 통해 식별된다. key는 String 또는 Symbol로 이루어져 있다.

value는 기본 타입의 모든 값이 할당될 수 있어,
다양한 조합의 객체를 생성 할 수 있다.

다만, key값에 Symbol을 설정하는 경우에는 접근이 불가능한 경우도 있다. (for...in 반복문, JSON.Stringify())

Function (함수)

특수 자료형으로 Function이 있다.
객체(Object)의 일종으로 볼 수 있다.
타입 구분을 통해 function을 확인 할 수 있다.

Primitive Type과 Reference Type의 차이

결론적으로 두 타입은 메모리를 사용하고 복사를 하는 방법이 다르다.

 let x1 = 3;
 let y1 = x1;
 y1 = 2

console.log(x1) // 3
console.log(y1) // 2

let x2 = {num: 1}
let y2 = x2
y2.num = 3

console.log(x2.num) // 3
console.log(y2.num) // 3

위의 예제를 보면 string(Primitive Type)을 x1에 할당하여 y1에 복사하면 x1, y1은 서로 다른 메모리를 할당하여 그 값 자체를 보관한다.

하지만, 객체인 x2y2에 복사하게 되면 그 객체{num:1}의 주소값을 가지고와 메모리에 가지고 있는다.
때문에 서로 같은 객체의 주소값을 각각 x2, y2가 가지고있다.

때문에 x2, y2 중 어느 하나의 num이라는 keyvalue를 수정하면 같은 객체가 변경되게 된다.
이러한 상황은 배열에서도 똑같이 일어난다.

때문에 배열이나 객체를 복사하여 조작하는 경우에 원본을 지켜야 한다면 추가적인 조작이 필요하다.

Spread operator (...)

let printNums = function (...arg) {
	console.log(arg)
}
printNums(10,20,30); // [10,20,30]

나머지 연산으로 앞에서 특정 변수로 가져간 값들 이외의 나머지 값들을 배열에 담아 가져온다.

let arg = [10,20,30,40];
let newArr = [0,...arg];
console.log(newArr);

let book = {
  title: "Hello world",
  createdAt: "2020-12-07",
  author: "uom",
}
let newBook = {
  ...book
  author: "jaewon"
}
console.log(newBook) 
// {title: "Hello world", createdAt: "2020-12-07", author: "jaewon"}

배열이나 객체 내부의 값을 펼쳐서 할당하며, overide도 된다.

더 배우기

  • 얕은 복사와 깊은 복사

0개의 댓글