[JavaScript] 자바스크립트 데이터 타입

[JavaScript] 자바스크립트 데이터 타입

-  자바스크립트 데이터 타입에 대해 정리해 봅니다. 

변수의 타입과 타입의 확인, 자료구조, 변수의 스코프(유효 범위), 라이프타임(메모리에 남아있는지) 등 기초적인 내용을 예시를 통해 복습합니다.

 

- 무의식적으로 자바스크립트에서 무조건 변수 선언시 var을 활용하는 당신이라면 이 글을 통해 let, const를 통해 변수를 설정하는 습관을 만들길 바랍니다.

 

자바스크립트는 기본적으로 자동으로타입을 결정해 주는 방식은 느슨한 타입(loosely typed)의 동적(dynamic)할당 언어입니다. 

느슨한 타입(loosely typed) : 타입없이 변수를 선언하는 것입니다.

동적(dynamic) : 할당자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정됩니다.

 

일반적으로 var 키워드로 변수를 선언하는 경우 선택적으로 초기화가 진행됩니다. 

 

자바스크립트의 데이터 타입 확인은 typeof 연산자(operand)를 사용합니다. 

//var 키워드로 변수 선언 및 초기화 
var val = "";
console.log(typeof val); // string
	
val = 17;
console.log(typeof val); // number
	
val = 17.777;
console.log(typeof val); // number
	
val = "apple";
console.log(typeof val); // string
	
val = true;
console.log(typeof val); // boolean
	
val = null;
console.log(typeof val); // object
	
val= undefined;
console.log(typeof val); // undefined
	
val = new Array();
console.log(typeof val); // object
	
val[0] = 'zero';
console.log(typeof val); // object
	
val = function(){
    console.log('function log');
}
	
console.log(typeof val); // function

// 자바스크립트에는 명시적인 타입이 없다 
// 어떤 자료형도 값에 담을 수 있고 한 변수에 서로다른 타입을 할당할 수 있다.

 

자바스크립트에는 명시적인 타입이 없다.

- 위와 같이 새로 초기화하면 타입에 상관없이 덮어쓰기 식으로 다시 초기화됩니다.

자유도가 높은 프로그래밍을 할 수 있지만 무분별한 재할당은 사이드이펙트(의도피 않은 오류)를 발생시킬 수 있습니다. 

따라서 변수를 무분별하게 사용하지 말고, 정확한 네이밍을 통해 활용하여 변수의 유효범위를 최대한 좁게 생성하는 것이 좋습니다.

 

자바스크립트 변수의 유효범위(scope) 키워드별 확인

var  :  전역변수, 재 할당 OK , 중복 선언 OK

- var로 선언된 변수는 페이지가 닫힐 때까지 계속 유효합니다. 심지어 {}(블록)에서도 재 할당 되기에 변수를 사용할 로직보다 위에만 선언해 주면 언제든 사용가능한 전역 변수(global variable)입니다.  

var glo = "global";

console.log(glo); // global
	
function test(){
    console.log(glo); 
    glo = "local";
}
	
test() // global
	
if(glo != "" && glo != null){
    console.log(glo); //local
}

for(var i=0; i<2; i++){
    console.log(i); // 0, 1
}

// for {}가 끝나도 확인가능하고 마지막 i++까지 적용되어 2 가 출련된다.
console.log(i); //2

//C, JAVA 와 다르게 {}(블록) 이 종료된 이후에도 glo 는 소멸되지않는다.
// 즉 var로 선언한 변수는 중복 선언을 허용 소멸되지 않는다.

let  : 지역변수, 재 할당 OK, 중복 선언 NO

- let 키워드를 활용하면 우리가 친숙한 스코프로 개발 가능합니다.

ES5 (2009)년부터 let, const의 활용이 가능해졌고 위 예시처럼 var로 인한 재할당 이슈 문제가 해결됩니다. 

if(true){
    var val_var = "test";
    let val_let = "test2";
}

console.log(val_var); //test
console.log(val_let); // 에러 발생 Uncaught ReferenceError: val_let is not defined

// let 키워드로 생성하면 블록 범위에서 스코프가 유효하고 재할당도 안됩니다.
// 상식적인 선에서 활용가능합니다.

const  : 지역변수, 재할당 NO, 중복 선언 NO, 상수처럼

- const는 let의 모든 특징을 가지고 있지만 보다 엄격합니다. 

선언과 동시에 할당 후 재할당이 불가능 즉 상수입니다

var glo = "test";
let loc = "test2";
const con = 100; 

console.log(glo); // test
console.log(loc); // test2
console.log(con); //100

// const는 선언과 동시에 할당해야한다.
// 절대 변경되어선 안되는 데이터를 저장한다. 
// ex ) 인증키, DB 정보, API 호출 URL 등등

.

정리 

- 전역변수로 활용해야 할 때 var로 마음 편히 선언하지만 사용범위, 네이밍에 주의(ES6부터는 var 사용하지 말기)

- 지역변수로 활용 시 기본적으로 const를 활용하지만, 재할당이 필요한 경우는 let를 쓰자.

- 결국 선언한 변수에 사용 용도를 확실히 하는 게 중요합니다.

- 제약 강도 var > let > const