#002 function

# 목차

- 함수의 종류

- 자바스크립트에서의 Call By Value & Reference

- this에 대해서

- ES6 함수 관련 추가 기능

---

1. 함수의 종류

---

1) 식별 함수 

- 함수명을 지정한 함수

2) 익명 함수 

- 함수명을 지정하지 않은 함수

- 예전에는 익명함수.name이 안나왔던 거 같은데 최신버전에는 나오네유~

3) 즉시 실행 함수

- 함수 정의와 동시에 실행한 함수

/**

  함수의 종류

*/

function identifiyFunction(){

  console.log("식별 함수");

}

let anonymousFunction = function(){

  console.log("익명 함수");

}

let immediatelyFunction = (function(){

  //own function area

  return function(){

    console.log("즉시 실행 함수");

  };

})();

console.log("functionName : ",identifiyFunction.name);

console.log(typeof identifiyFunction);

identifiyFunction();

console.log("functionName : ",anonymousFunction.name);

console.log(typeof anonymousFunction);

anonymousFunction();

console.log("functionName : ",immediatelyFunction.name);

console.log(typeof immediatelyFunction);

immediatelyFunction();

---

# 자바스크립트에서의 call by value & reference

---

1) call by value

    - 원시값에 대해서 적용된다. (ex 문자열 또는 숫자)

    - 값이 넘어가기 때문에 호출한 변수에는 영향이 없음.

let numberVal = 10;

let booleanVal = false;

let stringVal = "string value";

function callByValue(numberVal, booleanVal, stringVal){

  numberVal += 5;

  booleanVal = !booleanVal;

  stringVal.toUpperCase();

  console.log(`in function : number = ${numberVal}, boolean = ${booleanVal}, stringVal = ${stringVal}`);

}

console.log(`before call by value : number = ${numberVal}, boolean = ${booleanVal}, stringVal = ${stringVal}`);

callByValue(numberVal, booleanVal, stringVal);

console.log(`before call by value : number = ${numberVal}, boolean = ${booleanVal}, stringVal = ${stringVal}`);

2) call by reference

    - 객체를 넘기고자 할때 적용된다. (ex 배열도 객체라는 것을 기억하자)

    - 객체를 가리키는 변수가 넘어가게 된다.

    - 따라서, 이 변수를 이용해 객체를 변경시 함수를 호출한 변수에도 영향이 가게 된다.

let obj = {

  numberVal : 10,

  booleanVal : false,

  stringVal : "string Value"

}

function callByReference(obj){

    obj.numberVal += 5;

    obj.booleanVal = !obj.booleanVal;

    obj.stringVal.toUpperCase();

    console.log("in function : ",obj);

}

console.log("before obj : ",obj);

callByReference(obj);

console.log("after obj : ",obj);

*여기서 주의할 점은 객체를 넘기는 것이 아닌 객체를 가리키는 변수가 넘어간다는 것을 기억

let obj = {

  numberVal : 10,

  booleanVal : false,

  stringVal : "string Value"

}

function callByRefChange(obj){

    obj = {

      numberVal : 100,

      booleanVal : true,

      stringVal : "hello world!!"

    };

    obj.numberVal += 5;

    obj.booleanVal = !obj.booleanVal;

    obj.stringVal.toUpperCase();

    console.log("in function : ",obj);

};

console.log("before obj : ",obj);

callByRefChange(obj);

console.log("after obj : ",obj);

---

# this

---

- 함수형 프로그래밍 언어이지만 함수를 이용해 객체를 생성할 수도 있다.

- 추후 강의에서도 객체에 대해 더욱 상세히 다루겠지만 이번 강의에서는 함수를 이용해 객체를 생성하면 생기는 this에 대해서 알아보자

- this란 함수를 호출한 객체를 의미하며 컨택스트 객체라고도 불린다.

- 때때로 함수를 이용해 컨텍스트 객체만을 변경해야하는 경우가 생기는데 이를 도와주는 함수 3가지를 알아보자

1) call

    - 형식 : 함수명.call( 컨텍스트 객체, 매개변수1, 매개개변수2…)

    - 위와 같이 실행시 컨텍스트 객체가 지정한 객체로 변경된다.    

2) apply

    -  형식 함수명.apply( 컨텍스트 객체, 매개변수 배열)

    - call과 사용법은 거의 동일하지만 매개변수를 배열로 넘기는 것만 다름.

3) bind

    - 함수명.bind( 컨텍스트 객체 )

    - 반환 값으로 함수를 반환하는데 이를 이용해 호출시 컨텍스트 객체는 bind를 통해 지정된 객체로 영구히 바뀐다.

/**

  this의 기본 개념

*/

function Human(name){

  this.name = name;

}

Human.prototype.printName = function(){

  console.log("my Name is ",this.name);

}

let h1 = new Human("infinity-1");

let h2 = new Human("mark-1");

h1.printName();

h2.printName();

Human.prototype.printName.call({name:'wild Developer'});

Human.prototype.printName.apply({name:'too wild Developer'});

# 변수 해체

1) 매개변수 해체

- 파라미터 이름을 객체의 프로퍼티 명으로 지정하여 값을 전달 받는다.

2) 배열 해체

- 배열 순서에 맞게 변수를 지정하여 값을 전달 받는다.

3) 확장 연산자 ( … )

- 배열 순서에 맞게 변수를 지정하고 남은 원소의 모임을 전달 받는다.

*함수내에서 사용 가능한 배열과 비슷한 형태의 arguments를 대신해서 사용할 것을 권장.

let obj = {

  name : "es6",

  age : 2016,

  job : 'baeksu'

};

/**

매개 변수 해체

*/

function print({name, age, job, area="empty"}){

  console.log(`name : ${name}, age : ${age}, job : ${job}, area : ${area}`);

}

let array = ['wrong','way','king’];

/**

배열 해체 및 확장 연산자

*/

function printArray([prefix, ...etc]){

  console.log("prefix : ",prefix);

  console.log("etc : ",etc);

}

print(obj);

printArray(array);