끄적끄적

헷갈리는 화살표함수를 정리해보자 한다.

1. 왜생겼을까?
 - 함수를 좀 간결하게 쓰려고(한줄로)
 - javascript를 OOP 형태로 Class에 넣어서 코딩할때 this의 바인딩 문제를 해결하기 위해

2. 함수를 한줄로의 관점에서

function sum(a, b) { // 익숙한 표준 함수 : 길다 길어..
    return a+ b
}

let arrowSum = (a, b) => { // function 대신에 ()가 들어가서 좀 짧긴하지만 그래도...
    return a + b
};

let oneLineArrowSum = (a, b) => a + b; // { return expression } 을 a + b로 표현했다(간결하다)

function isPositive(number) { // 익숙한 표준 함수 2
    return number >= 0
}

let arrowIsPositive = (number) => number >= 0; // number >= 0 으로 간결하게 표현

let arrowIsPositive2 = number => number >= 0; // 파라미터가 하나 일때는 괄호를 제외할 수 있다

function randomNumber() { // 익숙한 표준 함수 3
    return Math.random()
}

let randomNumber2 = () => Math.random(); // 파라미터가 없을 경우 ()로 시작

document.addEventListener('click', function () { // 익숙한 표준 함수 4
    console.log('Click')
});

document.addEventListener('click', ()=> console.log('Click')); // 한줄로 깔끔하게!

3. this 바인딩 문제의 관점에서

class Person {
    constructor(name) {
        this.name = name
    }

    arrowPrintName() {
        setTimeout(() => {
            console.log(this);
            console.log('Arrow ' + this.name)
        }, 100)
    }

    normalPrintName() {
        setTimeout(function () {
            console.log(this);
            console.log('Function: ' + this.name)
        }, 100)
    }
}

person = new Person('이승우');
person.arrowPrintName() // Person의 this.name이 정상적으로 출력 + this는 Person을 가르킴
person.normalPrintName() // this는 엉뚱한 windows 전역변수를 가르킴(this.name은 당연히 출력 안됨)

4. 결론

 - 잘 만쓰면 코드도 깔끔해지고 특히 js에서 OOP로 코딩할때는 필수!

JS를 쓰면서 항상 헷갈렸던게 프로토타입이다. Class도 없고 Function을 Class처럼 쓰고.. 물론 새로나온 JS는 아니지만 어쨋든 헷갈리면서도 일하는데 불편함이 없어서 그냥 넘어가던걸 한번 정리하고자 한다. 참조한 문서는https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes이다.

JS는 prototype-based라고 한다. prototype은 필요한 메소드, 프로퍼티를 정의해놓고 그것을 상속해주기위한 도구라고 생각한다. 이것을 여러단계로 상속하면 prototype chain이라고 부르는 것 같다. 예제를 보자

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

const person1 = new Person('승우') // function으로 Class를 만들었던 JS는 참 비극이다.

이렇게 Object를 만들면 person1이 사용할 수 있는 메소드와 프로퍼티는 name과 greeting이여야 하는데 

person1.valueOf()을하면 먹힌다. Person에는 valueOf이라는게 없는데. 그렇데 프로토타입으로 부터 상속 받은것이다.

JS의 모든것은 Object이다. function, String, Number등등 그냥 다 Object이다. 그래서 Person function 또한 Object로 부터 상속받는다. 이러한 이유로 person1.valueOf()이 먹힌다는 말씀이시다.

조금만 더 정확히 기술하자면 Object.prototype 의 Object에 기술되어 있다. Object에 관한 문서를 보면 상당히 많은 메소드와 프로퍼티가 있지만 모두다 상속 되지 않는다. Object.prototype에 기술된 것들만 상속된다.

이부분을 약간만 응용하자만

const myString = 'This is my string.'; // String prototype으로 부터 split(), replace()와 같은 아름다운 메소드들을 상속 받기 때문에 myString.split()을 사용할 수 있다는 말이다.

조금 더 응용하자면 Date의 커스텀 prototype을 만들어서 내가 원하는 메소드를 구현하고자 한다.

Date.prototype.yyyymmdd = function () {
   var mm = this.getMonth() + 1;
   var dd = this.getDate();
   return [this.getFullYear(), (mm > 9 ? '' : '0') + mm, (dd > 9 ? '' : '0') + dd].join('-');
}; // yyyymmdd 메소드를 프로토타입에 정의한다.

var date = new Date();

var plusThreeDate = new Date(date.getTime() + (3 * 24 * 60 * 60 * 1000)); // 3일 뒤 Date 생성

plusThreeDate.yyyymmdd() // "2019-09-28"과 같이 yyyymmdd 메소드를 사용할 수 있다.