JavaScript - Variable type1( primitive, object )

Noma·2021년 1월 21일
0

* 아래 내용은 DreamCodingMDN자료를 정리한 내용입니다.

대부분의 프로그래밍 언어에서는 두가지(primitive type, object type)로 타입이 나눠지지만, 자바스크립트에서는 function도 데이터타입 중 하나로 분류된다.

또한 어떤 type이냐에 따라 값이 메모리에 다른 방식으로 저장된다.

1. primitive type

: number, string, boolean, null, undefined, symbol

  • single item이다. (더이상 나눠질 수 없는 한 가지 아이템)
  • 변수 생성시 메모리에 변수를 위한 공간이 생기고 그 안에 데이터 값 자체를 보관함

▽ 메모리에 데이터 값 자체를 할당

let name='ellie';

▽ 변수에 또 다른 변수를 대입하면, 메모리에 들어 있던 값 자체를 그대로 복사해서 할당

let num= 2;
let num2= num; // num2 → 2
num2= 3;
console.log(num); // 2 (영향 받지X)
console.log(num2); // 3 

1) Number

숫자의 데이터타입: number
굳이 타입 정의 안하고 변수에 숫자를 할당하면 알아서 지정됨

const count=17; // integer
const size=17.1; // decimal number (소수) 

❗ 참고 ) C data types for number

→ C와 JAVA에서는 얼마나 큰 사이즈의 데이터를 담냐에 따라서 short를 쓸건지 int를 쓸 건지 사전에 생각하고 변수를 선언해야함

But, Javascript는 어떤 사이즈로 할당할 건지 생각하지 않고 Number 하나면 끝이다.

Infinity, -Infinity, NaN

: special numeric values

const infinity=1/0;
const negativeInfinity=-1/0;
const nAn='not a number'/2;

나중에 DOM 요소를 자바스크립트를 이용해 position을 바꾼다던지 다양한 계산을 해야할 때 나누고자하는 값이 0인지 아닌지, 숫자인지
아닌지를 확인도 하지 않고 연산을 바로 하면 숫자가 아닌 infinity나 NaN을 받을 수 있기 때문에 사용자에게 에러가 뜰 수 있다.

→ 💥그러므로, 연산할 때 그 값이 vaild한 값인지 확인하고 연산하는 것이 중요하다.

- BigInt

→ fairly new, don't use it yet.

BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 253 - 1보다 큰 정수를 표현할 수 있는 객체이다.

정수 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있다.

const bigInt=1234567890123456789012345678901234567890n;
//over ((-2^53)~2^53)

2) String

const char='c'; // string
const name='Merry';
const greeting='hello'+ name;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
// value: helloMerry, type: string

const helloBob=`Hi ${name}!`;
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
//value: Hi Merry!, type: string

3) Boolean, Null, Undefined

/*🔹 Boolean
- false: 0, null, undefined, NaN, ''
- true: any other value */

const canRead=true;
const test=3<1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);
// value: true, type: boolean
// value: false, type: boolean

//🔹 Null
let nothing=null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);
// value: null, type: object

//🔹 Undefined
let x; // → let x=undefined;와 같다.
console.log(`value: ${x}, type: ${typeof x}`);
// value: undefined, type: undefined

4) Symbol

:object에 대한 고유한 식별자를 생성한다.

Symbol([description])

  • 매개변수 description
    선택적(optional) 문자열. 디버깅에 사용할 수 있는 심볼에 대한 설명(description)으로 심볼 자체에 접근하는 용도로는 사용할 수 없음
const symbol1=Symbol('id');
const symbol2=Symbol('id');
console.log(symbol1===symbol2); // false

const gSymbol1=Symbol.for('id');
const gSymbol2=Symbol.for('id');
console.log(gSymbol1===gSymbol2); // true
console.log(`value: ${gSymbol1.description}, type: ${typeof gSymbol1}`);
// value: id, type: symbol
  • 맵이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 등.. 정말 고유한 식별자가 필요할 때 사용

  • 동일한 key(여기서는 'id')로 생성했어도 다른 Symbol로 만들어진다.

  • string이 똑같을 때 동일한 Symbol로 만들고 싶으면, symbol.for(key)를 이용

  • symbol을 template literals로 출력하려고 하면, ${}에 의한 string 변환이 불가해서 오류가 뜨게 된다. 따라서 .description을 이용해 string인 key값 만을 리턴해서 사용해야한다.

- Symbol.for(key)

주어진 키(key)로 현재 존재하는 symbol을 검색하고 찾으면 반환한다. 존재하지 않으면 주어진 키로 전역 심볼 레지스트리에 새로운 심볼을 생성하고 그 심볼을 반환한다.

- Symbol.description

Symbol의 key 값을 리턴함.

2. Object type

  • box container : single item들을 여러 개 묶어서 한 단위로 표현
  • ref를 통해서 실제로 object가 담겨있는 메모리를 가리키게 됨
  • elie가 가리키고 있는 포인터만 잠겨서 elie가 다른 object로 변경이 불가능하지만, name과 age는 계속 변경이 가능하다.

→ object를 가리키는 reference가 메모리에 저장됨

let obj={
	name:'ellie',
	age:5,
};
let obj2=obj; // object를 가리키는 주소(ref)를 그대로 복사해서 할당
obj.name='james';
console.log(obj.name); // james
console.log(obj2.name); // james (영향 받음, obj가 가리키고 있는 데이터가 업데이트됨)
const obj={
	name:'ellie',
	age:5,
};

// 아래와 같이 자체 ref는 변경 불가 → ref 잠김
obj={
	name='james',
	age=6,
}

// 오브젝트가 가리키고 있는 데이터 변경은 가능
obj.name='james';
console.log(obj); // {name: "james", age: 5}

❗ 참고 자료
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

profile
Frontend Web/App Engineer

0개의 댓글