📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page
  • 유효범위(Scope)
  • 1. 전역변수(Global Scope)
  • 2. 지역변수(Local Scope)
  • 3. 유효범위의 효용
  • 3-1. 전역변수를 불가피하게 써야하는 경우
  • 3-2. 전역변수를 사용하고 싶지 않을 때 익명함수를 호출
  • 4. 유효범위의 대상 (함수)
  • 5. 정적 유효범위(static scoping)

Was this helpful?

  1. 생활코딩 JavaScript
  2. JavaScript 입문수업
  3. 함수지향

유효범위

유효범위(Scope)

변수의 수명

var vscope = 'global';
function fscope(){
    alert(vscope);
}
fscope(); //global

1. 전역변수(Global Scope)

함수 밖에서 선언된 변수 - 함수 안에서도 그 변수에 접근할 수 있음

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert('함수안 '+vscope); //함수안 local
}
fscope();
alert('함수밖 '+vscope); //함수밖 global

2. 지역변수(Local Scope)

함수 안에서 선언된 변수 - 함수 밖에서 함수 안의 변수에 접근할 수 없음

같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선시 됨

var vscope = 'global';
function fscope(){
    vscope = 'local'; //var를 사용하지 않음 = 전역변수가 됨을 뜻함
    alert('함수안 '+vscope); //함수안 local
}
fscope();
alert('함수밖 '+vscope);//함수밖 local

3. 유효범위의 효용

//var가 있는 경우
function a (){
    var i = 0;
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i); //01234
}
//var가 없는 경우
function a (){
    i = 0;
}
for(i = 0; i < 5; i++){
    a();
    document.write(i); //i가 전역변수가 됨에 따라 계속 0이라 무한반복됨
}

3-1. 전역변수를 불가피하게 써야하는 경우

하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용

MYAPP = {}
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}
 
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum()); //30

3-2. 전역변수를 사용하고 싶지 않을 때 익명함수를 호출

(function(){
    var MYAPP = {}
    MYAPP.calculator = {
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = {
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left = 10;
    MYAPP.calculator.right = 20;
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right;
    }
    document.write(sum()); //30
}())

4. 유효범위의 대상 (함수)

자바스크립트는 함수에 대한 유효범위만을 제공 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점

for(var i = 0; i < 1; i++){
    var name = 'coding everybody' //name =  지역변수
}
alert(name); //for문 밖에서 호출되고 있음
//coding everybody


//자바에서는 아래의 코드는 허용되지 않
for(int i = 0; i < 10; i++){
    String name = "egoing";
}
System.out.println(name);

5. 정적 유효범위(static scoping)

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖게 됨 이러한 유효범위 방식을 정적 유효범위(static scoping), 렉시컬(lexical scoping)이라 함

즉, 함수를 호출해서 변수값을 가져오는 시점이 아닌 함수가 정의되는 시점 이후 클로저(Closure)와 연결됨

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a(); //5
Previous함수지향Next값으로서 함수

Last updated 3 years ago

Was this helpful?