LHJ

I'm a FE developer.

16-4. 자바스크립트 특징 / 메소드 형태

06 Dec 2020 » js_beginner

16-4. 자바스크립트 특징 / 메소드 형태

지금까지 다뤘던 메소드와 함수 형태를 정리합니다.

메소드 호출 형태

  • 데이터 형태

    • 배열: [“book”, “책”, 123]

  • OOP의 일반적인 형태

      var data = ["book", "책", 123];
  var obj = new Array();
  var result = obj.concat(data);
  console.log(result); // ["book", "책", 123]
    1. new Array()로 인스턴스 생성
    2. obj.concat(data);
      obj 인스턴스의 concat() 호출
      데이터를 파라미터로 넘겨줌
    3. JS는 일반적으로 이 방법을 사용하지 않고 아래의 방법을 사용

    아주 일반적인 형태로 인스턴스를 활용해 메소드를 호출한다.
    오브젝트를 활용해 메소드를 호출하는 경우도 있지만 대부분 인스턴스를 활용한다.

  • 자바스크립트 형태

    • 데이터로 메소드 호출

        var data = ["book", "책", 123];
  var result = data.concat();
  console.log(result); // ["book", "책", 123]
      1. data.concat()
      2. 엔진이 data 타입에 따라 오브젝트 결정
        원래는 말이 안됩니다.
        자바스크립트 특성상 가능한 겁니다.
        자바스크립트 엔진이 data 타입을 파악해 빌트인 Array 오브젝트의 prototype에 연결되어있는 메소드로 인스턴스를 만들어서 그 인스턴스의 concat 메소드를 호출하는 겁니다.
        이때 data를 내부에서 파라미터로 넘겨주는 겁니다.
      3. data가 배열이므로 Array의 concat() 호출
        data를 파라미터로 넘겨 줌

    • 오브젝트의 함수 호출

        var data = ["book", "책", 123];
  var bookObj = {
      concat: function (data) {
          return data.concat();
      }
  }
  console.log(bookObj.concat(data)); // ["book", "책", 123]

      위 방법은 꽤나 많이 사용하는 아주 심플한 방법입니다.
      일단 위 방식은 new 연산자는 사용할 수 없습니다.
      즉, bookObj 안에 공통적인 내용이 들어간다는 겁니다.
      예를 들어, 회사 전체에 공통으로 사용하는 어떤 기능이 있다고 합시다.
      그런 것들을 위와 같이 작성해놓으면 그런 것들은 인스턴스를 만들 필요가 없으므로 위 처럼 심플하게 사용할 수 있습니다.
      인스턴스를 만들지 않으므로 메모리를 많이 차지하지도 않는다.

    • 인스턴스의 메소드 호출

        var data = ["book", "책", 123];
  var Book = function (data) {
      this.data = data;
  }
  Book.prototype.concat = function () {
      return this.data.concat();
  }
  var oneInstance = new Book(data);
  console.log(oneInstance.concat()); // ["book", "책", 123]

  • Object 확장

    • 네임스페이스(NameSpace)로 사용
    • Book = {};
    • Book.Javascript = {}; Book.Html = {};
      위와 같이 작성하면 Javascript, Html은 오브젝트가 되고 Book은 네임스페이스가 됩니다.
      예를 들면, 책을 관리하는 게 있고, 회원을 관리하는 게 있습니다.
      그리고 각각에 속한 메소드들이 있습니다.
      그런데 이를 하나로 통합해버리면 서로 메소드 이름이 중첩되면 사용하기 어렵잖아요?
      그때 이런식으로 업무별로 그룹핑해서 오브젝트로 사용하는 겁니다.
      이를 네임스페이스라고 합니다. 만약 Book.Javascript.abc가 있다면, Book.Javascript가 네임스페이스가 되는 겁니다.

메소드 사용 팁

  • 메소드를 알 수 없을 때

    • MDN 활용 예시

      각 메소드의 정의를 시간날 때 읽어보시기 바랍니다.
      그것이 자바스크립트를 잘하는 방법입니다.
      지름길은 없습니다. 이렇게 감을 잡으셔야됩니다.
    • MDN에서 “오브젝트 이름”으로 검색
    • 왼쪽의 리스트에서 메소드 이름을 찾습니다.
    • 메소드 이름이 시맨틱을 갖고 있으므로 메소드 이름으로 기능 예측 가능

  • 메소드를 알고 있을 때

    • 기능을 정확하게 사용하기 위해 사용

Related Posts