중첩함수

TodoList를 만드는 과정에서 변수의 유효범위에 대해서 다시 한 번 생각해보게 되는 상황이 발생했다.

보통 c , c++ 만 이용해서 프로그램을 짜다가 js로 코드를 짜는데 어색한 상황이 발생했다.

isValid = (value) => {
  if (!value) return false;
  console.log(value.trim());
};

addTodoItem = ({ target, key }) => {
  //여기서 isValid를 참조할 수가 없다. undefined라는 에러가 뜸
  if (key === "Enter" && isValid(target.value)) {
    console.log("Enter! valid!");
  } else if (key === "Escape") {
    console.log("ESC! cancel!");
  }
};

이 경우에서 보통은 자연스럽게 외부의 함수를 갖다 쓰면서 프로그램을 만들어 가는 습관이 있었는데 js에서는 유효 범위를 잘 생각했어야 했다. 그래서 이런 경우 어떻게 해결하는지 찾아보는데 중첩함수라는 것에 대해서 알게 되었다.

중첩함수

function sayHiBye(firstName, lastName) {

  // 헬퍼(helper) 중첩 함수
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert( "Hello, " + getFullName() );
  alert( "Bye, " + getFullName() );
}

중첩함수를 활용하게 되면 함수 블록 안에서 내가 사용하고 싶은 isValid 함수를 선언하고 그 블록 안에서 선언했기 때문에 사용할 수 있어서 문제가 해결되었다.

addTodoItem = ({ target, key }) => {
  //이 함수를 코드블록 안에서 사용하기 위해 블록 안에서 선언함
  function isValid(value) {
    if (!value) return false;
    console.log(value.trim());
  }

  if (key === "Enter" && isValid(target.value)) {
    console.log("Enter! valid!");
  } else if (key === "Escape") {
    console.log("ESC! cancel!");
  }
};

그런데 이 부분에서 렉시컬 환경 등에 대한 복잡한 문제가 있어서 어떤 식으로 코드를 짜서 함수 내부에서 다른 함수를 참조할 수 있을지 다른 방법은 뭐가 있는지 잘 모르겠다.

결론

추가적으로 다른 사람의 코드를 봤을 때 당연하게 다른 함수를 가져다 쓰는 것을 봤는데 this 를 잘 활용하면 충분히 쓸 수 있다.

클래스 안에서 메서드를 정의해놓고 다른 메서드를 그 메서드 코드블록 안에서 사용할 수 없는것인가를 고민했는데 당연하게도 this.함수명 이런 식으로 사용하면 가능하다. 클래스가 객체로 생성되면 그 객체를 통해서 함수를 사용하기 때문에 this 를 통해서 다시 다른 메서드에 접근하는 것이기 때문에 충분히 유효한 범위 안에 있는 것이다.

출처: (https://ko.javascript.info/closure)