var foo = function() {
  return 1;
}

// 일반적인 함수로서 호출
foo(); // 1

// 생성자 함수로서 호출
new foo(); // foo {}

// 메서드로서 호출
var obj = { foo: foo };
obj.foo(); // 1

var foo = function() {};

// ES6 이전의 모든 함수는 callable이면서 constructor다.
foo(); // undefined
new foo(); // foo {}

// 프로퍼티 f에 바인딩된 함수는 callable이며 constructor다.
var obj = {
  x: 10,
  f: function() {
    return this.x;
  },
};

// 프로퍼티 f에 바인딩된 함수를 메서드로서 호출
console.log(obj.f()); // 10

// 프로퍼티 f에 바인딩된 함수를 일반 함수로서 호출
var bar = obj.f;
console.log(bar()); // undefined

// 프로퍼티 f에 바인딩된 함수를 생성자 함수로서 호출
console.log(new obj.f()); // f {}

// 콜백 함수를 사용하는 고차 함수 map. 콜백 함수도 constructor이며 프로토타입을 생성한다.
[1, 2, 3].map(function(item) {
  return item * 2
}); // 2, 4, 6

const obj = {
  x: 1,
  // foo는 메서드다.
  foo() {
    return this.x;
  },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
  bar: function() {
    return this.x;
  },
};

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

new obj.foo(); // TypeError
new obj.bar(); // bar {}

obj.foo.hasOwnProperty('prototype'); // false

// obj.bar는 constructor인 일반 함수이므로 prototype 프로퍼티가 있다.
obj.bar.hasOwnProperty('prototype'); // true

const base = {
  name: 'Son',
  sayHi() {
    return `Hi! ${this.name}`;
  },
};

const derived = {
  __proto__: base,
  // sayHi는 ES6 메서드다.
  // sayHi의 HomeObject는 derived.prototype을 가리키고
  // super는 sayHi의 HomeObject의 프로토타입인 base.prototype을 가리킨다.
  sayHi() {
    return `${super.sayHi()}. how are you doing?`;
  },
};

console.log(derived.sayHi()); // Hi! Son. how are you doing?

const derived = {
  __proto__: base,
  // sayHi는 ES6 메서드다.
  // 따라서 sayHi의 HomeObject를 갖지 않으므로 super 키워드를 사용할 수 없다.
  sayHi: function() {
    // SyntaxError
    return `${super.sayHi()}. how are you doing?`;
  },
};

const multiply = (x, y) => x * y;
multiply(2, 3); // 6

// 매개변수가 여러 개인 경우 소괄호 ()안에 매개변수를 선언한다.
const arrow = (x, y) => {...};

// 매개변수가 한 개인 경우 소괄호 ()를 생략할 수 있다.
const arrow = x => {...};

// 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다.
const arrow = {} => {...};

// concise body
const power = x => x ** 2;
power(2); // 4

// 위 표현은 다음과 같다.
// block body
const power = x => {
  return x ** 2;
}

const arrow = () => const x = 1; // SyntaxError

// 위 표현은 다음과 같이 해석된다.
const arrow = () => { return const x = 1; };

const arrow = () => {
  const x = 1;
}

const create = (id, content) => ({ id, content });
create(1, 'javascript'); // { id:1, content:"javascript"}

// 위 표현은 다음과 같다.
const create = (id, content) => {
  return { id, content };
};

// {id, content} 를 함수 몸체 내의 수미표 연산자문으로 해석한다.
const create = (id, content) => {
  id, content
};
create(1, 'javascript'); // undefined

const sum = (a, b) => {
  const result = a + b;
  return result;
}

const person = name =>
  ({
    sayHi() {
      return `Hi? My name is ${name}`;
    },
  }('Son'));

console.log(person.sayHi()); // Hi? My name is Son.

[1, 2, 3].map(v => v * 2); // [2, 4, 6]

