[Javascript]자바스크립트 변수 정리 + Hoisting

[Javascript]자바스크립트 변수 정리 + Hoisting

안녕하세요 미나라이입니다.

 

이번에는 자바스크립트의 변수 개념에 대해서 정리 해 보았습니다.

 

let

let은 ES6에서 새로 나온 변수 개념입니다.

Block Scope를 사용 할 수 있습니다.

Hoisting이 일어나지 않습니다. (선언 후에 값 대입을 해야함)

현업에서 자주 사용되어지고 있습니다.

{
    let name = 'tom';
    console.log(name);
}

// Block밖에서 사용하면 에러!
console.log(name);

var

ES6이전부터 사용되어 온 변수 개념입니다.

Block Scope를 무시합니다.

Hoisting이 일어납니다. (값 대입 후에 선언 해도 에러 안남)

현업에서는 최근에 사용 빈도가 많이 줄었다고 합니다.

{
    console.log(age);
    age = 4;
    // 값 대입보다 선언을 나중에 해도 정상 처리됨
    var age;
}
// block밖에서 사용해도 에러 안남
console.log(age);

Hoistring(호이스팅)이란?

자바스크립트 파일을 실행 할 때 변수의 선언 부분을 최상단으로 올려서 먼저 실행하는 것을 의미합니다.

const

흔히 말하는 상수입니다.

선언과 값 대입을 동시에 해 주어야 합니다.

한번 대입한 값은 바꿀 수 없습니다.

불변하는 값을 선언할 때 자주 사용됩니다.

const dayInWeek = 7;

글로벌 변수(Global Variable)

전역 변수라고 하고 함수와 Block밖에 선언해도 내부에서 사용이 가능합니다.

let globalName = 'global variable';

// block안에서도 사용 가능
{
    console.log(globalName);
}

// 함수 내부에서도 사용 가능
function globalTest() {
    console.log(globalName);
}

globalTest();

변수 타입

number

자바스크립트는 숫자 데이터를 number타입 하나로 관장합니다.

const count = 17;
console.log(`value:${count}, type: ${typeof count}`);

Infinity

자바스크립트에서 허용되는 값의 범위를 초과하거나 무한대를 의미하고 양수를 0으로 나누었을 때 나오는 값입니다.

값의 체크 방법은 아래와 같습니다.

const infinity = 1/0;

if(infinity == Infinity) {
    console.log("Infinity!");
}

-Infinity

음수의 무한대를 의미하고 음수를 0으로 나누었을 때 나오는 값입니다.

값의 체크 방법은 아래와 같습니다.

const negativeInfinity = -1 / 0;

if(negativeInfinity == -Infinity) {
    console.log("-Infinity!");
}

NaN

숫자가 아닌 값을 연산했을 경우 나오는 값입니다.

값의 체크 방법은 아래와 같습니다.

const nAn = 'string' / 2;

if(isNaN(nAn)) {
    console.log("Nan!");
}

string

자바스크립트에서 문자열은 string타입 하나로 관장합니다.

const str = 'string data';
console.log(`value:${str}, type: ${typeof str}`);

boolean

참과 거짓을 표시하는 데이터 타입입니다. 기본 true/false로 표시됩니다.

const boolData = 3 < 1;
console.log(`value:${boolData}, type: ${typeof boolData}`);

null

타 언어에서는 아무것도 안들어있을 경우에는 null이라고 하지만 자바스크립트에서는 null이라는 값을 선언 해 주어야 합니다. null로 선언하면 타입은 object로 표기됩니다.

let nothing = null;
console.log(`value:${nothing}, type: ${typeof nothing}`);
if(nothing == null) {
    console.log("is Null!");
}

Undefined

변수의 선언만 하고 값을 대입하지 않았을 경우의 타입입니다. 자바로 따지면 null이랑 같습니다.

Undefined의 경우 type은 Undefined입니다.

let x;
let y = undefined;
console.log(`value:${x}, type: ${typeof x}`);
if(y == undefined) {
    console.log("is Undefined!");
}

Symbol

같은 내용의 변수를 고유 식별자로 구분하고 싶을 경우에 쓰는 타입입니다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

// 같은 이름이여도 false리턴
console.log(symbol1 == symbol2);
// symbol을 쓸 경우 문자열로 출력하는 방법
console.log(symbol1.description);

Dynamic Type

자바스크립트는 선언할때 타입이 정해지지 않고 파일을 읽고 실행할 때 마지막에 선언된 데이터의 타입을 보고 변수의 타입이 결정됩니다.

그러므로 문자열로 선언 하고 도중에 숫자로 변경해도 마지막에 대입한 값의 타입으로 자동 변환 됩니다.

// number타입으로 변환
text = 1;
console.log(`value:${text}, type: ${typeof text}`);

// 숫자와 문자를 덧셈 연산 할 경우 문자열 인식을 해서 75를 반환
text = '7' + 5;
console.log(`value:${text}, type: ${typeof text}`);

// 나눗셈 연산의 경우 인자가 숫자인 경우 number로 변환해서 연산 수행
text = '8' / '2';
console.log(`value:${text}, type: ${typeof text}`);

// 이 경우 NaN을 리턴 type은 number
text = 'a' / '2';
console.log(`value:${text}, type: ${typeof text}`);

// number 타입으로 변한 상태로 문자열 함수 처리를 하면 에러 발생
console.log(text.charAt(0));

 

이상으로 간단하게 자바스크립트의 변수에 대해서 정리를 해 보았습니다.