[Javascript] 변수 선언, 초기화, 할당, 호이스팅, 스코프 개념 및 설명

728x90

자바스크립트를 변수, 변수 선언 및 할당, 호이스팅, 스코프에 대해 간단하게 정리해 보았다.

1. 변수란?

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심개념으로 하나의 값을 저장하기 위해 확보한 메모리 공간자체 또는 그 메모리를 식별하기 위해 붙인 이름을 말한다.

const age = 56;

변수 age는 해당 값이 아닌 56을 저장한 메모리 주소를 저장하고, 이후에 age라는 변수를 사용하게 되면 메모리의 주소와 매핑되어 있는 공간에 저장된 값인 56을 반환해 준다.

2. 변수 생성 단계

변수는 생성 시 선언, 초기화, 값 할당 3가지의 단계를 거친다.

2 - 1. 변수 선언 단계 (Declaration phase)

변수 선언 단계는 자바스크립트 엔진에 변수 객체를 등록하는 단계을 말하며 var, let, const 키워드를 통해 할 수 있다.

var age1;
let age2;
const age3;

위의 코드는 변수 선언한 코드이다. 변수를 선언하게 되면 자바스크립트 엔진에 알려진다.

2 - 2. 변수 초기화 단계 (Initialization phase)

자바스크립트 엔진에 등록한 변수의 메모리 공간이 생성되고, 값이 없다면 undifind로 초기화되고, 변수에 메모리 주소값이 저장되는 단계이다.

let age1 = 56;
let age2;

위 코드의 경우 age1은 해당 메모리 주소에 56이라는 값이 저장되고 값이 없는 age2는 undifind로 메모리에 값이 저장된다.

2 - 3. 변수 값 할당 단계 (Assignment phase)

undifind로 할당된 변수나 이미 값이 들어있는 변수에 사용자가 원하는 값을 할당 연산자(=)를 통해 변수에 값을 할당하는 단계이다.

let age1;
age1 = 56;

let age2 = 56;

변수 값 할당 단계는 선언 후에 값을 할당할 수도 있고, 선언과 동시에 값을 할당 할 수 있다.

3. 호이스팅이란?

자바스크립트 함수가 실행되기 전에 함수 내부에 필요한 변수 값들을 모아 유효 범위의 최상단에 선언하는 것을 말한다.
다시말해, 함수가 실행되기 전에 자바스크립스 Paser가 함수 실행전에 해당 함수를 훑는 과정에서 함수 내(함수 블록 "{...}")에서 존재하는 내용 중 함수가 실행에 필요한 값들을 끌어올리는 것이다.

※ 실제 메모리에는 변화가 없고, 선언 문을 미리 실행한다고 생각하면 된다.

3 - 1. 변수 호이스팅

console.log(age);// undifind
var age = 56;
console.log(age);// 56

1번째 console이 변수 선언 전에 참조되었음에도 에러가 발생하지 않는 이유는 코드 실행 전에 자바스크립트 Parser가 내부에 미리 변수를 선언하고 undifind로 초기화를 해놓았기 때문이다.

3 - 2. 함수 호이스팅

//함수 참조
console.dir(plus); 
console.dir(minus); // undifind

//함수 호출
console.log(plus(10,5));// 15
console.log(minus(10,5));// Uncaught TypeError: minus is not a function

//함수 선언문 호이스팅
funtion plus(a,b){
 return(a+b);
}

//함수 표현식 호이스팅
var minus = funtion(a,b){
return (a-b);
}

함수 선언문의 경우에는 자바스크립트 엔진이 런타임 이전에 먼저 실행되서 함수 자체를 호이스팅 시킨다.
하지만 함수 표현식의 경우에는 변수 호이스팅과 같이 런타임 이전에 해당 변수 값을 undifind로 초기화만 시키고, 객체 생성은 런타임이 실행되면서 해당 함수 표현식이 할당되면서 객체가 생성된다.

4. 스코프란?

간단히 말하자면 유효한 참조 범위를 말하며, 유효한 참조범위는 전역에 선언된 변수는 전역 스코프, 지역에 선언된 변수는 지역 스코프를 갖는다. 이처럼 스코프는 식별자의 선언 위치에 따라 그 범위가 달라진다.

4 - 1.함수 레벨 스코프(function-level scope)

함수 내에 선언된 변수는 지역 변수로 함수 내에서만 유효하고 외부에서는 참조할 수 없고 함수 외부에 선언된 모든 변수는 지역 변수로 취급된다.

funtion func(){
 if(true){
   var a = 10;
   console.log(a);// 10
 }
 console.log(a);// 10
}
console.log(a);// ReferenceError: a is not defined

4 - 2.블록 레벨 스코프(block-leverl scope)

모든 코드 블록("{...}") 내부에서 선언된 변수는 지역 변수로 코드블록 내에서만 유효하고, 코드블록 외부에서는 참조가 불가하다.

function func() {
	if (true) {
    	let a = 10;
        console.log(a); // 10
    }
    console.log(a); // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined