Array Function

1. Array Function

엔진이 화살표 함수를 만나게 되면 빌트인 Function 오브젝트의 prototype에 연결된 메서드로 오브젝트를 생성하여 es6 변수에 할당한다.

// ES5
var es5 = function (one, two) {
    return one + two;
};

var sum = es5(1,3);
console.log(sum); // 4
// -----
// ES6
let es6_1 = (one, two) => {
    return one + two;
};
let es6_2 = (one, two) => one + two; // 한줄짜리면 {} 생략가능

let res = es6_1(1,3);
console.log(res); // 4

let res2 = es6_2(1,3);
console.log(res2); // 4
// ---------
let A = () => {};
let res3 = A();
console.log(A); // () => {}

let A2 = param => ({subject:"수학"});
let res4 = A2();
console.log(res4); // {subject: "수학"}
// -------------
// arguments
let B = (...arguments) =>{
    try{
        let args = arguments;
        console.log(args);
    } catch (e) {
        console.log("failed");
    }
}

B(1,2);
// ----------------
console.log("-----------------");
let Sports = function () {
    this.count = 20; // 이때 this는 생성하는 인스턴스 참조하므로 count 프로퍼티에 20이 설정
};

Sports.prototype={
    plus : function () {
        this.count += 1;
    },
    get : function () {
      setTimeout(function () { // window 오브젝트 함수
            console.log(this==window); // this가 window 오브젝트를 참조하므로 true
            console.log(this.plus); // this가 window 오브젝트를 참조하므로 콘솔에 undefined 반환
      },1000);
      console.log(this.plus);
      /* this가 newSports 인스턴스를 참조하므로 함수반환
      ƒ () {
        this.count += 1;
        }
       */
    }
};

let newSports = new Sports(); // new 연산자로 Sports 인스턴스 생성
newSports.get();
console.log("-----------------");

// ------------
let Sports2 = function () {
    this.count2 = 20; // 이때 this는 생성하는 인스턴스 참조하므로 count 프로퍼티에 20이 설정
};

Sports2.prototype={
    plus : function () {
        this.count2 += 1;
    },
    get : function () {
        setTimeout(() => { // 화살표 함수로 작성하면 this가 setTimeout()이 포함된 함수의 인스턴스를 참조
            console.log(this==window); // false
            console.log(this.plus);
            /*
            ƒ () {
                this.count2 += 1;
            }
             */
            this.plus(); // 화살표 함수 블록에서 this가 newSports2.get() 형태의 newSports2 인스턴스를 참조
            console.log(this.count2); // 21
        },3000);
        console.log(this.plus);
        /*
        ƒ () {
          this.count2 += 1;
          }
         */
    }
};

let newSports2 = new Sports2(); // new 연산자로 Sports 인스턴스 생성
newSports2.get();
console.log("-----------------");

// ------------
let D= function () {
    this.D_count=30;
};

D.prototype={
    add:()=>{
        this.D_count+=1; // 여기 this가 windows 오브젝트를 참조해서 +1 이 반영안된다.
    }
};

let newScore = new D();
newScore.add();
console.log(newScore.D_count); // 30
console.log(window.D_count); // NaN
// D-count 프로퍼티가 없으므로 undefined를 반환하게되고 여기에 1을 더함으로 NaN(not a Number)가 된다.

console.log("-----------------");

// ------------
let E = function () {
    this.E_count = 30;
};

E.prototype={
    add: function () {
        this.E_count += 1;
    }
};

let newScore2 = new E();
newScore2.add();
console.log(newScore2.E_count); // 31 -> function으로 작성하니 add 함수 반영잘됨
console.log(window.E_count); // 프로퍼티에서 E_count 가 없으므로 undefined 반환