js 원시 타입과 참조 타입, 연산자 정리

▤ 목차

 

 

 

✔ 동적 타입

⌨ 코드로 보기

let aa = 42; // aa는 이제 숫자
aa = "bar"; // aa는 이제 문자열
aa = true; // aa는 이제 불리언

 

자바스크립트는 동적 타입이 있는 동적인 언어이다.

변수를 선언할때 특정 타입으로 선언하지 않는다. 모든 타입의 값으로 할당이 가능하다.

재 할당 또한 가능하나.

일치하지 않는 타입이 포함된 경우 암시적으로 타입 변환이 가능하다.

 

위의 특징은 형변환이 편리하다는 장점이 있지만 주의해야하는 상황이 있다.

document.write('<br>', '1' + 2); //12

이런 경우,

2의 숫자가 자동으로 형변환이 된다.

코드로 확인해보자.

<script type="text/javascript">
let hoho = 3;
let res = hoho + '5';
document.write(typeof res);
</script>

 

 

개발자가 변환을 수행할 의도가 없다면 잠재적 오류가 발생된다.

 

 

---

 

 

자바스크립트의 데이터 타입에는 크게 원시형(primitive Type)과 참조형(Reference Type)이 있다.

원시형에는 Number, String, Boolean, null, undefined( + ES6 Symbol 추가)가 있다. 

참조형에는 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp)이 있다.

 

✔원시타입

기본형에 바로 값을 할당한다. ( 사실 원시타입도 공간을 만들고 주소를 찾아가는 형태_ 함수형 언어들이 대체적으로 그러하다.)

메모리의 stack에 원시타입의 값이 저장된다. 저장된 이후로는 메모리 안의 값을 바꿀 수 없다.

 

let a =100;

위와 같은 코드를 작성하면 어떤 일이 발생할까?  (stack 메모리 영역에서만 논다.)

1.  stack 영역에 식별자가 a인 undefined 공간을 차지한다. (변수 이름의 경우, 실행 컨텍스트 내에 등록된다. 자바스트립트는 쓰레기 값에서 안전한 편이다.)
2. 100을 할당하면 undefined와 100둘다 원시타입(값 변경 불가)이다. 새로운 공간에 메모리를 할당하고 값을 저장하게 된다.
3. a는 undefined를 바라보다가 100의 값을 가지고있는 메모리 주소를 참조하게 된다.
4. 더이상 사용하지 않는 메모리 영역은 자바스크립트의 GC로 자동 해제된다.

 

아래 나오는 타입들은 원시타입이다. 즉, stack 영역에서 메모리를 할당하고 안쓰는 경우 자동 해제된다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

⌨ Null 타입

• 해당 타입만 typeof 연산자로 테스트 할 수 없다.
• typeof null은 object를 반환한다. ` ===if `를 사용하여 값을 확인해야한다.
• null은 키워드이다.
• null 타입은 null이라는 하나의 값만 가질 수 있다.
• 어떠한 주소도 참조하지 않고 있는 값을 의미한다.

 

💻 Undefined 타입

• 값이 없는 것을 의미한다.
• 존재하지 않는 객체 속성에 접근하면 undefined가 반환된다.
• undefined는 전역 속성인 일반적인 식별자이다.

 

let x;

let aa= new Array();
aa[0] =10;
aa[1] =10.5;
aa[3] ='결과로';

document.write(`aa[2] : ${aa[2]}`);

이런 경우 해당 값이 존재하지 않기 때문에 undefined로 암시적으로 초기화된다.

 

 

 

⌨  Number 타입

Number.MIN_VALU	Number.MAX_VALUE	Number.MIN_SAFE_INTEGER	Number.MAX_SAFE_INTEGER

 

 

Number.MIN_SAFE_INTEGER 와 Number.MAX_SAFE_INTEGER 범위의 정수만 안전하게 저장할 수 있다.

이 범위를 벗어나면 javaScript는 더이상 정수를 안전하게 표시할 수 없다.

 

 

안전한 범위에 있는지 확인하는 코드(정수)

Number.isSafeInteger()

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#undefined_%ED%83%80%EC%9E%85

 

 

 

NaN ("Not a Number")는 산술 연산의 결과를 숫자로 표현할 수 없을 때, 일반적으로 발생하는 특별한 종류의 숫자 값입니다.
또한, "NaN" 자기 자신과 같지 않은 JavaScript의 유일한 값이기도 합니다.

 

강제 형변환

Number('5') + Number('6')

 

단항 덧셈 연산자 : 숫자 타입으로 강제 형변환을 시켜준다.  ( +'숫자모양의 문자열' )

+'5'

 1 + +'2'

 

 

 

💻  BigInt 타입

• 소수를 나타낼 수 없지만 큰 정수를 정확하게 나타낼 수 있다.

 

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

x + 1n === x + 2n; // false

// Number
Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true

 9007199254740992n는 9007199254740993n과 같지 않기에 false를 반환한다.

하지만  Number 인 경우, 둘 다 9007199254740992 이기 때문에 true를 반환한다.

 

 

⌨ String 타입

• String의 각 요소는 String 내부의 위치를 차지한다.
• 첫번째 요소는 인덱스 0에 위치한다.
• 연결 연산자(+)가 사용이 가능하다.

 

장점

• 연결 연산자를 통해 복잡한 문자열을 쉽게 만들 수있다.
• 문자열 디버깅이 쉽다.(문자열의 값과 도일하다.)
• 어떤 자료구조라도 문자열로 표현할 수 있다.

