JavaScript - 변수 다루기

함수 스코프 (Function Scope) vs 블록 스코프 (Block Scope)

함수 스코프

변수가 함수 내부에서 선언되면 해당 함수 내에서만 액세스할 수 있으며 해당 함수 외부에서 사용할 수 없다.

블록 스코프

if 또는 switch 조건이나 또는 for 또는 while 루프 내부에서 선언된 변수는 해당 특정 조건 또는 루프 내에서 액세스할 수 있다.  간단히 말해서 중괄호 안에 선언된 변수는 블록 범위 내에서 호출된다.

 

var 는 함수 범위로 호출되며 let & const 는 특정 블록 내에 엑세스를 할 수 있다.
let은 프로그램을 진행하면서 변경 가능하지만 const는 프로그램이 끝날 때까지 변경되지 않고 일정하게 유지된다.

function hello() {

	if (true) {
		console.log("함수 안 호출");
		var a = "Javascript";
		let b = "C++";
		const c = "Python";
		console.log(a);
		console.log(b);
		console.log(c);
	}
	console.log("함수 밖 호출");
	console.log(a);
	console.log(b);
	console.log(c);		
}

hello();

 

if 문 외부에서 변수 b와 c를 엑세스 하려고하면 출력이 보여주듯이 let, const로 오류를 발생하지만 if 내부에서는 엑세스 가능하다.

 

 

var 선언을 지양해야하는 이유

중복선언 가능

유연하게 사용은 가능하지만 코드가 길어지거나 하였을 경우 실수로 같은 변수를 선언하거나하면 디버깅이 힘들어진다.

var name = "test1";
console.log(name); // test1

var name = "test2";
console.log(name); // test2

블록 스코프 불가능

위에서 설명한 함수 스코프 (Function Scope) vs 블록 스코프 (Block Scope)를 참조해보면 알 것이다.

if (true) {
  var name = "test";
}

console.log(name); // test

 

호이스팅

호이스팅에 대해서는 아래에 적은 예제를 보면 훨씬 간단할 것이다. 보통 어떠한 언어든 프로그램에서는 변수 선언 전에 호출을 하면 오류를 내뱉는게 정상이지만 var의 경우는 그렇지 못하다는 것에 주목할 필요가 있다. (핵심 포인트)

1. 아무것도 선언하지 않고 a 호출해보자

당연히 a라는 변수는 선언이 되지 않았고 호출을 하였으므로 ReferenceError가 발생하는 것은 당연하다.

2. 호출 뒤에 a를 선언해보자

아까와는 다르게 undefined라는 결과를 가져왔다. var의 특징을 아예 모르고 일반적인 프로그램이라고 생각하면

정상적인 결과라고 생각은 들지 않을 것이다. Java와 같은 프로그래밍인 경우 런타임 오류 전에 컴파일 단계에서 오류가 발생했을 것이다.

3. let과 비교해보자

let도 var처럼 나중에 선언을 하였는데도 ReferenceError 오류가 발생하였다. 

var로 선언한 변수는 어디서든 참조 가능하지만 실제 값이 할당 되기 전까지는 undefined로 호출되어 디버깅에 어려움을 줄 수 있다.

 

임시변수 제거

임시 변수란 말 그대로 임시적으로 사용하는 변수 또는 특정 공간 Scope 안에서 전역 변수처럼 활용되는 변수를 말한다.

잘못된 코딩법

아래 예제에서 보면 안에 객체 (Object)을 만들었는데 해당 함수가 커질 경우 임시변수가 scope 내에서 전역 변수로 사용되는 위험성이 있다.

const getObj = () => {
    let result = {};    
    result.title = "무제"
    result.text = "안녕하세요"
    return result;
}

올바른 코딩법

아래와 같이 객체를 선언하지 않고 객체를 리턴 시켜버리는 방법으로 간소화 할 수 있다. 이렇게 하면 이 함수는 객체를 리턴하는 하나의 행동만 하기 때문에 더 명확해질 수 있다.

const getObj = () => {
    return {
      title: '무제',
      text: '안녕하세요',
    };
}

 

전역변수 최소화

잘못된 코딩법

첫번째는 데이터형을 선언하지 않았을 경우는 전역변수로 선언되는 어처구니 없는 일이 발생할 것이다.

두번째는 a = b = 0의 의미는 var a = (b = 0) 으로 해석되어 b가 전역변수가 선언되어 버린다.

// 예제1)
function sum() {
	result = x + y; // 전역변수로 선언된다.
	// var result = x + y; // 이런식으로 고쳐야 할 것이다.
	return result;
}

// 예제2)
function foo() {
	var a = b = 0; // a는 지역변수, b는 전역변수로 선언된다.
}

올바른 코딩법

함수 상단에 var 선언을 한 번만 선언한다. 아래와 같이 코딩하면 코드량도 줄어들며 모든 지역 변수를 한 군데에서만 찾을 수 있는 이점이 있다.

function foo() {
    var a = 0,
        b = 0;
}