JavaScript

[JS] JS 스코프(Scope) 유효범위 가볍게 이해하기

2023. 3. 14. 16:03
목차
  1. 전역 스코프(Global Scope)
  2. 지역 스코프(Local Scope)
  3. 함수 스코프(function scope)
  4. 블록 스코프 (block scope)
728x90
반응형

스코프(Scope)란?

Scope, JS에서는 유효 범위라고 해석한다.

말 그대로, 어떤 값이 영향을 미칠 수 있는 범위 = 스코프

스코프는 크게 전역범위(Global Scope)와 지역범위(Local Scope) 두 가지로 나뉜다.

let globalNumber = 7;

function showNumbers() {
    let localNumber = 5;
    console.log(globalNumber);
    console.log(localNumber);
}

showNumbers();
console.log(localNumber);

 

전역 스코프(Global Scope)

위의 코드에서 globalNumber라는 변수를 보면, 가장 윗줄에서 선언할 때 숫자 7을 할당 했고, showNumbers 함수 내부에서 접근하고 있다. showNumbers 함수를 호출 했고 실행한 결과로 콘솔에서 가장 위에 숫자 7이 출력이 된걸 보아, 이 변수가 함수 내부에서도 잘 접근 하고 있다고 보여준다.

즉, 전역스코프는 말 그대로 어느 영역에서든 접근할 수 있는 범위를 말한다.

어떤 중괄호에도 들어가지 않고, 아무런 들여 쓰기 없이 가장 바깥쪽에 선언된 값이면 어디서든 접근해도 접근이 가능한 개념이다.

 

지역 스코프(Local Scope)

이번엔 localNumber이라는 변수를 보면, global과는 다르게 함수 내부에서 선언되었고, 함수 내부에서도 이 변수에 접근 하고 있고, 마지막 줄에서도 이 변수에 접근하고자 한다. showNumbers 함수를 호출하고 실행한 결과로 숫자 5가 잘 출력되었지만 마지막 줄에서는 ReferenceError가 발생하면서 localNumber가 선언되지 않았다.

즉, 지역스코프는 특정한 영역에서만 접근이 유요한 범위 를 말한다.

지역 스코프는 선언 시점이 중요한 부분이다.

지역스코프는 특성에 따라 여러가지 이름으로 세분화 된다. 크게 두가지 함수와 블록스코프로 나눌 수 있다.

 

함수 스코프(function scope)

함수 내부에서 선언된 변수나 함수는, 함수 내부에서만 유효하고 함수 밖에서 참조 될 수 없다.

 

블록 스코프 (block scope)

말 그대로 블록 문에 지역 스코프 개념이 적용되는 것

{
    let x = 3;
    console.log(x);
}

console.log(x);

 

자바 스크립트는 중괄호 안에서 선언된 변수들은 중괄호 안에서만 유요하고 그 밖에서는 접근이 불가.

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JS] JS 문자데이터(String)  (0) 2023.03.15
[JS] JS 생성자와 프로토타입  (0) 2023.03.14
[JS] 콜백(Callback) 함수란?  (0) 2023.02.23
[JS] 화살표 함수와 람다(익명함수)  (0) 2023.02.22
[JS] 일반함수와 화살표함수의 차이  (0) 2023.02.22
  1. 전역 스코프(Global Scope)
  2. 지역 스코프(Local Scope)
  3. 함수 스코프(function scope)
  4. 블록 스코프 (block scope)
'JavaScript' 카테고리의 다른 글
  • [JS] JS 문자데이터(String)
  • [JS] JS 생성자와 프로토타입
  • [JS] 콜백(Callback) 함수란?
  • [JS] 화살표 함수와 람다(익명함수)
우주방랑자 개자이너 박모나
우주방랑자 개자이너 박모나
개발자 디자이너가 되기 위해 그간 쌓은 물경력을 회복시키는 중입니다. 다양한 정보를 습득 중입니다 멋진 개자이너가 될겁니다.
250x250
우주방랑자 개자이너 박모나
우주방랑자 개자이너
우주방랑자 개자이너 박모나
전체
오늘
어제
  • 분류 전체보기 (23)
    • UIUX (1)
    • Figma (1)
    • JavaScript (10)
    • REACT (1)
    • CSS&SCSS (1)
    • HTML (1)
    • 10주완성 프로젝트 캠프 (8)

블로그 메뉴

    공지사항

    인기 글

    태그

    • 유데미
    • 개발자부트캠프
    • 스나이퍼팩토리
    • 웅진씽크빅
    • 프로젝트캠프
    • 프로젝트캠프후기
    • 개발캠프
    • figma
    • IT개발자캠프
    • 인사이드아웃
    • IT개발캠프
    • 리액트
    • 피그마
    • react

    최근 댓글

    최근 글

    hELLO · Designed By 정상우.
    우주방랑자 개자이너 박모나
    [JS] JS 스코프(Scope) 유효범위 가볍게 이해하기
    상단으로

    티스토리툴바

    개인정보

    • 티스토리 홈
    • 포럼
    • 로그인

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.