자바스크립트 스터디 - Function 편

1. Javascript
Function

2. 함수란?
한번 정의하면 몇번이든 실행/호출 할 수 있다.
함수에 매개변수를 가질 수 있다.
매개변수는 몸체 내에서 지역변수처럼 취급받는다.
자바스크립트에서는 함수는 객체다.
객체이므로 변수나 다른 함수에도 전달할 수 있다.

3. 함수 정의
//일반적 함수정의
function hello() {
//code
}
//지역 변수로 함수 정의
var hello = function() {
//code
}
//함수의 전달인자(매개변수)에 함수를 정의
hello(function(a, b){
//code
});
모든 함수는 function 키워드에 의해 정의.
함수는 return 하지 않으면 undefined 로 반환.

4. 중첩 함수
//일반적 함수정의
function hello(a, b) {
//code
!
function world(x) {
//중첩함수의 this 키워드는 엄격한 모드(use strict)에서
//global 객체로 반환하지 않고 undefined로 반환.
}
}
매개변수는 함수 블록 범위내에서 사용할 수 있다.

5. 함수 호출방법
일반적인 함수 형태
메서드 형태
생성자

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

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

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

9. 생성자 호출
var a = new Object();
var a = new Object; //빈괄호 생략가능.
함수나 메서드 호출 앞에 new 키워드가 붙으면,
생성자 호출이다.

10. 매개변수
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의 내용 추가 푸시.
함수 정의 시 매개변수 형식을 명시하지 않아도 된다.
자바스크립트는 함수 호출 시 전달인자의 개수도 검사하지 않음.

11. Arguments 키워드
//함수 정의
function f(x, y, z) {
console.log(arguments); //모든 전달인자를 배열로 반환
console.log(arguments.length); //전달인자 개수 반환
}
!
//함수 호출
f('전달인자넘버원', '넘버투', '넘버쓰리');
!
//결과
//['전달인자넘버원', '넘버투', '넘버쓰리']
//3
전달인자의 개수를 확인할 수 있다.
전달인자를 검사하거나 식으로 변형할 수 있다.

12. 배열 함수
var a = [];
a[0] = function(){
//code
return a[1] + ' world';
};
a[1] = 'hello';
!
a[0]();
//'hello world';
함수는 객체이므로 배열요소에도 포함할 수 있다.

13. 네임스페이스 함수
함수이름 중복을 방지하기 위해 아래처럼 네임스페이스 함수를 사용.
var namespace = {
!
foo: function(){
//code
},
!
bar: function(){
//code
}
};
!
namespace.foo();
namespace.bar();

14. 익명 함수
이름이 없는 익명함수.
함수 구문의 마지막에 바로 실행.
(function(){
//code
})();

15. 클로저란?
var scope = 'global scope';
!
//어휘적인 유효범위 스코프
function outer() {
var scope = 'local scope';
function inner() {
alert(scope);
}
inner();
}
!
outer(); //local
어휘적인 유효범위다.
함수를 호출할 때, 함수 정의한 순간의 유효범위 내에서 호출된다.

16. 함수 메소드
함수의 기본 내장 메소드 모음.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

17. call(), apply()
• 함수를 간접적으로 호출.
• 다른 객체의 메서드인 것처럼 다룰 수 있음.
http://jsfiddle.net/F68t3/17/show/

18. bind()
• 객체와 함수를 묶는 메소드
http://jsfiddle.net/tu64H/3/show

19. toString()
• 함수는 객체와 마찬가지로 toString() 메소드가 있다.
• 함수의 전체코드를 문자열로 반환.
http://jsfiddle.net/ts24y/2/show/

20. Closures
The Function() Constructor
Callable Objects
Functional Programming

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

22. 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; }
=

23. • 동적으로 함수를 생성하고 실행중에 컴파일.
• 생성자가 호출될 때마다 몸체를 parse하고,
새로운 함수 객체를 생성.
• 자주 호출되는 함수내에서 생성자 사용시 비효율적.
• 반대로 함수 정의 표현식은
중첩함수와 루프내에 있어도 컴파일하지 않음.
• 생성자로 생성한 함수는
어휘적 유효범위를 사용하지 않음.
• 코드에서 Function() 생성자를 사용할 필요가 거의 없음.
The Function() Constructor
http://repl.it/Ncm/1

24. • 호출 가능객체가 모두 함수는 아니다.
• IE8이하 웹브라우저에서
Window.alert(), Document.getElementById()
Function 객체가 아니라 호출 가능한 호스트 객체.
• IE9 이후부터 진짜 함수를 사용하도록 변경.
이런식의 호출 가능 객체는 없어지고 있음.
• RegExp를 직접 호출할 수 있지만 관련 코드 작성 자제.
이 기능은 제거될 예정.
Callable Objects
function isFunction(x) {
return Object.prototype.toString.call(x) === "[object Function]";
}

25. • 자바스크립트에서는 함수를 객체로 취급하기 때문에
함수형 프로그래밍 기법을 사용할 수 있다.
• ECMAScript5에서 지원하는 map(), reduce()
같은 배열 메서드로 함수형 프로그래밍 스타일로 코딩가능.
Functional Programming

26. • 배열에 있는 값들의 평균과 표준편차를 구하는 코드.
• 비-함수형 프로그래밍 스타일.
• Array의 map(), reduce() 메소드를 활용하여 함수 프로그래밍.
함수로 배열처리하기
Functional Programming
http://repl.it/NdW

27. • 하나이상의 함수를 인자로 받아, 새 함수로 반환하는 함수.
고차 함수
Functional Programming
http://repl.it/NdX

28. 함수의 파셜 애플리케이션
Functional Programming
http://repl.it/Nd7/2
메모이제이션
http://repl.it/Nd8/1

29. 감사합니다.