🤟
Vanilla-JS
  • TRIPLE-PLUS Adout
  • Babel.JS
  • 01.Vanilla-JS
    • 01. Hello JavaScript
    • 02. 변수
      • 02-1.지키면 좋은 룰(더 좋은 스타일을 위해서)
      • 02-2.숫자형꿀팁(수식 줄이기)
    • 03. 연산자
    • 04. 조건문
    • 05. 함수
      • this의 의미 6개 총정리
      • event listener와 constructor
      • 05-1. return:돌려주다
      • 05-2. 형 변환 함수
      • 05-3. Arrow function
    • 06. 객체
    • 07. 배열
      • 07-1. 배열 안에 배열(2차 배열)
      • 07-2. 배열내장 함수(forEach)
      • 07-3. 배열내장 함수(sort)
      • 07-4. 배열내장 함수(map)
      • 07-5. 배열내장 함수(indexOf)
      • 07-6. 배열내장 함수(filter)
      • 07-7. 배열내장 함수(splice, slice)
      • 07-8. 배열내장 함수(shift, unshift, pop, push)
      • 07-9. 배열내장 함수(concat, join)
      • 07-10. 배열내장 함수(reduce)
      • 07-10. 배열내장 함수(reduce)2
    • 08. 반복문
    • 09. Class와 프로토타입
      • 09-1. 프로토타입과 클래스 - 생성자
      • 09-2. 프로토타입과 클래스 - 생성자 상속하기
      • Class & Constructor & Method
      • super
      • Static Method
      • Class Getter, Setter
      • Information Hiding
      • Inheritance & Polymorphism
      • Overriding
      • Abstract Class
      • Interface
    • Math 정리
    • String 정리
    • Array정리
    • Date 정리
      • D-day 구하기
  • 02.Vanilla-JS
    • 01.삼항연산자
    • 02. Truthy and Falsy
    • 03. 단축 평가 논리 계산법
    • 04. 함수 업그레이드 (default parameter/arguments)
    • 05. 조건문 더 스마트하게 쓰기
    • 06. 비구조화 할당 (구조분해) 문법
    • 07. spread 와 rest
      • 함수 파라미터에서의 rest(params)
      • 함수 인자에서의 spread
    • 08. 자바스크립트의 Scope 에 대한 이해
    • 09. Hoisting 이해하기
    • 10. Native DOM 선택
  • 03.비동기 처리
    • 01. fetch, then, catch[Promise] 이해하기
    • 02. 직접 만들어보는 Promise 객체
    • 03. async/await
    • 04. Promise all, Promise.race
  • REST API 제대로 알고 사용하기
    • mongodb Atlas
    • mongodb Atlas(DB)에 접근하려면
    • URL 이름짓기 관습
    • Database에 자료 저장하는 법
    • 게시물마다 번호를 달아 저장하기
    • 게시물마다 번호를 달아 저장하기2
  • JQUERY + SCRIPT 유용한 코드 정리
  • Practice(실습)
    • 카운터 만들기
    • reduce
    • 데이터 자료형 활용하기1
    • 데이터 자료형 활용하기2
    • 데이터 가지고 놀기(응용)1
    • 데이터 가지고 놀기(응용)2
    • REST API
    • 배열 만들기1
    • 배열 만들기2
    • 배열 만들기3
    • 비구조화 할당
    • rest + spread(응용)1
    • rest + spread(응용)2
    • rest + spread(응용)3
    • 반복문 내장함수(응용)1
    • 함수 가지고 놀기(응용)1
    • 서버와의 통신1
    • 서버와의 통신2
    • new Promise(응용)2
    • new Promise(응용)3
    • 자바스크립트 이벤트 위임 핵심 정리
Powered by GitBook
On this page

Was this helpful?

  1. 01.Vanilla-JS
  2. 09. Class와 프로토타입

Information Hiding

은닉된 프로퍼티

PreviousClass Getter, SetterNextInheritance & Polymorphism

Last updated 4 years ago

Was this helpful?

자바스크립트에는 은닉된 프로퍼티라는 개념이 없다. 자바에는 private, protected, public과 같은 접근제어자가 있어서 외부에서 인스턴스 멤버에 접근하는 것을 통제할 수 있지만, 자바스크립트는 클래스의 모든 프로퍼티가 public이다.

종종 프로퍼티 이름 앞에 언더스코어를 붙이는 방식(this._name)으로 private한 변수임을 표현하는 경우도 있는데, 실제로 프로퍼티가 private하게 동작하는 것은 아니기 때문에 오해를 불러일으킨다는 의견이 있다. 를 참고.

프로퍼티 대신 변수를 사용하면 정보를 은닉하는 효과를 낼 수 있다.

// Animal.js
class Food{
    constructor(name) {
        let name = name;

        this.getName = () => { 
            return name;
        };

        this.setName = (newName) => {
            name = newName;
        }
    }
}

export default Food;

변수는 해당 블록 안에만 존재하기 때문에 해당 블록을 벗어나서 접근하면 undefined가 된다. (단, 블록 스코프를 갖는 let, const와 달리 var는 함수 스코프를 갖는다.) 따라서 constructor 안에 변수를 선언하면 외부에서 name에 직접 접근할 수 없다. 더불어 name을 가져오는 프로퍼티와 name을 설정하는 프로퍼티를 두면 외부에서 getName과 setName을 통해 name에 간접적으로 접근할 수 있다.

Airbnb JavaScript 스타일 가이드