JavascriptFunction

함수란?

한번 정의하면 몇번이든 실행/호출 할 수 있다.함수에 매개변수를 가질 수 있다.

매개변수는 몸체 내에서 지역변수처럼 취급받는다.자바스크립트에서는 함수는 객체다.

객체이므로 변수나 다른 함수에도 전달할 수 있다.

함수 정의

//일반적 함수정의function hello() { //code}

//지역 변수로 함수 정의var hello = function() { //code}

//함수의 전달인자(매개변수)에 함수를 정의hello(function(a, b){ //code});

모든 함수는 function 키워드에 의해 정의.함수는 return 하지 않으면 undefined 로 반환.

중첩 함수

//일반적 함수정의function hello(a, b) { //code! function world(x) { //중첩함수의 this 키워드는 엄격한 모드(use strict)에서 //global 객체로 반환하지 않고 undefined로 반환. }}

매개변수는 함수 블록 범위내에서 사용할 수 있다.

함수 호출방법

일반적인 함수 형태메서드 형태생성자

함수 호출function a(a, b) { return a + b;}!a(1, 2); //3!var total = a(1, 2) + a(3, 4);//total = 10

메소드 호출-1

var o = {};var f = function(x, y) { //code};!o.m = f; //객체 o의 메소드인 o.m에 f를 할당.o.m(x, y); //호출o['m'](x, y);

메소드 호출-2var calculator = { x: 1, y: 1, add: function() { this.result = this.x + this.y; }};!calculator.add();calculator.result; //2

생성자 호출

var a = new Object();var a = new Object; //빈괄호 생략가능.

함수나 메서드 호출 앞에 new 키워드가 붙으면,생성자 호출이다.

매개변수

function arrayPush(o, a) {! //a가 undefined면 새 배열사용. if (a === undefined) a = [];! //배열 o의 원소들을 a에 푸시 for(var property in o) a.push(property);! return a;}//전달인자 a가 생략되면, 새 배열 반환.//반대로 전달인자 a가 포함되면, o의 내용 추가 푸시.

함수 정의 시 매개변수 형식을 명시하지 않아도 된다.자바스크립트는 함수 호출 시 전달인자의 개수도 검사하지 않음.

Arguments 키워드

//함수 정의function f(x, y, z) { console.log(arguments); //모든 전달인자를 배열로 반환 console.log(arguments.length); //전달인자 개수 반환}!//함수 호출f('전달인자넘버원', '넘버투', '넘버쓰리');!//결과//['전달인자넘버원', '넘버투', '넘버쓰리']//3

전달인자의 개수를 확인할 수 있다.전달인자를 검사하거나 식으로 변형할 수 있다.

배열 함수

var a = [];a[0] = function(){ //code return a[1] + ' world';};a[1] = 'hello';!a[0]();//'hello world';

함수는 객체이므로 배열요소에도 포함할 수 있다.

네임스페이스 함수함수이름 중복을 방지하기 위해 아래처럼 네임스페이스 함수를 사용.

var namespace = {! foo: function(){ //code },! bar: function(){ //code }};!namespace.foo();namespace.bar();

익명 함수이름이 없는 익명함수.

함수 구문의 마지막에 바로 실행.

(function(){ //code})();

클로저란?

var scope = 'global scope';!//어휘적인 유효범위 스코프function outer() { var scope = 'local scope'; function inner() { alert(scope); } inner();}!outer(); //local

어휘적인 유효범위다.함수를 호출할 때, 함수 정의한 순간의 유효범위 내에서 호출된다.

함수 메소드함수의 기본 내장 메소드 모음.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

call(), apply()

• 함수를 간접적으로 호출. • 다른 객체의 메서드인 것처럼 다룰 수 있음.

http://jsfiddle.net/F68t3/17/show/

bind()

• 객체와 함수를 묶는 메소드

http://jsfiddle.net/tu64H/3/show

toString()• 함수는 객체와 마찬가지로 toString() 메소드가 있다.

• 함수의 전체코드를 문자열로 반환.

http://jsfiddle.net/ts24y/2/show/

Closures

The Function() Constructor

Callable Objects

Functional Programming

Closures• 모든 언어는 어휘적 유효범위를 가짐.• 함수는 정의한 순간 변수의 유효범위를 사용하여 실행.• 기술적으로 모든 함수는 클로저.• 변수는 함수 실행 후 자동소멸• 함수 내의 변수를 참조하는 곳이 없다면 함수가 닫힘.

http://repl.it/NaN/2

The Function() Constructor• 함수는 function 키워드를 사용하여 정의.• function name(){}

function definition statement• var name = function(){}

function literal expression

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

var f = function(x, y) { return x*y; }

=

• 동적으로 함수를 생성하고 실행중에 컴파일.• 생성자가 호출될 때마다 몸체를 parse하고, 새로운 함수 객체를 생성.

• 자주 호출되는 함수내에서 생성자 사용시 비효율적.• 반대로 함수 정의 표현식은중첩함수와 루프내에 있어도 컴파일하지 않음.

• 생성자로 생성한 함수는 어휘적 유효범위를 사용하지 않음.

• 코드에서 Function() 생성자를 사용할 필요가 거의 없음.

The Function() Constructor

http://repl.it/Ncm/1

• 호출 가능객체가 모두 함수는 아니다.• IE8이하 웹브라우저에서Window.alert(), Document.getElementById() Function 객체가 아니라 호출 가능한 호스트 객체.

• IE9 이후부터 진짜 함수를 사용하도록 변경. 이런식의 호출 가능 객체는 없어지고 있음.

• RegExp를 직접 호출할 수 있지만 관련 코드 작성 자제. 이 기능은 제거될 예정.

Callable Objects

function isFunction(x) { return Object.prototype.toString.call(x) === "[object Function]";}

• 자바스크립트에서는 함수를 객체로 취급하기 때문에함수형 프로그래밍 기법을 사용할 수 있다.

• ECMAScript5에서 지원하는 map(), reduce() 같은 배열 메서드로 함수형 프로그래밍 스타일로 코딩가능.

Functional Programming

• 배열에 있는 값들의 평균과 표준편차를 구하는 코드.• 비-함수형 프로그래밍 스타일.• Array의 map(), reduce() 메소드를 활용하여 함수 프로그래밍.

함수로 배열처리하기Functional Programming

http://repl.it/NdW

• 하나이상의 함수를 인자로 받아, 새 함수로 반환하는 함수.

고차 함수Functional Programming

http://repl.it/NdX

함수의 파셜 애플리케이션Functional Programming

http://repl.it/Nd7/2

메모이제이션http://repl.it/Nd8/1

감사합니다.