Class

사용법

class는 기본적으로 선언할때 class Name {...} 과 같이 선언한다
이는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 method를 정의하는 일종의 틀이다

쉽게 말해 class를 정의해 그 안에 객체 생성에 필요한 것들을 정리한다고 생각하면 될 것 같다

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 사용법
let user = new User("John");
user.sayHi();

사용 예시 코드를 살펴볼 때 드는 생각은 분명 class라고 선언했고, 할당은 객체처럼 하는 것 같은데 사용은 function처럼 사용하네! 였다

또한 method와 method사이에 ,로 구분하지도 않는다

천천히 알아보자

constructor

우선 constructor는 class 실행 시 최초 1회 실행된다
따라서 이를 이용해 초기화할때 사용하곤 한다

이때 constructor에 매개변수를 선언하는 것처럼 보인다
function에서 작동하던 매개변수가 constructor로 옮겨갔구나! 라고 생각하면 되겠다

따라서 constructor(name) { console.log(name) } 을 실행하게 되면 인수로 받은 name이 출력 될 것이다
function(매개변수) => constructor(매개변수)

class의 특징

class는 함수다!
이는 typeof로도 확인해볼 수 있다

하지만 이때 class내부에 정의된 method들은 열거 불가능(non-enumerable) 즉, 읽을 수 없다

따라서 for...in문으로 순회할때 method는 순회 대상에서 제외된다
(non-enumerable하기 때문에!)

또한 class는 stric mode로 실행된다

public class field / static class field

class Animal {
  legs = 4;
  tail = true; // public class field라 부른다
  // #name = 'unknown';

  // 최초 1회만 실행 => 초기화할때 많이 사용한다
  constructor(name) {
    this.name = name;
    this.stomach = [];
    // this.legs = 4;
    // this.tail = true; 이는 legs = 4 와 tail = true와 같은 역할을 한다
  }

  get eat() {
    return this.stomach;
  }

  set eat(food) {
    this.stomach.push(food);
  }
}

public class field의 역할은 무조건 사용되는 것들을 명시(강조)해주고 1순위로 할당해주는 역할을 한다(정적)
여기서는 legs = 4; / tail = true; 가 public class field로 사용되는 것이다

하지만 constructor의 내부에 있는 this.name도 역시 전달은 되지만 이건 runtime시에 실행된다

사실 결과적으로는 똑같은 행동을 수행하고 있는 것이다

class도 역시 getter와 setter를 나눌 수 있다
사용방법도 기존의 getter와 setter와 동일하다
현재 코드에서 get eat()과 set eat()이 getter와 setter이다
또한 사용법도 naming.eat = '먹이' / naming.eat; 과 같이 사용한다

이번엔 private class field에 대해서 알아보자
public class field는 외부에서 접근이 가능하다
하지만 private class field는 외부에서 접근을 제한한다

선언하는 법은 간단하다 변수 앞에 #을 붙이면 된다

class 상속

class도 함수와 마찬가지로 상속이 가능하다

class Tiger extends Animal {
  constructor(name) {
    super();
    this.pattern = '호피무늬';
  }

  // instance method이다 -> Tiger만 사용할 수 있으므로
  hunt(target) {
    this.prey = target;
    return `${target}에게 접근`;
  }

  static bark(sound) {
    return sound + '소리를 냄';
  }
}

선언하려는 class 뒤에 상속받으려는 class를 extends를 붙여서 선언해주면 된다
하지만 상속을 받았다면 constructor의 내부에 반드시 super() method가 있어야한다
이때 super()의 역할은 함수의 상속에서 봤던 call과 같은 역할을 한다

하지만 constructor를 작성하지 않아도 되는 한 가지 경우가 존재한다
바로 상속을 받은 후 추가적인 내용이 없을때이다
예를 들어 B라는 class가 A라는 class에서 1,2,3,4를 상속받았다고 하자 이때 B라는 class에서 1,2,3,4만 가지고 있어도 된다면 B에는 constructor는 생략이 가능하다는 의미이다

