본문 바로가기

JavaScript

[JavaScript] #3, Function 함수

반응형

JavaScript Function 함수


자바스크립트 함수는 일급 객체


일급 객체 조건
  • 변수나, 데이터를 구조 안에 담을 수 있음
  • 파라미터 전달 가능
  • return 가능
  • 동적으로 프로퍼티 할당 가능
  • 무명 가능

함수명을 생략하여 익명함수(anonymous function) 가능
익명 함수는 람다식 / 람다 함수라고도 함.


// 기명 함수표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};
// 익명 함수표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

함수 선언 3가지 방법


  1. 함수 선언식 → function 함수명(인자값) { return }
  2. 함수 표현식 → var 변수명 = function 함수명(인자값) { return };
  3. 생성자 함수 사용 → var 함수명 = new function(인자값1, 인자값2,,,,,함수 내용)

매개 변수(Parameter, 인자)


인자값을 넘길 때, 기본 자료형(Primitives type)이면 call-by-value, 객체 참조형(Object)일 경우 call-by-reference이다.

매개변수는 인수(argument)로 초기화 된다.

function sum() {
  var res = 0;

  for (var i=0; i < arguments.length; i++) {
    res += arguments[i];
  }

  return res;
}

console.log(sum());      // 0
console.log(sum(1,2));   // 3
console.log(sum(1,2,3)); // 6

Caller 프로퍼티

자신을 호출한 함수 의미함.

function foo(func) {
  var res = func();
  return res;
}

function bar() {
  if (bar.caller == null) {
    return 'The function was called from the top!';
  } else {
    return 'This function\'s caller :\n' + bar.caller;
  }
}

console.log(foo(bar));
console.log(bar());


결과

함수 안에 length 프로퍼티


함수명.lenght 선언시 매개 변수 갯수

arguments.length는 함수 호출시 매개변수의 수


함수 안에 __prototype__ 프로퍼티


[[Prototype]]과 같은 개념

자신 부모 역할을 하는 프로토타입 객체

prototype에 대해서는 따로 정리 필요


함수 호이스팅

자바스크립트는 모든 선언을 호이스팅 한다
모든 선언이란 ES6의 let, const를 포함한, var, let, const, function, class)
호이스팅이란 모든 선언을 해당 Scope 맨 위로 옮기는 것을 말한다.
자바스크립트 코드를 실행하기 전에 선언문을 해당 소코프 맨위로 옮긴다.

그래서 아래와 같이 square 함수가 아래 선언 되어 있어도 호출 가능하다.
함수가 실행되기 전에 선언문이 맨위로 옮겨지기 때문에.



var res = square(5);

function square(number) {
  return number * number;
}
하지만 아래와 같이 함수를 변수에 담는 함수 표현식으로 정의한 경우는 문제가 발생한다.
이럴 경우 변수 호이스팅이 일어나기 때문이다.
변수는 값이 할당 될 때 값을 같게 된다.

var res = square(5); // TypeError: square is not a function

var square = function(number) {
  return number * number;
}

이러면 에러 발생


참고

http://poiemaweb.com/js-function


반응형