[JS] 함수(function)

함수(Function)

: 한 번 정의하면 몇 번이고 실행할 수 있고, 호출할 수 있는 javascript 코드 블록.

함수 선언식(Function Declarations)

function 함수명 () {

구현 로직

}

- 변수를 정의하고 함수 객체를 변수에 할당.

- 호이스팅에 영향을 받음.

- 진짜 문장 아님. -> 반복문 내부, 조건문, try/catch/finally, with문 내부에 들어갈 수 없음.

함수 정의 표현식(Function Expressions)

var 함수명 = function () {

구현 로직

}

- 호이스팅에 영향 받지 않음.

- 클로저, 콜백으로 사용.

ref) callback: 다른 코드의 인수로서 넘겨주는 실행 가능한 코드.

closure: 내부함수가 외부함수의 context에 접근할 수 있는 것.

함수의 return 값

- return 다음의 표현식의 값.

- undefined: return문이 없거나 return문 뒤에 표현식이 없을 경우.

this

- 키워드. 변수 x, 프로퍼티 이름 x -> 유효범위(scope)가 없고 중첩 함수는 호출자의 this를 상속하지 않음.

- 일반적인 함수 호출 시, this === global 객체(non-strict mode) / undefined(strict mode)

- 메서드 호출 시, this === 호출한 객체(호출 컨텍스트)

- var self = this 숙어

var o = {

m: function() {

var self = this;

console.log(this === o); // true

f();

function f() {

console.log(this === o); // false: this는 global or undefined

console.log(self === o); // true

}

}

};

o.m();

생성자 호출

- 함수는 메서드 호출 앞에 new 키워드가 있을 때.

- 매개변수가 없으면 괄호 생략 가능. var o = new Object;

- this === 새로  생성된 객체. 

- 보통 return 키워드 사용 안함. 새로 생성한 객체를 반환.

함수의 전달인자와 매개변수

- 매개변수의 타입, 개수 검사 x.

전달인자의 개수가 적을 때

- undefined 값으로 설정됨.

- optional한 전달인자로 활용 가능.(a = a || [])

전달인자의 개수가 많을 때 (varargs 함수 - Arguments 객체)

- arguments 객체를 이용하여 접근 가능. 숫자 인덱스로 접근하는 유사 배열 객체.

- arguments.length: 전달인자의 개수.

- arguments.callee: 프로퍼티가 현재 실행되고 있는 함수를 참조. 이름 없는 함수의 재귀 호출에 용이.

- arguments.caller: 해당 함수를 호출한 함수를 참조. 호출 스택에 접근 가능.

함수 프로퍼티, 메서드, 생성자

- 프로퍼티 정의하기

- 함수가 여러 번 호출되어도 그 값이 유지되어야 하는 '정적'변수가 필요할 때 사용.

mycnt.cnt = 0; // 함수 객체의 cnt 프로퍼티 초기화.

function mycnt() {

return mycnt.cnt++;

}

ref) 클로저로 활용 시

var mycnt() = (function() {

var cnt = 0;

return function() { return cnt++; };

} ());

- arguments.length 프로퍼티, prototype 프로퍼티

- call(), apply(), bind() 메서드

f.call(o, 1, 2); // 객체 o를 호출 컨텍스트로 함수 f를 호출. 전달인자는 1, 2. 함수 f 내에서 this === o.

f.apply(o, [1, 2]); // 위와 동일.

--------------------------------------위의 두 줄은 각 아래 3줄과 비슷한 코드.

o.m = f;

o.m(1, 2);

delete o.m;

function f(y) { return this.x + y; }

var o = { x : 1 };

var g = f.bind(o); // g(a) 호출 시 o.f(a) 호출됨.

g(2); // => 3

// 파셜 애플리케이션(Partial Application) == 커링(Currying) 

// -> 일부 인자를 고정한 함수를 만드는 기법

var s = f.bind(o, 3); // this === o, y === 3으로 바인딩 됨.

s(); // => 4

ref) https://www.zerocho.com/category/JavaScript/post/579236d08241b6f43951af18

- Function() 생성자 (잘 사용 안함)

- var f = new Function("x", "y", "return x*y;");

- 동적으로 자바스크립트 함수를 생성하고 실행시간에 컴파일되는 것을 가능케 한다.

- 생성자가 호출될 때마다 함수 몸체를 분석(parse)하여 새로운 함수 객체를 생성한다.

- 생성자가 생성하는 함수는 어휘적 유효범위(lexical scoping)을 사용하지 않는다.

var scope = "global";

function constructFunction() {

var scope = "local";

return new Function("return scope");

}

constructFunction()(); // => "global"