[JavaScript][clean-code] 직접 접근 지양하기

* 직접 접근 지양하기

- 직접 접근이 가능하면 발생할 수 있는 문제를 예시를 통해 확인

 

* 예시

const model = {
  isLogin : false,
  isValidToken : false
};

function login() {
  model.isLogin = true;
  model.isValidToken = true;
}

function logout() {
  model.isLogin = false;
  model.isValidToken = false;
}

someElement.addEventListener('click', login)

• someElement를 click하였을때 login function이 실행된다.
• 이때 model에 쉽게 접근할 수 있는점이 문제점이 된다.

* 해결방법

• this를 사용하거나 객체, 혹은 함수를 쓰든 객체를 건드는 영역을 따로 만든다.
  • 객체에 접근하는 권한을 확실히 설정할 수 있다.
• 어디서나 간단하게 접근을 하여 사용을 할 수 있던 방법을 지양하고 함수에 위임을 한뒤 사용한다.
  • 데이터에 접근할때는 항상 안전하게 접근을 해야 한다.

* 직접 접근을 지양하는 코드 예시

const model = {
  isLogin : false,
  isValidToken : false
};

// model에 대신 접근 (Bad)
function setLogin(bool) {
  model.isLogin = bool;
}

// model에 대신 접근 (Bad)
function setToken(bool) {
  model.isValidToken = bool;
}


// model에 직접 접근 X (Good)
function login() {
  setLogin(true);
  setValidToken(true);
}

// model에 직접 접근 X (Good)
function logout() {
  setLogin(false);
  setValidToken(false);
}

someElement.addEventListener('click', login)

• 단계를 나누고 레이어만 분리해도 안전한 코드를 만들 수 있다.
• 직접 접근하지 않고 접근할 수 있는 함수나 객체의 메서드를 통해서만 접근할 수 있도록하면 안전하게 만들 수 있다.
• get접근자, set 설정자를 이용한다. (안전하게 property들을 가져올 수 있다.)