Scope

2020. 11. 3. 18:02·BootCamp_Codestates/Pre Tech Blog

Scope란?

: 무언가 제한된 범위를 잘 들어다보기 위해 사용되는 개념,

범위가 있어야 함수가 잘 작동하는지 확인할 수 있다

 

Achievement Goals

  • JavaScript의 Scope의 의미와 적용 범위를 이해할 수 있다
  • JavaScript의 Scope 주요 규칙을 이해할 수 있다
    • 중첩 규칙
    • block scope(block-level scope) vs. function scope(function-level scope)
    • let, const, var의 차이
    • 전역 변수와 전역 객체의 의미

Rule1: Scope: 변수 접근 규칙에 따른 유효범위

 

  • 변수는 어떠한 환경 내에서만 사용 가능. 프로그래밍 언어는 각각의 변수 접근 규칙을 가짐.
  • 변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위
  • 자바스크립트는 기본적으로, 함수가 선언되는 동시에 자신만의 Scope를 갖는다.

Rule1

  • firstName 에 접근할 수 있는 범위가 Local Scope에 한정돼 있다.
  • Scope는 중첩이 가능. 함수 안에 함수를 넣을 수 있다.
  • Global Scope는 최상단의 Scope로, 전역변수는 어디서든 접근가능.
  • 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가짐.

 

 

 

 

 

Rule2: Function Scope(var) vs. Block Scope(let, const)

Block: 중괄호로 시작하고, 끝나는 단위

let키워드: 그러나. Block 단위로 Scope를 구분했을때 예측하기 쉬운 코드를 작성할 수 있다.

 

 

var키워드: 자바스크립트는 기본적으로, 함수 단위로 자신만의 Scope를 가진다. (Old Style)

 

 

 

 

 

var greeting = 'Good Night'

result: Good Night Steve!

 

 

 

 

let greeting

ReferenceError!

변수를 접근할 수 없을 때 나는 에러는 ReferenceError이다.

 

const 키워드

값이 변하지 않는 변수. 상수.

let 키워드와 동일하게 Block Scope를 따름.

값을 재정의하면 TypeError가 발생한다.

 

  let const var
유효범위 Block Scope Block Scope Function Scope
값 재정의 가능 불가능 가능
재선언 불가능 불가능 가능

 

재선언 테스트

var 키워드로 재선언시 문제가 없어보이지만, 보통 이런 경우는 버그이므로 let 키워드를 사용해 이를 방지할 수 있다.

 

 

Rule3: 전역 변수와 window 객체

window: 전역 범위를 대표하는 객체

Global Scoped에서 선언된 함수, var키워드로 선언된 변수는 window 객체와 연결된다.

 

단, let으로 선언된 변수는 window객체에 연결되지 않는다.

다른 자바스크립트를 함께 작업할때는

브라켓안에 let 선언(지역변수설정)하여 사용하면 안전하게 사용가능하다.

 

 

Rule4: 선언 없이 초기화된 전역 변수

절대, 선언 키워드(var, let, const) 없이 변수 초기화하지 않는다. -> error가 안 난다.  변수 선언을 하지 않으면, 어떤 scope에서든 전역변수가 되므로 위험하다. (non-strict mode)

 

이런 실수를 방지하려면? Strict Mode 를 사용한다.

-> error를 발견할 수 있다.

 

 

 

 

 

 

Lexical Scope란?

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  var name = 'nero';
  log();
}
wrapper();

위 코드의 답은 zero입니다. 스코프는 함수를 선언할 때 생기기 때문에

log 안의 name은 wrapper 안의 지역변수 name이 아니라, 전역변수 name을 가리키고 있는 겁니다.

이런 것을 lexical scoping이라고 합니다.

함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳(상위 범위에서)에 있는 변수를 계속 참조하게 됩니다. 위의 예시에서는 log 함수 안의 name 변수는 선언 시 가장 가까운 전역변수 name을 참조하게 됩니다. 따라서 wrapper 안에서 log를 호출해도 지역변수 name='nero'를 참조하는 게 아니라 그대로 전역변수 name의 값인 zero가 나오는겁니다.

'BootCamp_Codestates > Pre Tech Blog' 카테고리의 다른 글

고차함수(Higher Order Function)  (0) 2020.11.10
Closure  (0) 2020.11.08
객체  (0) 2020.11.03
배열  (0) 2020.11.02
디버깅이란?  (0) 2020.10.28
'BootCamp_Codestates/Pre Tech Blog' 카테고리의 다른 글
  • 고차함수(Higher Order Function)
  • Closure
  • 객체
  • 배열
JTB
JTB
웹/앱 개발 정보를 공유하고 있습니다.
  • JTB
    JTechBlog
    JTB
  • 전체
    오늘
    어제
    • All About Programming;) N
      • Computer Science
        • Terminology and Concepts
        • Network
        • Operating System
        • Database
        • Data Structure
      • Frontend
        • Javascript Essentials
        • Perfomance Optimization
        • JS Patterns
        • Next.js
        • Flutter
      • Backend
        • Node.js
      • DevOps
        • Docker & Kubernetes
      • Coding Test N
        • LeetCode N
        • Programmers
      • Tech Books & Lectures
        • Javascript_Modern JS Deep d..
        • Network_IT 엔지니어를 위한 네트워크 입문
      • Projects
        • PolyLingo_2025
        • Build Your Body_2024
        • JStargram_2021
        • Covid19 Tracker_2021
        • JPortfolio_2021
      • BootCamp_Codestates
        • TIL
        • TILookCloser
        • Pre Tech Blog
        • IM Tech Blog
        • Daily Issues and DeBugging
        • First Project
        • Final Project
        • Sprint Review
        • Good to Know
        • Socrative Review
        • HTML & CSS
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 글쓰기
    • 관리
  • 공지사항

  • 인기 글

  • 태그

    Data Structure
    커리어
    Operating System
    모던 자바스크립트 Deep Dive
    이벤트
    How memory manage data
    polylingo
    leetcode
    프론트엔드 성능 최적화 가이드
    structure of os
    Shared resources
    자바스크립트
    딥다이브
    js pattern
    CPU scheduling algorithm
    need a database
    스코프
    Network
    mobile app
    database
    자바스크립트 딥다이브
    Time complexity and Space complexity
    JavaScript
    DOM
    VoiceJournal
    Binary Tree BFS
    testing
    Threads and Multithreading
    indie hacker
    TCP/IP
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
JTB
Scope
상단으로

티스토리툴바