[FE Bootcamp] 13일차 _스코프

배운 것이 많았던 오늘, 자료형 이후에는 '스코프'라는 것에 대해 배웠다.

블로그를 한번 쓰고 또 쓰는거라서 조금 힘들지만, 그래도 복습 차원에서 최대한 기억을 떠올려 써보도록 하자.

1. 스코프

스코프는 '범위'를 나타내는 말로, 쉽게 말해 '변수를 사용할 수 있는 범위' 라고 생각하면 될 것 같다.

 

let a = 1

a만 사용 가능

전역 스코프

let b = 2

a, b 사용 가능

지역 스코프

let c = 3

a, b, c 사용 가능
지역 스코프

 

여기서 색깔로 묶인 박스를 '스코프'라고 한다.

스코프는 중첩이 가능하며, 가장 바깥의 스코프는 '전역 스코프(Global Scope), 안쪽의 스코프는 '지역 스코프(Local Scope)라고 부른다.

전역 스코프는 기본적으로 window로 되어있다.

 

함수나 반복문 등이 중첩되어 있는 구문에서는, 바깥쪽 스코프의 변수를 안쪽 스코프에서는 사용 가능하지만, 안쪽 스코프의 변수를 바깥쪽 스코프에서는 사용할 수 없다.

 

for(let i = 0; i < 10; i++){
  for(let j = 0; j < 10; j++){
    console.log(i + " / " + j)
  }
}

 

위 코드를 보자. 

밖의 스코프는 변수가 i인 반복문, 안쪽 스코프는 변수가 j인 스코프이다.

안의 스코프에서는 밖의 스코프에서 선언한 변수인 i를 사용할 수 있지만, 밖의 스코프에서는 안의 스코프에서 선언한 변수인 j를 사용할 수 없다는 것이다.

 

쉽게 말해, 스코프에서 변수는 바깥->안으로 일방통행인 것이다.

 

2. 스코프의 종류

스코프는 2가지 종류가 있다.

A. 블록 스코프

블록 스코프는 중괄호( { } )를 기준으로 묶인 스코프이다. 반복문, 화살표 함수 등이 있으며, 중괄호 안에서 선언된 변수는 중괄호 안에서만 사용 가능하다.

 

for(let i = 0; i < 100; i++){
  let name = 'slash'
  //for문 안에서만 쓰이는 변수 name
}

let instrument = user =>
  let name = user
  console.log(name +"'s Les Paul")
  //instrument 함수 안에서만 쓰이는 변수 name
}

 

B. 함수 스코프

함수 스코프는 function으로 만들어진 함수 선언식 또는 함수 표현식으로 묶인 블록이다.

 

funtcion song(){
  let title = 'highway star'
  console.log(title)
  //함수 song 안에서만 쓰이는 변수 title
}

let song = function(){
  let title = 'highway star'
  console.log(title)
  //함수 song 안에서만 쓰이는 변수 title
}

 

3. 변수 선언 방법

변수에는 var, let, const의 3가지 형태가 존재한다. 

 

	유효 범위	재할당 여부	재선언 여부
var	함수 스코프	O	O
let	블록 스코프 함수 스코프	O	X
const		X	X

 

유효 범위란, 변수가 스코프 안에서만 쓰일 수 있는지 아닌지에 대한 여부이다. 

 

for(let i = 0; i < 10; i++){
}
console.log(i)
//Uncaught ReferenceError: i is not defined

for(var i = 0; i < 10; i++){
}
console.log(i)
//result = 10

 

첫번째 코드는, for문 안에서 let으로 선언이 되었기 때문에 변수 i는 for로 묶인 스코프 안에서만 사용가능하다.

반면 두번째 코드는 var로 선언이 되었기 때문에 스코프 밖에서도 사용 가능하다는 것이다.

이는 var로 선언된 변수는 선언된 위치와 상관 없이 블록 스코프를 무시하고 전역 스코프에서 선언되기 때문이다.

이 떄문에 변수 선언을 잘못 했다가는 기본 전역 스코프인 window에서 사용하는 기능들을 사용하지 못하게 될 수도 있다.

 

재할당 여부는 변수에 값을 다시 할당 할 수 있는지에 대한 여부이다.

let a = 1
var b = 2
const c = 3

a = 2
//a = 2
b = 3
//b = 3
c = 4
//Uncaught TypeError: Assignment to constant variable.

 

let과 var은 변수의 값을 바꿀 수 있지만, const는 선언하는 순간 값이 고정이 되기 떄문에 재할당을 할 수가 없다.

 

마지막 재선언 여부는 한번 사용한 변수 이름을 다시 사용할 수 있는지에 대한 여부이다.

 

let a = 1
var b = 2
const c = 3

let a = 10
//Uncaught SyntaxError: Identifier 'a' has already been declared
var b = 20
//b = 20
const c = 30
//Uncaught SyntaxError: Identifier 'c' has already been declared

 

var로 선언된 변수는 같은 이름 그대로 다시 선언 가능하지만, let과 const로 선언된 변수는 같은 이름을 사용할 수 없다.

 

 

마지막으로 스코프와 변수에 대해 좀더 알아보았다.

부트캠프를 시작하고 나서 가장 오랫동안 공부한 날이 아닌가 싶다.,.,,.

하지만 이제 시작한지 한달도 되지 않았다는 것,..,,.

앞으로 나올 어려운 것들에 대비해서 지금부터라도 조금씩 더 하는 습관을 들이도록 해야겠다.