const Foo = () => {};
// 화살표 함수는 생성자 함수로서 호출할 수 없다.
new Foo(); // TypeError
// 화살표 함수는 prototype 프로퍼티가 없다.
Foo.hasOwnProperty('prototype'); // false

function normal(a, a) {
  return a + a;
}
console.log(normal(1, 2)); // 4

// 단, strict mode에서 중복된 매개변수 이름을 선언하면 에러가 발생한다.
('use strict');

function normal(a, a) {
  return a + a;
} // SyntaxError

const arrow = (a, a) => a + a; // SyntaxError

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(function(item) {
      return this.prefix + item;
      // TypeError
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// [ '-webkit-transition', '-webkit-user-select' ]

// 화살표 함수는 상위 스코프의 this를 참조한다.
() => this.x;

// 익명 함수에 상위 스코프의 this를 주입한다.
// 위 화살표 함수와 동일하게 동작한다.
(function() {
  return this.x
}.bind(this));

(function() {
  const foo = () => console.log(this)
  foo()
}.call({ a: 1 })); // {a:1}

(function() {
  const bar = () => () => console.log(this)
  bar()()
}.call({ a: 1 })); // {a:1}

const foo = () => console.log(this);
foo(); // window

const counter = {
  num: 1,
  increase: () => ++this.num, // 여기서의 this는 전역 객체를 가리킨다.
};

console.log(counter.increase()); // NaN

window.x = 1;

const normal = function() {
  return this.x;
}
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 })); // 1

const add = (a, b) => a + b;

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
console.log(add.bind(null, 1, 2)()); // 3

const person = {
  name: 'Son',
  sayHi() {
    console.log(`Hi! ${this.name}`);
  },
};

person.sayHi(); // Hi! Son

function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
}

const person = new Person('Son');
person.sayHi(); // Hi Son

class Person {
  constructor() {
    this.name = 'Son'
    this.sayHi = () => console.log(`Hi ${this.name}`);
  }
}

class Person {
  // 클래스 필드 정의
  name = 'Son'
  sayHi() {
    console.log(`Hi ${this.name}`);
  }
}

const person = new Person();
person.sayHi();

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

  sayHi() {
    return `Hi! ${this.name}`;
  }
}

class Derived extends Base {
  // 화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다.
  sayHi = () => `${super.sayHi()}. how are you doing?`;
}

const derived = new Derived('Son');
console.log(derived.sayHi());
//Hi! Son. how are you doing?

(function() {
  // 화살표 함수 foo의 argumetns는 상위 스코프인 즉시 실행 함수의 arguments를 가리킨다.
  const foo = () => console.log(arguments);
  foo(3, 4);
})(1, 2);

// 전역에는 arguments 객체가 존재하지 않는다.
const foo = () => console.log(arguments);
foo(1, 2); // ReferenceError

function foo(...rest) {
  // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
  console.log(rest);
}

foo(1, 2, 3, 4, 5);
// [ 1, 2, 3, 4, 5 ]

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest); // [2, 3, 4, 5]
}

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest); // [3, 4, 5]
}

bar(1, 2, 3, 4, 5);

function foo(...rest, param1, param2);

foo(1, 2, 3, 4, 5); // SyntaxError

function foo(...rest1, ...rest2);

foo(1, 2, 3, 4, 5); // SyntaxError

function foo(...rest) {};
console.log(foo.length); // 0

function bar(x, ...rest) {};
console.log(bar.length); // 1

function baz(x, y, ...rest) {};
console.log(baz.length); // 2

function sum(...args) {
  // Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]가 할당된다.
  return args.reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

function sum(x, y) {
  return x + y;
}

console.log(sum(1)); // NaN

function sum(x = 0, y = 0) {
  return x + y;
}

console.log(sum(1, 2)); // 3
console.log(sum(1)); // 1

function logName(name = 'Son') {
  console.log(name);
}

logName(); // Son
logName(undefined); // Son
logName(null); // null

function foo(...rest = []) {
	console.log(rest);
}
// SyntaxError