Javascript의 함수(Function)의 기본개념과, 호출패턴에 따라 달라지는 this, 상속을 가능하게 해주는 prototype, 다른 언어와 다른 scope에 대해 알아봅니다.

1. 스파르탄 스터디
CH.02. JS function

2. 1. 기본개념부터 잡아보자
2. 호출패턴에 따라 달라지는 this
3. 상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수를 구현하는 3가지 방법

3. 1.기본개념부터 잡아보자
2. 호출패턴에 따라 달라지는 this
3. 상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수를 구현하는 3가지 방법

4. 함수
호출되거나 실행될 수 있는 자바스크립트
코드 블록
모듈화의 근간
자바스크립트는 함수형 언어
일급객체(First class citizen)
1. 기본개념

5. 함수 vs. 메서드
console.dir() 은 함수일까? 메서드일까?
function funcA() {
/* 코드 블록*/
}
vs.
var objA = {
funcA : function() {
/* 코드 블록 */
}
}
1. 기본개념

6. 함수 vs. 메서드
함수를 객체의 속성에 저장하는 경우
=> 메서드(method)
console.dir()의 dir역시
console 객체의 하나의 속성
1. 기본개념

7. 내장함수(built-in function)
미리 생성되어 있는 함수들
parseInt(), Math.exp() 등등
1. 기본개념

8. 함수의 종류
FunctionDeclaration vs. FunctionExpression
funcA();
function funcA() {
console.log('funcA has called');
} // 호출됨
* FunctionDeclaration은 Hoisting이 발생한다.
(단, 정식명칭은 아니다.)
1. 기본개념
Quiz.
funcB();
var funcB = function() {
console.log('funcB has called');
}; // 에러

9. Quiz.
console.log(a);
var a = 1;
var a = function(){};
console.log(a);
1. 기본개념
console.log(a);
var a = 1;
function a() {};
console.log(a);
console.log(a);
function a() {};
var a = 1;
console.log(a);
각각의 출력 결과는?

10. Quiz.
console.log(a);
var a = 1;
var a = function(){};
console.log(a);
// undefined
// function (){}
1. 기본개념
console.log(a);
var a = 1;
function a() {};
console.log(a);
// function a() {}
// 1
console.log(a);
function a() {};
var a = 1;
console.log(a);
// function a() {}
// 1

11. 그 외의 함수들
즉시실행함수
(function(){
console.log("Right now!")
})();
1. 기본개념
중첩된 함수 혹은 내부함수
function a() {
function b() {
}
}
=> closure

12. 함수 전달인자 - arguments
function maxNum(/* 어떤 값이 들어와도 상관 없음 */) {
var max = Number.NEGATIVE_INFINITY;
for(var idx in arguments) {
if(!isNaN(arguments[idx]) && arguments[idx]>max) {
max = Number(arguments[idx]);
}
}
return max;
}
maxNum(1, 21, 3, undefined, 5, 123, false, '1234', 'test');
=> 가변전달인자 varargs(variable length
arguments)
1. 기본개념

13. Arguments 객체
- 함수 내부에 존재하는 객체
function dirArgu(/*파라미터 선언 없음*/) {
console.dir(arguments);
}
dirArgu(1);
dirArgu(1,2,3,4,5,6,7);
1. 기본개념

14. 1. 기본개념부터 잡아보자
2.호출패턴에 따라 달라지는 this
3. 상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수를 구현하는 3가지 방법

15. 호출패턴과 this
1. 메서드 호출 패턴
- 호출하는 패턴에 따라 this라는 추가적인 매개변수를 다르게
초기화 한다.
var objA = {
sum : 0
, add : function(addVal) {
this.sum += addVal;
return this.sum;
}
}
objA.sum;
objA.add(2);
objA.add(3);
var directAddCall = objA.add;
directAddCall(2);
this === objA
2. 호출패턴에 따라 달라지는 this
this === window
★ This -> 호출한 함수가 속
한 오브젝트를 참조

16. 2. 함수 호출
function funcA() {
console.dir(this);
};
console.dir(funcA());
2. 호출패턴에 따라 달라지는 this
this === window
function funcA() {
"use strict";
console.dir(this);
};
funcA();
window.funcA();
this === undefined
this === window

17. 3. 생성자 호출
function FuncA() {};
var funcB = new FuncA();
FuncA.prototype.checkThis
= function(){
console.dir(this);
};
funcB.checkThis();
2. 호출패턴에 따라 달라지는 this
this === FuncA

18. 4. call 과 apply
function A(a,b,c) {
console.log(this.x, this.y, a, b, c);
}
A();
A.call({x:1,y:2});
A.apply({x:1,y:2},[3,4,5]);
명시적으로 this에
mapping시킬
프로퍼티들을 넘길 수 있다
2. 호출패턴에 따라 달라지는 this

19. + bind를 통한 this mapping
var newA = A.bind({x:3,y:4})
var newA2 = A.bind({x:3,y:4,a:5})
2. 호출패턴에 따라 달라지는 this
call, apply
-> 호출시점에 일시적인 매핑
bind
-> 영구적인 Binding

