function func() {}

// 이제는 코드를 보면 당연히 이해가 되어야 합니다.
func instanceof Function;
Object.getPrototypeOf(func) === Function.prototype;

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

console.log(add.length); //  2
console.log(add.name); //  add

// 변수의 값으로 함수가 선언된 경우
let f = function() {};

// 객체리터럴 안에 함수가 값으로 정의된 경우
let object = {
  someMethod: function() {}
};

console.log(f.name); //  'f'
console.log(object.someMethod.name); //  'someMethod' (Object는 생략해도 동일하게 작동합니다.)

function printThis() {
  console.log(this);
}

printThis(); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

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

// 'new'를 빠트린 채 생성자를 호출하면, 'this'는 전역 객체를 가리키게 됩니다.
Person("john");

// 의도치 않게 전역 객체의 속성이 변경되었습니다.
console.log(window.name); //   'john'

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

Person("john");

console.log(window.alert); // 'john'

alert("hello"); // TypeError : alert is not a function

// 위와 같이 전역 객체의 함수명과 일치되는 부분에 this 가 바인딩되면 전역 객체의 함수는 기능을 잃어버리게 됩니다.

function Person(name) {
  // 엄격 모드를 활성화 합니다.
  "use strict";

  // 'undefined'의 속성을 변경하려고 하고 있기 때문에 에러가 발생합니다.
  this.name = name;
}

Person("john"); // Cannot set property 'name' of undefined

function favoriteFood() {
  console.log(`${this.name}님이 좋아하시는 음식은 ${this.menu}입니다.`); // 지금은 this는 window를 가리킵니다.
}

const info = { name: "이근환", menu: "초밥" };
const favoriteFoodForMoong2 = favoriteFood.bind(info); // 하지만 favoritefood 함수에 info 객체를 바인딩 하였으므로

favoriteFoodForMoong2(); //  이근환님이 좋아하시는 음식은 초밥입니다.

function favoriteFood(menu) {
  console.log(`${this.name}님이 좋아하시는 음식은 ${menu}입니다.`);
}

const info = { name: "이근환" };

// favoritefoood함수에 call 메소드를 사용하여 info 변수와 인수를 불러와서 임시적으로 this의 값을 바꿔줍니다.
favoriteFood.call(info, "초밥");

// favoritefoood함수에 apply 메소드를 사용하여 info 변수와 배열 형태의 인수를 불러와서 임시적으로 this의 값을 바꿔줍니다.
// apply 메소드는 배열을 인수로 넘겨주고 싶을 때 사용하면 좋습니다.
favoriteFood.apply(info, ["떡볶이"]);

// 오즘에는 apply를 대체하여 이렇게 사용하기도 합니다. (...연산자의 사용 - 스프레드 연산자)
function doStuff(x, y, z) {}
let args = [0, 1, 2];
doStuff(...args);

function add(x, y) {
  //  'arguments[0]'에는 'x'와 같은 값이, 'arguments[1]'에는 'y'와 같은 값이 저장됩니다.
  console.log(arguments[0], arguments[1]);
  return x + y;
}

add(1, 2); // 1 2

function sum() {
  let result = 0;
  for (let item of arguments) {
    result += item;
  }
  return result;
}

sum(1, 2, 3, 4); //  10

function sum(...ns) {
  let result = 0;
  for (let item of ns) {
    result += ns;
  }
  return result;
}

sum(1, 2, 3, 4); //  10

function sum(...ns) {
  // 'for...of' 루프 대신에 'reduce' 메소드를 사용해서 합계를 구할 수 있습니다.
  return ns.reduce((acc, item) => acc + item, 0);
}

sum(1, 2, 3, 4); //  10

function printGrades(name, ...greades) {
  console.log(`${name} 학생의 점수는 ${grades.join("")} 입니다.`);
}

printGrades("moong2", 99, 93, 92); //  moong2 학생의 점수는 99, 93, 92 입니다.

function printGrades(...grades, name) {
    console.log(`${name} 학생의 점수는 ${grades.join(',')} 입니다.`);
}

// Syntax Error : Rest Parameter must be last formal parameter

// 바로 반환시키지 않고 function 키워드를 통한 함수 정의처럼 여러 구문을 사용하려면 curly braces(중괄호) ({...})으로 둘러싸줘야 합니다.
// '=>' 다음 부분을 중괄호로 둘러싸면, 명시적으로 'return' 하지 않는 한 아무것도 반환되지 않습니다.
const add = (x, y) => {
  const result = x + y;
  return result;
};

const add = (x, y) => {
  return x + y;
};

const negate = x => {
  return !x;
};

// const 변수명 = 파라미터 =>(이 화살표가 return임) 함수작성할 때처럼 식을 적어주면되는데 한줄이면 curly braces 없어도 되고 두줄이면 있어야한다.

const add = (x, y) => x + y;
const negate = x => !x;

function Person(name) {
  this.name = name;
  this.getName = () => {
    // 여기에서 사용된 'this'는 '함수가 정의된 스코프', 즉 'Person 함수 스코프'에 존재하는 'this'를 가리키게 됩니다.
    return this.name;
  };
}

const moong2 = new Person("moong2");
moong2.getName(); //  'moong2'

// 화살표 함수와 function의 차이점
// 화살표 함수는 선언됨과 동시에 this가 결정되지만 function은 호출됨과 동시에 this가 결정됩니다.

// 주의! 화살표 함수는 생성자로 사용될 수 없습니다.
const Person = name => {
  "use strict";
  this.name = name;
};

Person("moong2");
console.log(window.name); //  moong2

function Person(name) {
  this.name = name;
  this.getName = () => {
    // 여기에서 사용된 this는 함수가 정의된 스코프, 즉 Person 함수 내부의 this를 가리킵니다.
    return this.name;
  };
}

const moong2 = new Person("moong2");

// this를 바꿔보려 해도, 아무런 효과가 없습니다.
moong2.getName.call({ name: "min_zzz" }); //  'moong2'

const mary = {
  name: "mary",
  getName: () => {
    return this.name;
  }
};

// 위의 화살표 함수는 전역 스코프에서 정의되었기 때문에, 'this'는 전역 객체를 가리킵니다.
// `mary`의 메소드로 사용된다고 해도, 이 사실이 변하지 않습니다.
// 브라우저 환경의 전역 객체인 `window`는 `name`이라는 속성에 빈 문자열을 갖고 있기 때문에, 이 값이 대신 반환됩니다.
mary.getName(); // ''

const arr = [1, 2, 3, 4.5];
arr.slice(); //  [1,2,3,4,5]
arr.slice(2); //  [3,4,5]
arr.slice(2, 3); //  [3]

// 인수를 그대로 변환하는 함수(identify function)입니다.
const ident = x => x;
ident(); //  undefined

function hello(name) {
  // 매개변수는 'var' 변수와 같은 성질을 갖기 때문에, 재대입을 할 수 있습니다.
  if (name === undefined) {
    name = "Mary";
  }
  console.log(`Hello, ${name}!`);
}

hello("John"); //  Hello, John!
hello(); //  Hello, Mary!
hello(undefined); //  Hello, Mary!

// 'Mary'가 `name` 매개변수의 기본값이 됩니다.
function hello(name = "Mary") {
  // 코드가 훨씬 깔끔해졌습니다.
  console.log(`Hello, ${name}!`);
}

hello("John"); //  Hello, John!
hello(); //  Hello, Mary!
hello(undefined); //  Hello, Mary!