[JS] 자바스크립트 변수 (var, let, const, scope)

목차

• 변수
• scope
• var이 잘 안쓰이는 이유

---

변수

값에 상징적인 이름으로 변수를 사용한다.
자바스크립트에는 총 3가지의 변수 선언 방법이 있다.

Name	Scope	변경 가능성
var	Function Scoped	변경 가능
let	Block Scoped	변경 가능
const	Block Scoped	변경 불가능

변수 선언 방법

(var, let, const) (변수 이름) = (값);

var name = "daniel";
let age = 20;
const isMale = true;

 

Scope

변수에 접근할 수 있는 범위

Global Scope (전역 스코프)

만약 변수가 중괄호( { } )밖에 선언된다면 어디서든 접근 가능한 전역 변수가 되고, 전역 스코프에 정의된다.

var daniel = "awesome";

function whoIs() {
	return daniel;
}

console.log(daniel);//expected output: awesome

 

Local Scope (지역 스코프)

반대로 괄호 ( { } )안에 변수가 선언된다면 괄호 안에서만 호출이 가능한 지역 변수가 되고, 지역 스코프에 정의된다.

function funcA(){
	let daniel = "awesome";
	console.log(daniel);
}

function funcB(){
	console.log(daniel);
}

funcA(); //expected output: awesome
funcB(); //referenceError: daniel is not defined 함수 안에 daniel을 선언 했으니 다른 함수에는 호출 할 수 없습니다
console.log(daniel) //referenceError: daniel is not defined 함수 안에 daniel을 선언 했으니 다른 함수에는 호출 할 수 없습니다

 

funcA() 함수 안에 선언된 변수 daniel 은 funB()나, funcA()함수 밖에서는 사용할 수 없음을 확인할 수 있다.

지역 스코프에는 두가지 스코프가 존재하는데, 바로 함수 스코프랑 블록 스코프 입니다.

1. 함수 스코프(Function Scope)
   • 함수내부에서만 접근 가능
   • 함수 내부에서 선언 된 변수
2. 블록 스코프(Block Scope)
   • 블록 { } 안에서만 호출

 

❓ var이 잘 안쓰이는 이유?

사실, 변수 선언방법중에서 var은 잘 사용되지 않는다고 한다. 그 이유는 크게 2가지가 있다.

1. var은 function scoped 이기 때문에

아래 예제를 보면, if 괄호({ }) 안에 선언한 변수 중 var 타입 변수만 괄호밖에서도 호출됨을 확인할 수 있다.

function test(){
		if(true){
			var daniel1 = "awesome";
			const daniel2 = "cool";
			let daniel3 = "fabulous";
		}
		console.log(daniel1);
		console.log(daniel2);
		console.log(daniel3);
}

test();
//result:
//awesome
//error: daniel2 is not defined
//error: daniel3 is not defined

💡 Javascript Scope는 Lexical Scope를 따른다.
Lexical Scope : 부모 블록에서 함수를 선언했으면 자식 블록에서도 호출이 가능하다.

function daniel() {
	var daniel1 = "1";
        const daniel2 = "2";
        let daniel3 = "3";
        if(true){
            console.log(daniel1);
            console.log(daniel2);
                    console.log(daniel3);
        }
}

daniel();
//result
//1
//2
//3
//상위 블록에 선언되었으니 하위 블록에도 호출이 가능한겁니다.

2. Var Hoisting (호이스팅)

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수명들을 모두 모아서 유효 범위의 최상단에 선언한다.
값은 따로 올리지 않는다.

예제

console.log(daniel);//expected output: undefined
var daniel = "awsome";

위의 코드를 아래로 인식해 변수를 선언하지 않았음에도 undefined가 뜬다.

var daniel;// = "awsome"은 hositing이 되지 않는다. 그래서 밑에 undefined가 뜸
console.log(daniel);//expected output: undefined
daniel = "awsome";

let, const를 이용하면? 위와같은 현상을 방지 할 수 있다.

console.log(daniel);
let daniel = "awesome";
//result:
//referenceError, daniel not defined