[JS] Scope

Minyoung's Conference·2022년 10월 19일
0

JavaScript

목록 보기
21/28
post-thumbnail

스코프란?
유효범위, 변수의 접근성과 생존 기간을 제어한다.

const func1 = function() {
  const a = 1;
  const b = 2;
  
  console.log(a+b);
  
  return a+b // 함수 스코프를 가지는 a,b 변수는 return을 만나고 모두 해제가 된다.
};

const a = 10;

// console.log(b)
// 전역에 b를 정의하지 않았기에 error

func1(); // 결과는 3. a,b는 함수 내부의 스코프에 적용되기 떄문

**스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리합니다.

자바스크립트의 유효범위
 1. 전역 스코프 2. 함수 스코프 3. 블록 스코프

1. 전역 스코프 
- 스크립트의 어디서든 접근이 가능하기 때문에 사용이 쉽다.
- 타인과의 협업, 라이브러리 사용시 충돌 가능성이 있다.

2. 함수 스코프
- 함수 내부에서 정의된 변수와 매개변수는 함수 외부에서 접근할 수 없다.
- 함수 내부에서 정의된 변수라면 함수의 어느 부분에서도 접근할 수 있다.**

var func1 = function() {
  var a = 1;
  var b = 2;
  
  var func2 = function() {
    var b = 5;
    var c = 6;
    a = a + b + c;
    console.log(a);
  }
  func2();
}
func1();  // 12 
부모의 함수를 참조해 a값을 가져온다. 
(let, const로 지정하면 블록레벨 스코프이기에 에러가 발생)

function func() {
  a = 3;
  var b = 5;
}

func();
console.log(a) // 변수가 아닌 값을 할당했기에 3이라는 값을 가져온다. 
console.log(b) // 함수스코프에 변수를 지정했기에 전역에서는 에러가 발생.

**3. 블록 스코프
- 중괄호 안에서만 접근 가능
- 블록 내부에 정의된 변수는 블록의 실행이 끝나면 해제됨.** 

if(true) {
  var a = "hello";
}

console.log(a) // hello

if(true){
  let a = "world";
}

console.log(a) // hello  (var로 바꾸면 world로 나옴)

참고자료
(인프런 "코딩인터뷰를 저격하는 JS 스나이퍼 양성학교" 참고)

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글