Javascript - Scope

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

Scope

 

• Scope 란?

Scope는 변수에 대한 접근성을 의미한다.

 

 

• local Scope vs global Scope

<local Scope>

//잘못된 예시

function myFunction( ){

	var carName = "Hyundai";
 
 }

console.log(carName);

// 결과 : 에러 발생

//함수 안에서 선언된 변수는 함수 안에서만 호출이 가능하다.
//함수 밖에서는 함수 안의 변수에 대한 접근성이 없다.(로컬 스코프의 특징)



//올바른 예시

function myFunction( ){

	var carName = "Hyundai";
	console.log(carName);
    
 }

myFunction( );

// 결과 : Hyundai
   
//즉, 함수 안에서 선언된 변수는 함수 안에서만 호출이 가능하다.

<global Scope>

var carName2 = "KIA";

function myFunction2( ){

	console.log(carName2);
     
 }

myFunction2( );

// 결과 : KIA

//즉, 함수 밖에서 선언된 변수는 함수 안팎에서 모두 호출이 가능하다.(글로벌 스코프의 특징)

 

 

• 참고 : Scope와 무관한 내용

//함수코드 뒤에 함수의 호출코드가 나오는 경우(일반적인 경우)

var carName3 = "Volvo";

	function myFunction3( ){

	console.log(carName3);
    
 }

myFunction3( );				//함수 실행가능



//함수의 호출코드 뒤에 함수코드가 나오는 경우

var carName3 = "Volvo";

myFunction3( );				//함수 실행가능


	function myFunction3( ){
    
	console.log(carName3);
            
 }


// 결과 : 둘 다 모두 함수가 실행된다.

//함수의 호출코드[myFunction3();]가 함수코드[function myFunction3(){}]보다
//먼저 나와도 에러가 발생하지 않고 함수가 정상적으로 실행된다.

//그 이유는 자바스크립트가 스크립트 태그를 해석할 때 항상 함수코드를 먼저 해석하고,
//이후에 함수의 호출코드를 해석하여 함수를 실행하기 때문이다.(자바스크립트 매커니즘)



//함수를 변수에 선언하고 함수코드 뒤에 함수의 호출코드가 나오는 경우(일반적인 경우)

var carName4 = "benz";

var myFunction4 = function( ){	//함수를 변수에 선언 시, 변수명이 함수이름이 됨

	console.log(carName4);
    
 }

myFunction4( );				//함수 실행가능



//함수를 변수에 선언하고 함수의 호출코드 뒤에 함수코드가 나오는 경우

var carName4 = "benz";

myFunction4( );				//에러 발생

var myFunction4 = function( ){ 

	console.log(carName4);
            
 }
 
 
 // 결과 : 함수를 변수에 선언하는 경우, 반드시 함수코드 뒤에 함수의 호출코드가 와야한다.
 
 //자바스크립트가 함수코드는 먼저 해석하지만, 함수를 변수에 선언하는 경우에는 
 //해당 변수를 먼저 해석하지 않고 원래의 코드 위치에서 해석을 한다.
 
 //즉, 변수에 함수 선언 시 함수코드[var myFunction4 = function(){}]가 함수의 
 //호출코드[myFunction4();]보다 뒤에 나올 경우 함수호출 시점에서 함수가 정의되지 않는
 //문제가 발생하여 에러가 나타난다.