weekend studies : 함수

함수란:

함수의 형식은 다음과 같다

function 함수이름(매개변수1, 매개변수2){
   	실행할 코드
   	return 결과값;
}

함수는 정의 하는 것으로만 실행되지 않고 호출을 해야 실행이된다

정의는 이렇게 하고 =>

1. 함수 선언문으로 정의
function foo(x){ return x*x };

2. 함수 리터럴로 정의
var foo = function(x){return x*x};

3. 생성자로 정의
var foo = new Function("x","return x*x");

4. 화살표 함수 표현식으로 정의
var foo = x => x*x

호출은 이렇게 한다 =>

1. 함수 호출
var f = foo라는 함수이름(3);
2. 메서드 호출 
객체이름();
obj.n();
예시)-------------------------------
var foo ={
  x:0,
  y:2,
  z: function(){
    return this.x + " " + this.y;
  }
}
foo.z();// '0 2'
------------------------------------
3.생성자 호출
> var obj = new Object();

함수의 실행 흐름은 이러하다 =>

1. 호출한 코드에있는 인수가 함수 정의문의 인자에 대입
2. 함수정의문의 중괄호 안에 작성된 프로그램이 순차적으로 실행
3. return문이 실행되면 호출한 코드로 돌아감. return문의 값은 함수의 반환값이 됨
4. return문이 실행되지 않은 상태로 마지막 문장이 실행되면 호출한 코드로 돌아간 뒤 
   undefined가 함수의 반환값이 됨. 

함수의 인수가 여러개일 때 인수의 순서를 착각하기 쉽고 함수 수정이 필요해지므로 객체의 프로퍼티에 인수를 담아서 넘기면 간단해진다.

↓foo라는 객체에 여러 인수를 담아서 setNum이라는 함수의 매개변수에 전달인자로 사용.

function setNum(params){
  console.log(params); //{ x: 1, y: 0, vx: 10, vy: 15 }
  return foo.vx * 2
}
var foo={
  x:1,
  y:0,
  vx:10,
  vy:15,
}

console.log(setNum(foo)); //20

위 그림을 보면 생성자 함수를 이해하기 쉽다.

함수안에서 매개변수는 변수처럼 사용하수 있으며 함수가 결과값을 반환하는 경우에 return구문을 사용할수있다. return구문을 사용하면 함수는 실행을 멈추고 뒤에있는 결과값을 반환한다. 함수의 실행을 종료하되 결과값을 반환하지 않아도 될때는 결과값을 생략 할수있다.

매개변수는 parameter. 함수를 호출할때 전달되는 인수는 arguments라고 부른다.
매개변수가 함수 선언시 작성되는 변수라면, 전달 인자는 함수가 호출 될 때 전달되는 값이다.

자바스크립트는 arguments의 개수와 parameter의 개수가 달라도 에러가 발생하지 않는다.
이는 argument객체가 함수를 호출할 때 함수 내부로 전달되기 때문이다.
arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 말한다.
arguments 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있다. arguments[1]이렇게 접근할수있다.

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

매개변수에 전달인자(arguments) 즉 호출될 때 전달되는 값을 여기 저기 넣어주면서 어떤 작용을 하는 지 위의 예시를 보며 이해를 해보자.

아래에 보이는 Array.prototype.slice.call(arguments)는 arguments객체를 배열로 바꾸기위해서 배열의 프로토타입에 정의된 slice메소드를 호출해서 arguments객체의 요소들을 복사하는 새로운 배열을 만든 것이다.

아래의 예시들은 드림코딩 엘리님의 강의에서 가져온 예시인데 예전에는
첫번째 사진 처럼 했던 것을 es6에 새로추가된 기본형매개변수 처리로 인해 =연산자를 이용하여 할당될 인자값을 함께 괄호안에 작성해주는 예시이다.

아래 rest parameter는 이해가 더 필요할거라 나중에 보충해서 쓰도록함.