• 티스토리 홈
  • 프로필사진
    alpha brain
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
  • 250x250
alpha brain
  • 프로필사진
    alpha brain
    • 분류 전체보기 (92)
      • SOFTWARE DEVELOP (67)
        • REACT.JS (3)
        • WEBPACK (4)
        • HTML&CSS (2)
        • EXPRESS (0)
        • DATABASE (0)
        • NODE.JS (2)
        • JAVASCRIPT (24)
        • DOCKER (1)
        • Linux (3)
        • Git (6)
        • GRAPHQL (0)
        • Datastructure (7)
        • Development (6)
        • HTTP (1)
        • Programming Paradigm (1)
        • Algorithm log (5)
        • DEV log (1)
        • Project log (0)
        • I don't know yet (1)
      • 경제, 재무 (23)
      • 여행 (0)
      • 시사, 상식 (2)
  • 반응형
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [Javascript] 변수가 살아가는곳, scope
        2020년 01월 17일
        • alpha brain
        • 작성자
        • 2020.01.17.:56
        728x90
        반응형

        사람도 사는 반경이 있듯 프로그래밍언어에서 변수는 그 삶의 범위가 있다.

        scope: the range of subject covered by a book, programme, discussion, etc.

        프로그래밍에서의 스코프의 의미는 변수를 쓸수있는(사용할수있는) 범위를 말한다.

        범위 -> 정해져 있는 range(구간) 이라고 생각하면 편하다.

        어디에 변수를 선언하는지에 따라서 변수를 쓸수 있는지 없는지 정해져 버린다.

        변수를 선언하는 방법은 이전 포스팅에서 설명을 하였으니 이 부분은 넘어가겠다.

        [Javascript] 변수와 값(타입)
        1.변수 프로그래밍에 있어서 변수는 숫자, 문자와 같은 값들을 저장하는 공간을 의미한다. 선언 프로그래밍 언어는 변수를 선언하지 않으면 표현할수가 없다. 변수의 선언은 let과 const를 이용한다. let은 변수안..
        artdev.tistory.com

        1. 종류

        • global scope
        • block scope
        • function scope

        global scope

        글로벌 스코프는 전역스코프로서 단순히 변수를 선언하게되면 어느곳에서나 이 변수를 접근할수가 있게 된다.

        const global = '난 어느곳에서도 쓸 수가 있어요.'; // this variable is blobal scope
        for(let i = 0; i < 5; i++){
          console.log(global);
        }
        console.log(global);
        
        function myFunc() {
          console.log(global);
        }
        
        myFunc();
        
        // ... 
        • 그냥 다 쓸수있다.

        block scope

        curly bracket ( { } , block ) 안에서 변수를 선언.

        {
          const temp = 'i`m in block scope'
          console.log(temp);
        }
        console.log(temp);
        
        // 실행하면 어떻게 될까?

        • 3번째줄에서 작성했던 console.log 함수는 실행이 되었지만 5번째 줄에서 실행한 console.log 함수는 참조에러를 내고있다.
        • { } (block) 안에서 선언된 변수는 { } 안에서만 사용이 가능하다.
        • { }  밖에서 temp변수를 실행시키면 브라우저는 temp변수의 존재를 모른다.
        • { } 안에서 다시  { } 으로 중첩이 가능하다.
        • let과 const로 선언된 변수들은 이 블록스코프를 따르게 된다.

        • { } 밖에서 선언된 변수(위쪽에서 선언된 변수)는  { } 안에서 사용할수가 있다. (아래쪽에서 선언되면 참조에러난다!)

        • for문, if문 등등의 문(statement)에서도 block scope로 적용이 된다.

        이게 전부다.

        function scope

        함수에 적용되는 스코프 

        const tempVar = "im in global scope";
        
        function myFunc() {
          let temp = "hello!";
          console.log(tempVar);
          console.log(temp);
        }
        
        myFunc();
        console.log(temp);
        // block scope와 별차이가 없을것 같다. 결과를 예측해보자..

        함수 스코프 자체도 블록스코프와의 규칙은 거의 동일하다.

        • function 안에서 선언된 변수는  function 안에서만 사용이 가능하다.
        • function 밖에서 temp변수를 실행시키면 브라우저는 temp변수의 존재를 모른다.
        • function 안에서 다시  function 으로 중첩이 가능하다. (이 부분은 차후 더 설명할것 , closure에 대한것)

        스코프 자체는 블록과 큰 차이가 없어보인다.

        함수 스코프를 설명하는 이유는 변수 선언중 var 라는 키워드로 변수를 선언할때 이녀석이 함수스코프를 가지기 때문이다...

        다음 코드를 보면 왜 이게 문제인지 알수 있을것이다.

        for(var i = 0; i < 3; i++){
          console.log(i);
        }
        console.log("실행값은 : ",i);
        
        //4번째줄은 에러가 날까?

        전에 봤던 블록스코프를 따르면 당연히 에러가 날것이다.

        ?? 그렇다. 실행이 되버린다.

        이 var 키워드 때문에 코드를 짤 때 var로 선언한 변수에 스코프가 햇갈려 실수를 많이 하게 된다. 

        이 문제 때문에 let과 const라는 변수 선언법이 생겨나게 된것이다.

        let, const 를 사용하면 function scope도 단순 block scope로 생각해서 쓰면 되기 때문이다.

        오래된 코드들을 보게되면 var 키워드로 선언된 변수가 있다. 그때 함수스코프를 생각하자.

         

        728x90
        반응형

        'SOFTWARE DEVELOP > JAVASCRIPT' 카테고리의 다른 글

        [Javascript] 객체를 만드는 방법, (class, function)  (0) 2020.01.20
        [Javascript] 클로저(Closure)  (0) 2020.01.20
        [Javascript] 함수 선언문과 함수 표현식, 그리고 호이스팅  (0) 2020.01.16
        [Javascript] 값을 저장하는 방식, pass by value vs. pass by reference  (0) 2020.01.15
        [Javascript] 배열의 순회 메서드(Iteration methods)  (0) 2020.01.15
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바