[JS] 변수와 자료형

JavaScript는 HTML과 다르게 대/소문자를 구분한다.

 

1. 변수(Variable)

변수 선언(Declaration) ... 변수(저장공간)를 만듬

변수 할당(Assignment) ... 변수에 값을 저장

* 변수가 선언되고 값이 할당되지 않으면 변수는 undefined 값을 가진다.

* 선언되지 않은 변수를 호출하면 ReferenceError 발생(DOM, Node.js)

 

변수 초기화(Initialization) ... 변수 선언 후 최초로 값을 저장

변수 재할당(Reassignment) ... 변수에 다른값을 저장

 

var carName;		// Declaration
carName = "Volkswagen";	// Assignment & Initialization
carName = "Tesla";	// Assignment & Reassignment

* 변수명으로 사용가능한 특수문자는 '_'와 '$'이다.

 

1) var 변수 선언문

변수의 스코프는 Function Scope, 호이스팅 발생, 중복선언 가능

 

2) let, const 변수 선언문(ES6)

변수의 스코프는 Block Scope, 중복선언 불가

c언어의 변수와 유사한 특성

const 선언문은 선언과 함께 초기화 되어야 화며, 재할당 불가

console.log(v1);	// undefined, hoisting
//console.log(l1);	// ReferenceError
//console.log(c1);	// ReferenceError

var v1 = 0;
var v1 = 1;
let l1 = 0;
//let l1 = 0;		// SyntaxError
l1 = 2;
const c1 = 3;
//const c2; c2 = 4;	// SyntaxError

function fn1() {
    var v2 = 5;
    var l2 = 6;
    console.log(v1, v2);
    console.log(l1, l2);
}       

console.log(v1);
console.log(l1);
console.log(c1);

fn1();
//console.log(v2);	// ReferenceError, Function Scope
//console.log(l2);	// ReferenceError, Block Scope

{
    var v3 = 7;
    let l3 = 8;
    console.log(v1, v3);
    console.log(l1, l3);
}

console.log(v3);	// noError, Function Scope
//console.log(l3);	// ReferenceError, Block Scope

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

for (let j = 0; j < 2; j++) {
    console.log(j);
}
console.log(j);		// ReferenceError, Block Scope

 

2. 자료형(Data Type)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

 

1) Primitives (기본형)

- Boolean (논리형)

- Null (의도적인 빈값)

- Undefined (할당전의 기본값)

- Number (숫자형)

- String (문자형)

- Symbol (ECMAScript 6에 추가됨)

 

2) Object (객체, 참조형)

변수에 참조값(메모리 주소)을 저장하는 자료형

typeof 연산시 함수(Function)만 'function'으로 출력하고 나머지 객체는 'object'로 출력

배열(Array), 집합(Set), 맵(Map), 정규표현식(RegExp) 등이 여기에 속함

 

* typeof 연산자(typeof operator) ... 변수의 자료형을 출력함

console.log(typeof '10');       	// string
console.log(typeof 10);         	// number
console.log(typeof true);       	// boolean
console.log(typeof undefined);  	// undefined
console.log(typeof null);       	// object

console.log(typeof {})			// object
console.log(typeof [])			// object
console.log(typeof function (){})	// function
console.log(typeof String)		// function
console.log(typeof String(""))		// string
console.log(typeof new String(""))	// object

 

3) 형변환

형변환 함수를 이용하여 자료형을 변환할 수 있다.

// Boolean
console.log(Boolean(2));            // true
console.log(Boolean(-1));           // true
console.log(Boolean('ab'));         // true
console.log(Boolean('false'));      // true

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

// Number
console.log(Number('10'));          // 10
console.log(Number('10a'));         // NaN
console.log(typeof Number('10a'));  // number, NaN은 숫자형

// Number(parseInt, parseFloat)
console.log(parseInt('12'));        // 12
console.log(parseInt('12ab'));      // 12
console.log(parseInt('a12b'));      // NaN
console.log(parseInt('12.9'));      // 12
console.log(parseFloat('1.2'));     // 1.2
console.log(parseFloat('1.2ab'));   // 1.2

// String
console.log(String(13));            // '13'

// String(toString)
console.log((13).toString());       // '13'

 

참고)

크롬 개발자 도구의 Sources 탭에서 SyntaxError를 찾을수 있으며,

Watch를 이용해 변수값 확인 및 중단점(Break Point)을 적용하여 디버깅이 가능하다.