Hoisting?? 뭔데??

1. Hoisting이 뭘까??

• Javascript 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언한다.
• 변수의 범위가 전역인지 지역인지에 따라 다르게 수행될 수 있다.
• 함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상단으로!
  함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는 스크립트 단위의 최상단으로!
• 주의 해야 할 점은 변수의 선언과 할당 내용 모두 상단으로 끌어 올리는것이 아니라 선언부분만 분리하여 최상단으로 끌어 올린다. 선언된 변수에 값을 할당하는 내용은 원래 그 라인에 있다.

test()

function() {
	// 변수 선언 및 할당 이전에 호출 테스트
    
	console.log("test : " + name)
    
	var name = "나는 변수"
	// 변수 초기화 이후 값 확인
    
	console.log("test :" + name);
}

test : undefined
test : 나는 변수

• 위 코드를 보면 첫번째 콘솔 로그에서 사용된 name은 선언되지 않았기 때문에 오류가 발생하지 않을까 싶지만, 오류 없이 undefined가 찍힌다.
• 내부적으로 자바스크립트에서 var test = "나는 변수"를 var test;와 name = "나는 변수"로 분리하여 변수 선언부를 함수 상단으로 끌어올려서 선언해버리므로 오류가 발생하지 않고, undefined로 반환하는 것이다.

test()

function() {
    
	console.log("test : " + name)
    
	var name = "나는 변수"
    
    name = "나는 변수"

	console.log("test :" + name);
}

test : 나는 변수
test : 나는 변수

• 위 코드에서는, 함수 내에서 변수 선언 명령어를 제외하고 선언 시 전역 변수의 형태로 사용이 된다.

• 함수 선언인 경우 함수 선언한 위치에 관계없이 항상 최상단으로 호이스팅되므로 코드상에서 함수를 선언한 위치보다 먼저 호출 되더라도 이상이 없게 되는 것이다.
• 주의) 함수 호이스팅은 선언 방식이 함수선언식인 경우에만 적용된다.

// 지역변수를 var키워드로 선언하지 않았을 경우, 그것은 전역-범위(global-scope)가 됩니다.

var name = "Michael Jackson";
function showCelebrityName() {
     console.log(name);
}

function showOrdinaryPersonName() {
     name = "Johnny Evers";
     console.log(name);
}

showCelebrityName(); // Michael Jackson
// name 은 지역변수가 아닙니다. 이것은 전역변수 name을 변경해 버립니다.

showOrdinaryPersonName(); // Johnny Evers
// 이제 전역변수 name은 Johny Evers입니다. 더이상, 셀럽의 이름은 없습니다. -.-;;

showCelebrityName(); // Johnny Evers
// 해결책은 지역변수 선언시 var 키워드를 사용하는 것입니다.

function showOrdinaryPersonName() {
     var name = "Johnny Evers"; 
     // 이제 name은 항상 지역변수이며, 전역변수를 덮어쓰지 않습니다.
     console.log(name);
}

• 위 코드를 보면, 지역번수는 함수내에서 전역번수보다 높은 우선순위를 가진다는것도 알 수 있다.
• 출처 : 코드 출처

마무리

1. 지역 변수와 전역 변수에 적용하는 것을 더 자세히 알 필요가 있는거 같다.

2. 왠만하면, 전역 범위에 변수를 생성하는 것을 피하자!