vanilla js로 했을 때 키워드 관련 질문입니다! 조언좀 주세요 ㅠㅠ

JavaScript
1

안녕하세요! vanilla js로 코딩중입니다!

다만, 한 가지 궁금한 점이 있습니다.

현재 함수로 컴포넌트를 만들듯이 작성하고 있는데, 함수 또는 변수를 만들때 this를 붙여야 하나 const 또는 let을 붙여야 할까에 대한 고민이 많습니다…

즉, 예를들어

export function PostList({ $target, posts }) {
    const $postList = document.createElement('section');

    const generateHTML = () => { console.log('hello') };

    this.render = () => {
        $target.insertAdjacentElement('beforeend', $postList);
    }
}

cosnt postPage = new PostPage({ ... });

postPage.render() // ( Ok )

postPage.generateHTML() // ( No )

와 같이 했을때, this로 함수를 선언하는 경우 인스턴스에서 참조가 가능하지만, const 또는 let은 그 것이 불가능 하다고 알고 있습니다.

따라서, 현재로써 인스턴스에서 사용할 함수 또는 변수는 this를 붙이고 현재 함수에서만 사용되는 경우에는 const 또는 let으로 붙여 선언하고 있습니다…

이 부분은 어떠한 기준으로 코드를 작성하는 것이 옳을지 궁금하네요…

선배님들은 어떻게 생각하시는지? 그리고 보통 함수로 컴포넌트를 만들 때 어떻게 작성하시는지 궁금하네요~

2

저는 외부에서 접근하게 만들려면 this를 쓰고, private 메소드처럼 쓰려면 내부 함수로 씁니다

1개의 좋아요
3

Javascript에 class가 생기기전의 방식으로 코드를 작성 중이신 것 같습니다.

  1. 왜 class를 사용하지 않고 함수로 작성하고 계실까요?
  2. 왜 prototype을 사용하지 않고 계실까요?

위 두가지 질문이 핵심적인 내용이 될 것 같습니다.

1번은 class를 사용할 수 없는 상황 (크로스 브라우징 및 transpiler 사용 안함)일 수 있기 때문에 넘어가고,

2번의 경우 해당 클래스(컴포넌트)를 상속하는 일이 생기게 된다면 굉장히 중요합니다.

private 함수는 constructor 내의 변수로,
public 함수는 prototype 함수로 정의해서 사용하는 것을 추천드립니다.

관련 내용은 prototype chaining에 대해서 알아보시면 좋을 듯 합니다.

1개의 좋아요
5

감사합니다!!!

6

감사합니다! 많은 도움 되었습니다!!!