자바스크립트 함수

자바스크립트 함수

일급 객체

일급 객체는 생성, 대입, 연산, 인자 또는 반환값으로 사용할 수 있는 대상이다.

일급 객체는 다음과 같은 조건을 만족해야한다.

• 무명의 리터럴로 표현
• 변수나 자료 구조에 저장 가능
• 함수의 매개변수에 전달 가능
• 반환값으로 사용 가능

자바스크립트의 함수는 일급 객체이고 다른 값들처럼 사용할 수 있다.

변수나 객체, 배열 등에 저장, 인수, 함수의 반환값으로도 사용될 수 있다.

함수와 다른 객체를 구분짓는 특징은 호출을 할 수 있다는 것이다.

함수의 정의 방법

일반적인 프로그래밍 언어의 함수 정의

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

일반적으로 함수명, 파라미터, 반환타입을 통해서 함수를 정의할 것이다.

자바스크립트는 함수를 정의하지 않고 만든다.

Function 생성자 함수

var add = new Function("x,y","return x+y;");
console.log(add(1,2));

Function 객체를 만들고 첫번째 문자열에 인자를, 두 번째 문자열에 구현부를 나타낸다.

그리고 Function 개체의 이름을 붙여 사용한다.

생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않는다.

함수 표현식

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

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당 할 수 있다.

함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있고 이러한 함수를 익명함수라고 한다.

함수 선언문

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

함수 선언문도 내부적으로는 자바스크립트 엔진이 Function 생성자 함수로 함수를 생성하며 생성자 함수 방식의 축약법이다.

함수 호이스팅

var res = add(1,2);

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

위 코드에서는 함수 선언문으로 함수가 정의되기 전에 함수 호출이 가능하다. 함수 선언문은 선언의 위치와 관련없이 어느 곳에서든 호출이 가능하며 이를 호이스팅이라고 한다.

호이스팅은 자바스크립트의 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성이다.

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장하여 함수 선언, 초기화 할당이 한번에 이루어진다.

그렇기 때문에 선언의 위치와 상관없이 어느 곳에서든지 호출이 가능한 것이다.

var res = add(1,2);

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

반면에 함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 VO에 함수를 할당하지 않고 runtime에 해석되고 실행된다.

함수 호이스팅이 함수 호출 전 함수를 선언해야 한다는 규칙을 무시하며 대규모 어플리케이션 개발시 너무 많은 코드를 VO에 저장하여 애플리케이션의 응답속도가 떨어질 수 있으니 함수 표현식만을 사용하는 것이 권장된다.

Call-by-value

원시 타입 인수는 값에의한 호출로 동작하며 함수 호출 시 매개변수에 값을 복사하여 함수로 전달한다.

함수 내에서 매개변수를 통해서 값이 변경되어도 원시 타입 값은 변경되지 않는다.

function plusNumber(number) {
  number += 1;
  return number;
}

var x = 0;

console.log(plusNumber(x));
console.log(x);

Call-by-reference

객체형 인수는 참조에 의한 호출로 동작하며 함수 호출 시 매개변수에 값이 복사 되지않고 참조 값을 전달한다.

함수 내에서 매개변수의 참조값을 이용하여 객체의 값을 변경하면 인수값도 변경된다.

function changeName(obj) {
  obj.name = "Kim";
}

var obj = {
  name : "Lee",
}

console.log(obj);
changeName(obj);
console.log(obj);

이와 같이 외부 상태를 변경시켜 부수 효과가 발생하는 함수를 비순수 함수라 하며 외부 상태가 변경되지 않는 함수를 순수함수라고 한다.

비순수 함수는 복잡성을 증가시키기 때문에 비순수 함수를 최대한 줄여 부수 효과를 억제해야한다.

가변 인자 함수

자바스크립트는 함수 호출 시 모든 인수를 전달하지 않거나 더 많은 인수를 전달 하여도 에러가 발생하지 않는다.

매개변수의 개수보다 인수를 적게 전달했을 때 전달되지 않는 매개변수는 undefined로 초기화 되며 더 많은 인수를 전달하면 초과된 인수는 무시된다.

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

console.log(add(1,2,3,"hello"));

이러한 자바스크립트의 특징때문에 런타임 시 호출된 함수의 인자 개수를 확인하고 동작을 다르게 정의 할 수 있다.

arguments 객체는 매개변수의 개수가 확정되지 않은 가변 인자 함수를 구현할 때 사용된다.

var add = function(x,y) {
  console.log(arguments.length);
  return x+y;
}

console.log(add(1,2,3,"hello"));

자바스크립트는 함수 호출 시 인수들과 함께 암묵적으로 arguments 객체를 전달한다.

arguments 객체는 배열의 형태로 인자 정보를 가지고 있지만 실제 배열은 아닌 유사 배열 객체이다.

즉시 실행 함수

함수의 정의와 동시에 실행되는 함수를 즉시 실행 함수라고 한다.

최초 한번 호출되면 다시 호출 할 수 없기 때문에 최초 한번만 실행이 필요한 초기화 처리등에 사용할 수 있다.

다른 스크립트 파일에 동일한 이름의 변수나 함수가 같은 스코프에 존재할 경우 원치 않은 결과를 가져올 수 있기 때문에 즉시 실행 함수 내에 처리 로직을 모아 충돌을 방지 할 수 있다.

기명 즉시 실행 함수

function func() {
  var a = 1;
  var b = 2;
  return a+b;
}

익명 즉시 실행 함수

(function () {
  var a = 1;
  var b = 2;
  return a+b;
}());

내부 함수

함수 내부에 정의된 함수를 내부 함수라고 한다.

function parent() {
  var parentVar = "parent";
  function child() {
    var childVar = "child";
  }
}

내부함수 child는 부모 함수 parent 변수에 접근할 수 있다.

부모 함수는 내부 함수의 변수에 접근할 수 없다.

또한 내부함수는 부모함수의 외부에서 접근할 수 없다.