Study/JavaScript(Clean code)

[JavaScript][clean-code] 함수, 메서드, 생성자

갈푸라떼 2022. 6. 9. 16:27

* 함수, 메서드, 생성자

  • 자바스크립트의 함수는 많은 일을 한다.
  • 함수는 일급객체로 동작하다보니 고차함수로 쓸 수도 있고 함수형 프로그래밍도 가능
  • 그렇다보니 자바스크립트의 함수의 사용도가 넓은것에 따라서 오는 어려운 부분이 있다.
  • 어려운 부분중 하나인 함수, 메서드, 생성자 구분이다.

* 자바스크립트의 함수는

  • 1급 객체
  • 변수나, 데이터가 담길 수 있다.
  • 매개변수로 전달 가능 (콜백 함수)
  • 함수가 함수를 반환 가능 (고차 함수)

* 자바스크립트 this

- this가 전부 다른고 사용도 또한 다르다.

  • 함수의 this
    • func(); // 전역객체

 

 

  • 메서드에서의 this
    • 메서드란?? 객체에 의존성이 있는 함수, OOP 행동을 의미 
    • 메서드에서의 this는 호출된 객체를 바라본다.
    • obj.method();

 

  • 생성자 함수
    • 생성자 함수란?? 인스턴스를 생성하는 역할을 한다. ex) Class
    • 생성자 함수에서의 this는 생성될 instance를 가리킨다.
    • const instance = new Func();

* 함수  예시

// 함수
function func() {
  return this;
}

* 객체의 메서드 예시

// 객체의 메서드 예시
1. [].map()
2. 'str'.length

* 메서드 예시

// 이전 방식 key : value형식
const obj = {
  conciseMethod : function() {
    return this;
  },
};

// ES2015이후 방식
const obj = {
  method() {
    return this;
  },
};

* 생성자 함수 및 Class 예시

  • ES6부터 Class가 나와서 쓸 필요가 없지만 사용하는 사람이 있으므로 알아두면 좋으니 참조
// 생성자 함수
function Func() {
  return this;
}

// class
class Func {
  constructor() {

  }
}

 

(결론적으로)

함수인가 객체의 메서드인가 생성자 함수인가에 대한 구분을 해야한다.