하지만 텍스트 데이터에만 사용하자. 

 

 

💻 Symbol 타입

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

객체를 소개하기엔 너무 많다. 아래 사이트를 참고하길 바란다.

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#undefined_%ED%83%80%EC%9E%85

JavaScript의 타입과 자료구조 - JavaScript | MDN

 

 

⌨ Boolean 타입

논리적 참, 거짓을 나타내는 true ㅗ아 false이다.

 

 

 

👏 중요

document.write('<br>',Boolean(true), ' ', Boolean(false));


document.write('<br>',Boolean('true'), ' ', Boolean('false'));

 

문자형으로 들어온 값은 boolean에서 true로 반환된다.

 

document.write('<br>',Boolean(0), ' ', Boolean(123), ' ', Boolean(-123));
document.write('<br>',Boolean('kor'), ' ', Boolean('홍길동'), Boolean('5'));
document.write('<br>',Boolean(0), ' ', Boolean(false), Boolean(''));

 

 

 

document.write('<br>',Boolean(null), ' ', Boolean(nudefined),' ' , Boolean(NaN));

 

위와 같은 Uncaught ReferenceError: nudefined is not 에러가 발생한다.

 

 

---

 

 

 

✔참조형

값이 저장된 주소값을 할당한다.

기본 타입을 제외한 모든 값은 객체로 취급한다. 즉, 분류는 많지만 배열이나 함수 등도 모두 객체로 표현된다.

 

즉, 참조형이라는 것은 stack 영역에 (heap)주소값을 가지고있고 heap영역에 해당 값이 저장된다.

 

let aa= new Array();
aa[0] =10;

1. 처음 할당시 aa 식별자가 있고 (기본형과 같이) undefined가 할당된다.
2. 이후 식별자(변수명)의 메모리에는 heap영역의 주소를 가리킨다.
3. 해당 heap 영역에 값들이 위치해있다.

const로 선언한 경우는 아래 'const 배열 변경 가능성'에서 다루도록 하겠다.

 

⌨ 배열

배열 요소의 자료형에는 제약이 없다.

 

1번 예시)

let aa= new Array(); //초기값 줄 수 있는데, 늘어나면 알아서 확장된다.
aa[0] =10;
aa[1] =10.5;
aa[3] ='결과로';

document.write(`aa[0] : ${aa[0]}   aa[1] : ${aa[1]}   aa[3] : ${aa[3]}`);
//prototype member field >> .length
document.write(`<br> 전체 크기는 ${aa.length}<br>`);
document.write('타입은', typeof(aa),'<br> ',typeof(aa[0]),' ',typeof(aa[1]),' ',typeof(aa[3]));
document.write(' <br>',`aa[2] : ${aa[2]}`);

 

 

2번 예시)

let myarr = [ //배열 요소의 자료형엔 제약이 없다.
	'안녕',
	true,
	3.5,
	{name: '신기해'},
	function (){
		//alert('반가워');
		document.write('함수실행');
	}
];

document.write(myarr[0]);
document.write(myarr[3].name);
myarr[4]();


//안녕신기해함수실행

 

3번 예시) 배열 리터럴

let arrliteral = [
	[1,2,3],
	['a','b'],
	[4,5]
];
document.write(arrliteral);
document.write('<br>',arrliteral[0][0]);
document.write('<br>',arrliteral[1][0]);



//1,2,3,a,b,4,5
//1
//a

 

배열은 따로 정리해보겠다. 다양한 함수가 있다.

 

 

💻 첨자 변수로 사용할 수 있다.

let i1 = 3; //첨자 변수로 사용할 목적
document.write('<br>',`aa[i1] : ${aa[i1]}`);
//aa[i1] : 결과로

 

 

 

👏 const 배열 변경 가능성

 

const a = 3;
a = 5; 
//err

 

const로 변수를 선언하는 경우 값을 바꿀 수 없다고 배웠다.

const로 정의한 변수도 바꿀 수 없을까? 있다. 혼란스럽지만 let과 마찬가지로 const로 선언한 배열도 참조타입의 값을 선언할 수 있다.

const arr = [];
arr.push(1);
arr.pust("haha");
//err안남

 

const는 변수가 한번 메모리 주소를 가리키면 더이상 다른 곳을 가리킬 수 없다. 즉, 메모리 주소에 이름(변수+식별자)를 고정시킨 것이다. 변수와 변수명은 해당 주소에 붙어있다고 생각하자.

 

위와같이 const arr =[] 이 선언된다면 arr이는 힙 영역 어딘가에 메모리를 가리키게 될것이다.

이후, 배열을 변경하는 것은 stack의 값을 변경하는 것이 아닌 힙메모리 영역의 데이터를 변화시키는 것이기 때문에 오류가 나지 않는 것이다.

 

 

 

---

 

 

😊정리

• 원시타입도 stack안에서 주소를 할당한다. (안쓰는 값은 GC로 해제)
• const로 선언한 것은 stack영역에서 주소를 참조하는 부분이 변경되지 않는 이상 배열의 수정 유무와는 상관없다.
• 배열은 heap영역에서 변경되고 있기때문이다.

 

 

참고하기 좋은 블로그

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

 

https://break-your-limit.tistory.com/16

[1주차] 왜 const로 배열을 만들어도, 배열의 값을 변경할 수 있을까?