20. 1. 기본개념부터 잡아보자
2. 호출패턴에 따라 달라지는 this
3.상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수

21. 함수의 프로토타입 상속
function FuncA() {}
var funcA1 = new FuncA();
console.dir(funcA1);
FuncA.prototype.addedMethod =
function(){ console.log("I'm added"); };
console.dir(funcA1);
3. 상속을 가능하게 해주는 Prototype
=> __proto__ 는 생성자의 prototype을 바라보고 있다.

22. * prototype chaining 맛보기
var a = {
func : function(){ console.log(this.val); }
};
var b = Object.create(a);
var c = Object.create(b);
var d = Object.create(c);
var e = Object.create(d);
b.val = 'b.val';
a.val = ‘a.val‘;
e.func(); // b.val
e .__proto__ .__proto__ .__proto__ .__proto__ === a; // true
3. 상속을 가능하게 해주는 Prototype

23. 1. 기본개념부터 잡아보자
2. 호출패턴에 따라 달라지는 this
3. 상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수를 구현하는 3가지 방법

24. Quiz.
function aa() {
var a = 1;
function b() {
var a = 2;
c();
}
function c() {
console.log(a);
}
b();
}
aa();
a = ?
4. 다른 언어와 다른 유효범위 Scope

25. Quiz. 항목별 유효범위
4. 다른 언어와 다른 유효범위 Scope
function outer() {
debugger;
inner();
var a = 1;
function inner() {
var x = 2;
}
var b = 2;
if(a==1) {
var c = 3;
}
console.log(c);
}
outer();
항목별 Scope는
어떻게 될까?
outer()
inner()
x, a, b, c

26. 항목별 유효범위
Scope 결정요소 :
어디에
선언되었느냐?
변수냐? 함수냐?
4. 다른 언어와 다른 유효범위 Scope
function outer() {
debugger;
inner();
var a = 1;
function inner() {
var x = 2;
}
var b = 2;
if(a==1) {
var c = 3;
}
console.log(c);
}
outer();
항목별 Scope : (순서대로)
outer(), inner(), x, a, b, c
!! If 블록을
넘어간다.
* JavaScript의 Scope는
블록단위가 아니라 함수 단위

27. 블록 vs. 함수 유효범위
C, Java 등의 언어의 유효범위 : { } (Block)
if(window) {
var x =123;
}
console.log(x);
블록이 끝났다고(})
유효범위가 끝나지
않는다.
JavaScript의 유
효범위 : 함수
4. 다른 언어와 다른 유효범위 Scope

28. 1. 기본개념부터 잡아보자
2. 호출패턴에 따라 달라지는 this
3. 상속을 가능하게 해주는 Prototype
4. 다른 언어와 다른 유효범위 Scope
+@ 재귀함수를 구현하는 3가지 방법

29. Quiz.
function factorial() {
return function(x) {
if (x <= 1)
return 1;
else
return x * arguments.callee(x-1);
};
}
factorial()(5);
+@ 재귀함수를 구현하는 3가지 방법
arguments?
callee?
괄호는 왜 2개?

30. Quiz.
function factorial() {
return function(x) {
if (x <= 1)
return 1;
else
return x * arguments.callee(x-1);
};
}
factorial()(5);
+@ 재귀함수를 구현하는 3가지 방법
arguments? -> 함수가 실행될 때 생성
되는 객체
callee? -> 자신을 호출한 객체
괄호는 왜 2개? -> 첫 번째 괄호는 실
행 후에 function(x)를 리턴. 두 번째 괄
호를 통해 function(x)를 실행.

31. 재귀 - Function Declaration
function factorial(x) {
if (x <= 1) return 1;
else return x * factorial(x-1);
}
factorial(5);
=> 어느 곳에서든지 이름으로 호출 가능
+@ 재귀함수를 구현하는 3가지 방법

32. 재귀 – 메서드(Function Expression)
var factorial = function recurs(x) {
if (x <= 1) return 1;
else return x * recurs(x-1);
}
factorial(5);
=> 익명 함수에 이름을 주면 함수 내에서 사용
할 수 있다.
+@ 재귀함수를 구현하는 3가지 방법

33. 재귀 – arguments.callee (deprecated)
var factorial = function(x) {
if (x <= 1) return 1;
else return x * arguments.callee(x-1);
}
factorial(5);
=> 함수가 호출되는 시점에 자신을 호출한 객
체를 arguments.callee에 할당한다.
+@ 재귀함수를 구현하는 3가지 방법

34. 참고자료
- http://www.ecma-international.org/ecma-262/5.1/
- https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/this
- 자바스크립트 완벽가이드 데이비드 플래너건
- 자바스크립트 핵심 가이드 더글라스 크락포드
- 자바스크립트 닌자 비급 존 레식, 베어 바이볼트
- 몰입! 자바스크립트 김영보
2. 호출패턴에 따라 달라지는 this