Scope

scope란?

어떤 변수들에 접근 할 수 있는지 범위를 정의하는 것으로 변수가 영향을 미치는 범위를 말하며 global scope, local scope가 존재한다.

Global Scope

변수가 함수 바깥이나 중괄호 바깥에 선언되었다면 전역스코프이다. global scope를 전역스코프라고 한다. 변수 선언시 모든 곳에서 사용이 가능하지만 변수 이름이 충돌하는 경우가 발생하는 것에 유의해야한다. 전역변수는 만들지 않을수록 좋다. 

그럼 어떤 변수를 써야하는걸까? 

Local Scope

local scope는 지역스코프로 제한된 공간 {} 중괄호 내에서만 사용이 가능한 변수이다. 제한된 공간은 두가지로 나눌 수 있는데 함수 스코프와 블록 스코프가 존재한다. 함수 스코프와 블록 스코프는 동일한 느낌을 받는데(주관적 뇌피셜) 이는 함수 선언시 블록 스코프가 생기기에 그렇다. 

//지역변수
let x = 'I am x';

function ex(){
  x = 'I want to change'; //변수 선언을 하지 않음
}

ex(); //ex를 통해 x의 값을 변경
console.log(x); //I want to change


//전역변수
let y = 'I am y';

function ex2(){
  let y = 'I want to change' //변수 y를 선언함
}

ex2();
console.log(y); //I am y

 

Scope Chain

내부 함수에서는 외부 함수의 변수에 접근이 가능, 외부 함수에서 내부 함수 변수 접근 불가능하다. 아래의 경우에는 inner에서 name이라는 변수를 먼저 찾은 뒤에 만약 내가 찾는 변수가 없다면, 바로 위에 있는 스코프로 가서 찾는다. 이렇게 좁은곳에서 넓은 곳으로 범위를 넓혀가는 것을 scope chain이라고 한다.

let name = 'gwon';
function outer(){
  console.log('바깥', name);
  
  function inner(){
    let lastName = 'Ran';
    console.log('내부', name)
  }
  
  inner();
}

outer();
console.log(lastName) //undefined 지역변수기에

 

호이스팅

함수 선언식으로 선언되면 현재 스코프의 상단에서 호이스팅이 이뤄진다. 함수를 호출하기 전에 변수를 선언해주는 것이 가독성이 좋다. 함수를 선언하기 전 함수를 호출하는 것은 가능하지만, 결코 옳은 방식이 아니다.

sayHello() //undefined

const sayHello = function(){
  console.log('Hello CSS-Tricks Reader!');
}

---

const sayHello = function(){
  console.log('Hello CSS-Tricks Reader!');
}

sayHello() //Hello CSS-Tricks Reader!

 

네스팅된 스코프 | 렉시컬 스코핑

함수가 다른 함수 내부에서 정의 되었다면, 내부함수는 외부함수의 변수에 접근이 가능하다. = lexical scoping이라고 한다. 하지만 외부함수는 내부함수의 변수에 접근이 불가능하다. 

• 스코프는 함수를 호출할 때가 아니라 선언시 생긴다. 
  스코프는 함수를 선언할 때 생기는 것이기에 lexical안에 지역변수 name이 아니라 전역변수 name을 가르킨다. 함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로 부터 가장 가까운 곳에 있는 변수를 계속 참조하게 된다.

let name = 'gwon';
function log(){
  console.log(name);
}

function lexical(){
  name = 'Ran'
  log();
}

lexical(); //Ran

--

let name = 'gwon';
function log(){
  console.log(name);
}

function lexical(){
  let name = 'Ran'
  log();
}

lexical(); //gwon

 

 

참고사이트 : 기억이 안날 땐 다시 찾아보기!

자바스크립트 스코프(scope)

자바스크립트 변수와 스코프(유효범위)

(JavaScript) 함수의 범위(scope) - lexical scoping

[번역] 자바스크립트 스코프와 클로저(JavaScript Scope and Closures)

 

클로저(Closure)란?