JS | 클로저

2022. 12. 28. 17:40·JavaScript

Lexical scoping (렉시칼 스코프) :

함수가 선언된 위치에 따라서 사용할 수 있는 값(참조될 수 있는 값)이 달라진다.

함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다.

나랑 가까운 b전역변수를 참조하게 된다. 

//렉시칼 스코프 - 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다.    

var a = 1;
function x(){
     a = 10;
     console.log(a); //10
}
x();

var b = 1;
function y(){
     var b = 10;
     z();
}

function z(){
     console.log(b);
}

 y(); //1

 

클로저

 내부함수를 이용해서 외부함수(a)의 변수의 접근할 수 있는 환경을 만들어준다.
 
function func1(){
var a = 1;

//클로저를 사용하면 a를 밖에서 사용할 수 ㅇㅇ

//1st
// var b = function(){
//     return a;
// }
// return b;
            
//2nd
return function() {
     return a;
}
} //a의 범위는 여기까지
//console.log(a); //err
var result = func1(); //result는 내부함수
var x = result();
console.log(x); //x는 a값

클로저 은닉

function obj(){
            var name = "홍길동";
            return function(){
                return name;
            }
        }

        var getObj = obj();
        console.log(obj());
        console.log(getObj());
function obj(){
            var name = "홍길동";
            //get
            // return function(){
            //     return name;
            // }
            
            //set
            // return function(aaa) {
            //     name = aaa;
            //     console.log(name);
            // }
            return { //중괄호는 객체
            getName : function(){
                return name;
            },
            setName : function(aaa){
                name = aaa;
            }

        }
        }

        // var getObj = obj();
        // console.log(obj());
        // console.log(getObj());

        // var setObj = obj();
        // setObj('이순신');

        
        //
        var result = obj(); //obj 반환
        result.setName("이순신"); //setter
        console.log(result.getName()); //getter

'JavaScript' 카테고리의 다른 글

JS | JSON(객체표기법)  (0) 2022.12.29
JS | 객체  (0) 2022.12.28
JS | 전역변수(global)와 지역변수(local)  (0) 2022.12.28
JS | 함수의가변 인자 argument  (0) 2022.12.28
JS | 함수(화살표 함수)  (0) 2022.12.28
'JavaScript' 카테고리의 다른 글
  • JS | JSON(객체표기법)
  • JS | 객체
  • JS | 전역변수(global)와 지역변수(local)
  • JS | 함수의가변 인자 argument
개발 공부
개발 공부
  • 개발 공부
    개발 공부
    개발 공부
  • 전체
    오늘
    어제
    • 전체보기 (162)
      • 프로젝트 (1)
      • JavaScript (45)
      • Node.js (3)
      • Next.js (5)
      • React (17)
      • NoSQL (0)
      • HTML,CSS (3)
      • CS (6)
      • Java (35)
      • Spring (6)
        • Spring의 정석 (1)
      • Spring boot (1)
      • MySQL (1)
      • 리눅스 (16)
      • JSP (9)
      • AWS (0)
      • git (2)
      • 알고리즘 (1)
      • ect (7)
      • Project (2)
  • 블로그 메뉴

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

  • 공지사항

  • 인기 글

  • 태그

    Java의 정석
    Java
    자바
    자바의 정석
    티스토리챌린지
    오블완
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
개발 공부
JS | 클로저
상단으로

티스토리툴바