참고로 private class field는 상속이 불가능하다

static method

또한 class내부에 static method를 만드는 방법도 상당히 간단하다
바로 method 이름 앞에 'static'을 기재하기만 하면 된다

번외(static과 instance의 차이)

static과 instance에 대해 여전히 헷갈릴 수 있다
하지만 class를 배웠으니 이를 활용해보려고 Array의 경우를 살펴보자

예를 들어 arr = [1,2,3,4]인 배열이 있다고 가정해보자
이때 배열의 원소의 합을 구하기 위해 reduce method를 사용할 수 있다

const sum = arr.reduce((acc,cur) => acc+cur);

이때는 instance 배열인 arr에 직접적으로 작동한다

이번엔 arr이 배열인지 확인하기 위해 사용하는 method인 isArray를 살펴보자

console.log(Array.isArray(arr));

차이가 느껴지는가?

바로 reduce는 instance에 isArray는 JS에 존재하는 Array를 뿌리로 가진다

따라서 reduce는 instance method라고, isArray는 static method라고 부른다

코드의 대략적인 틀을 살펴보면 다음과 같다

class Array {
		reduce() {
} // arr.reduce() 처럼 사용하기 때문에 instance 

		forEach() {
} // arr.forEach() 처럼 사용하기 때문에 instance

		static isArray() {
	} // Array.isArray()로 사용하기 때문에 static
}

이때 method만 static으로 정의할 수 있는가? 그렇지 않다 객체와 같은 변수들도 static으로 정의할 수 있다

그렇다면 static으로 사용되는 것들만 따로 한 번에 정리하고 거기서 필요할때마다 가져다 쓰는게 좋은 코드가 아닌가? 라는 의문이 든다

이는 매우 신중해야한다
이유는 static으로 정의된 것들은 전역의 오염에 대한 위험이 있다
따라서 전에 언급했던 캡슐화(encapsulization)를 사용해 전역의 오염을 방지해주는 것이다

번외(객체 지향 프로그래밍과 함수형 프로그래밍)

객체지향 프로그래밍은 this를 활용한 것들이 많다
이는 대상을 어떤 행동을 시키겠다라고 선언하는 방식이다
따라서 치밀하고 꼼꼼한 설계가 필요하다
MVC패턴등을 사용해 설계가 이루어진다

그에 반해 함수형 프로그래밍은
행동(대상) 과 같은 형식으로 설계한다
따라서 행동을 바꾸거나 대상을 바꾸어 자유로운 조립이 가능하다
이는 재사용이 용이하여 최근에 많이 사용하는 추세이다

객체지향 프로그래밍과 함수형 프로그래밍은 이 정도 내용으로는 빈약한 감이 있다
따라서 앞으로 공부하면서 틈틈히 알아보는 것이 좋다

이벤트 바인딩

이벤트 바인딩이랑 기존에 있던 tag나 class에 이벤트를 부여하여 작동하도록 하는 것이다
attach event라고도 부른다

function handleClick() {
  console.log('clicked');
}

button.addEventListener('click', handleClick);

함수 추가 정리

함수

생성자 함수는 기본적으로 getter와 setter를 구분하지 못한다
따라서 get eat과 같은 method는 사용할 수 없다

call과 apply 그리고 bind

기본적으로 셋 다 능력을 빌려서 사용하는 것에는 변함이 없다 하지만 미미한 차이가 있다

• call과 apply는 함수를 대신 실행시켜주는 역할을 하고 있지만 bind는 실행은 시키진 않는다
• call은 인수를 넘겨줄 때 하나하나씩 넘겨주지만 apply의 경우 배열로 묶어 한 번에 전달한다
• bind는 변수에 새로운 함수를 binding하여 할당한다
• bind는 함수가 바로 실행이 되면 안되는 순간에 유용하다

이를 이용한 debounce와 throttle을 찾아보는 것이 좋다

함수에서 static method는 Tiger.bark = function() {} 과 같이 외부에 선언하여 지정해줄 수 있다