Lv1_junior_dev
자라나라실력실력
Lv1_junior_dev
전체 방문자
오늘
어제

주인장 GitHub 바로가기

    • 분류 전체보기 (111)
      • 주절주절 (6)
      • 프로젝트 회고록 (3)
      • 꿀팁 (3)
      • 알고리즘 풀이 (26)
      • 이것 저것 (1)
      • 자바스크립트 - Vanilla JS (25)
      • 자바스크립트 - React.js (37)
      • 자바스크립트 - Next.js (4)
      • 자바스크립트 - TypeScript (5)
      • HTML (0)
      • CSS (1)

    인기 글

    hELLO · Designed By 정상우.
    Lv1_junior_dev

    자라나라실력실력

    [자바스크립트 / Vanilla JS] 비공개 멤버
    자바스크립트 - Vanilla JS

    [자바스크립트 / Vanilla JS] 비공개 멤버

    2022. 7. 4. 12:45

     

    비공개 멤버

     
    function add(num1, num2) {
        var sum = num1 + num2;
        return sum;
    }
     

    위 코드의 함수에는 num1, num2, sum이라는 세 가지의 고유변수가 있다.

    이들 변수는 함수 내부에서는 접근이 가능하지만 함수 외부에서는 접근이 불가능하다. 

    비공개 멤버에 대한 별도의 문법은 없지만 클로저를 사용해서 구현할 수 있다.

     

    생성자 함수 안에서 클로저를 만들면, 클로저 유효범위 안의 변수는 생성자 함수 외부에 노출되지 않지만 객체의 공개 메서드 안에서는 쓸 수 있다. 클로저를 함수 안에 만들어 사용하면 스코프 체인을 통해 이들 변수에 접근이 가능하게 된다. 

    즉, 생성자에서 객체를 반환할 때 객체의 메서드를 정의하면, 이 메서드안에서는 비공개 변수에 접근할 수 있는 것이다.

     

     

     
    function Private_member(){
        // 비공개 멤버(private member)
        var name = 'KJW';
    
        // 공개된 함수(privieged member)
        this.getName = function(){
            return name;
        };
    }
    
    var TEST = new Private_member();
    
    // 'name'은 비공개이므로 undefined가 출력된다.
    console.log(TEST.name);
    
    // 공개 메서드에서는 'name'에 접근할 수 있다.
    console.log(TEST.getName());

     

    보다시피 자바스크립에서도 쉽게 비공개 멤버를 구현할 수 있다. 

    비공개로 유지할 데이터를 함수로 감싸기만 하면 된다. 

    이 데이터들을 함수의 지역 변수로 만들면, 함수 외부에서는 접근할 수 없다.

     

    출처: https://webclub.tistory.com/78 [Web Club:티스토리]

    '자바스크립트 - Vanilla JS' 카테고리의 다른 글

    [자바스크립트 / Vanilla JS] new 연산자와 생성자 함수  (0) 2022.07.20
    [자바스크립트 / Vanilla JS] window.onload 여러 번 사용하기  (1) 2022.07.13
    [자바스크립트 / Vanilla JS] if(조건문) 줄이기  (1) 2022.06.24
    [자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)  (0) 2022.06.21
    [자바스크립트 / Vanilla JS] 반복문에 대하여 (for.. for in.. for of.. forEach)  (0) 2022.06.20
      '자바스크립트 - Vanilla JS' 카테고리의 다른 글
      • [자바스크립트 / Vanilla JS] new 연산자와 생성자 함수
      • [자바스크립트 / Vanilla JS] window.onload 여러 번 사용하기
      • [자바스크립트 / Vanilla JS] if(조건문) 줄이기
      • [자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)
      Lv1_junior_dev
      Lv1_junior_dev
      나는 성장이 고프다. 자라나라 개발 실력 !

      티스토리툴바