자바스크립트 함수

2018-02-05

1. 호출과 참조

  • 자바스크립트에서는 함수도 객체이다.
  • 함수 식별자 뒤에 괄호를 쓰면 자바스크립트는 함수를 호출하려 한다고 이해하고, 함수 바디를 실행한다.
  • 괄호를 쓰지 않으면 다른 값과 마찬가지로 함수를 참조하는 것이며, 그 함수는 실행되지 않는다.
  • 함수를 변수에 할당하면 다른 이름으로 함수를 호출할 수 있음.
  • 함수를 객체 프로퍼티에 할당할 수도 있다.
  • 호출과 참조 예제


2. 함수와 매개변수

  • 함수를 호출하면서 정보를 전달할 떄는 함수 매개변수(argument)를 이용해야 한다.
  • 함수를 호출하면 함수 매개변수는 변수 자체가 아니라 그 값을 전달 받는다.
  • 자바스크립트는 함수 f가 있다면 호출할 때 매개변수를 한 개 전달하든 열 개 전달하든 같은 함수를 호출한다.
  • 정해진 매개변수에 값을 제공하지 않으면 암시적으로 undefined가 할당된다.
  • 함수 매개변수 예제

2-1. 원시값 매개변수

  • 자바스크립트의 원시값은 원시값을 전달할 때 값이 복사되기 때문에 값 타입(value type)이라고도 말한다.
  • 함수 안에서 매개변수에 값을 할당해도 함수 바깥에 있는 어떤 변수에도 아무런 영향이 없다.
  • 함수 원시값 매개변수 예제

2-2. 객체값 매개변수

  • 객체는 참조타입(reference type)이라 부른다. 객체를 전달할 때 두 변수는 같은 객체를 가리키기 때문이다.
  • 하지만 함수 안에서 객체 자체를 변경하면, 그 객체는 함수 바깥에서도 바뀐다.
  • 함수 객체 매개변수 예제

2-3. 매개변수 해체

매개변수도 해체할 수 있다.

2-4. 매개변수 기본값

  • ES6에서는 매개변수에 기본값(default value)를 지정하는 기능도 추가됨.
  • 일반적으로 매개변수에 값을 제공하지 않으면 undefined가 값으로 할당됨.
  • 매개변수 기본값 예제


3. 메서드

4. this

5. 익명 함수

  • 함수를 선언하면 함수에 바디와 식별자가 모두 주어지지만, 익명함수에서는 함수에 식별자가 주어지지 않는다. 
    const g = function f(){ }
  • 이런 식으로 함수를 만들면 이름 g에 우선순위가 있다. 함수 바깥에서 함수에 접근할 때는 g를 써야하며, f로 접근하려고 하면 변수가 정의되지 않았다는 에러가 생긴다.

6. 화살표 표기법

  • ES6에서 새로 만든 문법. 화살표 표기법은 간단히 말해 function이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축 문법이다.
  • 화살표 함수는 this 바인딩을 하지 않고, 메소드 함수가 아닌 곳에 사용하는 것이 적당하다.
  • 화살표 함수에는 세 가지 단축 문법이 있다
    1. function을 생략해도 된다
    2. 함수에 매개변수가 단 하나 뿐이라면 괄호(())도 생략할 수 있다.
    3. 함수 바디가 표현식 하나라면 중괄호와 return 문도 생략할 수 있다.
  • 화살표 함수는 항상 익명이다. 화살표 함수도 변수에 할당할 수 있지만, function 키워드처럼 이름 붙은 함수는 만들 수 없다.
  • 화살표 함수는 익명 함수를 만들어 다른 곳에 전달하려 할 때 가장 유용하다
  • 화살표 표기법 예제
  • 화살표 표기법 this 예제
  • 화살표 표기법 참고 사이트


7. call, apply, bind

7-1. call

  • this를 특정 값으로 지정할 수 있다
  • call은 배열 대신 값들을 하나하나 전달하여 함수를 호출한다.
func.call(thisArg[, arg1[, arg2[, ...]]]);

// thisArg: 호출될 함수에게 지정될 this의 값(func 함수에서 this는 앞으로 이 값으로 해줘)

7-2. apply

  • apply는 배열 요소를 함수 매개변수로 사용해야 할 때 유용
func.apply(thisArg, [argsArray]);

// thisArg: 호출될 함수에게 지정될 this의 값

7-3. bind

전체 예제는 ch6.함수 참고.