(SEB_FE) Section1 Unit9 스코프

1. 스코프의 의미와 적용 범위를 이해한다.
2. 스코프의 주요 규칙을 이해한다.
3. 전역 스코프와 지역 스코프의 차이를 이해한다.
4. block scope와 function scope의 차이를 이해한다.
5. 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.
6. 전역 객체가 무엇인지 설명할 수 있다.

스코프(Scope): 사격 시 목표물을 정확하게 조준하기 위해 사용

➡ 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용

이처럼 변수에 접근할 수 있는 범위가 존재한다. 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요! 이 범위가 바로 스코프이다.

• 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다
  하지만, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수는 없다

• 스코프는 중첩이 가능하다⬇️

  

  • 전역 스코프(Global Scope): 가장 바깥쪽 스코프
  • 지역 스코프(local scope): 전역이 아닌 모든 스코프
  • 변수는 지역 스코프에 선언하면 지역 변수, 전역 스코프에서 선언하면 전역 변수
    • 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

---

⭐스코프의 종류

💫 1. 블록 스코프(block scope)

• 괄호를 기준으로 범위가 구분

	let	const	var
유효 범위	함수 스코프 및 블록 스코프	함수 스코프 및 블록 스코프	함수 스코프
값의 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

• var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따른다

  • 그러나, 모든 블록 스코프를 무시하는 건 X!
    ➡ 화살표 함수의 블록 스코프는 무시하지 않는다.

  • 혼동을 일으킬 수 있으니, var 보다는 let 으로 변수 선언을 하는 것을 권장

    • 또한 let 키워드는 재선언을 방지하기 때문에 버그방지가 쉽다.

💫 2. 함수 스코프(function scope)

• function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다.

• 🚨같은 함수지만, 화살표 함수는 블록 스코프이다. 함수 스코프가 아니다!🚨
  화살표 함수는 function 키워드를 사용하지 않고 함수를 선언한다
  (화살표 함수와 일반 함수의 큰 차이)

---

⭐변수 선언 시 주의할점

💫 side effect

얼핏 "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네?" 라고 생각할 수 있지만
편리한 대신, 다른 함수나 로직에 의해 의도치 않은 변경이 발생할 수도 있기 때문에 위험하다.
➡ 이를 부수 효과(side effect)라고 한다.

💫 var 키워드 지양

• var 키워드는 블록 스코프를 무시할뿐 아니라, 재선언을 해도 에러를 내지 않는다.
  ➡ let과 const를 주로 사용하자.

• 전역 변수를 var로 선언하면 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있다.

• 선언 없이 변수를 할당하지 말자.
  선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

💫 Strict Mode 사용 권장

• Strict Mode는 브라우저가 보다 엄격하게 작동하도록 해준다.

• "선언 없는 변수 할당"의 경우도 Strict Mode는 에러로 판단

• js 파일 상단에 'use strict' 라고 입력해서 사용할 수 있다. (따옴표 포함!)

[사진출처] 코드스테이츠