Effective JavaScript라는 책에서 말했듯이 "함수는 JavaScript의 핵심"이며 이것이 사실이라고 생각하는 이유 중 하나는 다른 언어가 데이터를 조작하는 데 다른 기술을 사용하는 반면 JS 함수만 다음과 같은 역할을 수행하기 때문입니다. 프로시저, 메서드, 생성자 , 심지어 클래스와 모듈까지. 따라서 JS 함수를 깊이 이해하고 이를 다양한 컨텍스트에서 효과적으로 사용하는 방법을 알고 있으면 JavaScript의 상당 부분을 마스터하는 데 도움이 됩니다.

JS에서 Function, Method 및 생성자 호출의 차이점은 무엇입니까?

OOP를 사용하는 다른 언어에서 우리는 함수, 메서드, 클래스 생성자 또는 세 가지 다른 것을 알고 있지만 JavaScript에서는 함수라는 단일 구조의 다른 패턴일 뿐입니다.

기능

 function serverListen(port){
     return `The server is listening at ${port}`;
 }```



## Methods

Meanwhile, methods in JavaScript are just functions that happen to be object properties.



```javascript
const server = {
    startServer: function(){
        try{
            serverConnexion(this.databaseName, this.serverPort);
            console.log(`The server has started listening on port: ${serverPort}`);
        }catch(error){
            throw new Error(error);
        }
    },

    databaseName: "auth_db",
    serverPort: 4937,
};


server.startServer(); // The server has started listening on port: 4937

자바스크립트
하지만 메서드가 아닌 함수에서 this 키워드를 사용하는 것은 전역 개체(또는 창 개체)를 참조하기 때문에 대부분 불필요합니다.

 function runServer(){
    return `The server is listening on port: ${this.serverPort}`
 }

console.log(runServer()); // The server is listening on port: undefined

전역 객체에 serverPort 속성이 없으므로 undefined 로 설정됩니다.

이러한 종류의 실수를 신속하게 포착하기 위한 좋은 방법은 this ~ undefined 의 기본 바인딩을 설정하는 ES15의 엄격 모드를 사용하는 것입니다.

 function runServer(){
    "use strict"; // 👈
    return `The server is listening at port: ${this.serverPort}`
 }

console.log(runServer()); // error: cannot read property "serverPort" of undefined

생성자

함수와 달리 생성자는 다음 값으로 완전히 새로운 개체를 전달합니다.

function UserData(password, email){
    this.password = password;
    this.email = email;
}

const user = new UserData("@#*&*87*#IOI*&^", "[email protected]");

user.email; // [email protected]

생성자 호출의 주요 목표는 새 객체를 반환할 수 있는 new 키워드를 사용하여 객체를 초기화하는 것입니다.

여기까지 읽어주셔서 감사합니다! 🎉🎉🎉

다가오는 에피소드를 읽고 싶다면 저를 팔로우하는 것을 잊지 마세요 😉