Javascript의 핵심요소인 function의 기본개념, 호출패턴에 따라 달라지는 this, 상속을 가능하게 해주는 prototype, 다른 언어와 다른 유효범위 scope에 대해서 알아봅니다.

1. 프론트엔드 스터디
CH.04. JS function

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

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

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

5. 일급객체 – First citizen
다음과 같은 조건을 만족할 때 일급
객체라고 말할 수 있다.
- 변수나 데이터 구조안에 담을 수
있다.
- 파라미터로 전달 할 수 있다.
- 반환값(return value)으로 사용할 수
있다.
1. 기본개념
var func = function () {};
return function(){};
func(function(){});

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

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

8. 내장함수(built-in function)
미리 생성되어 있는 함수들
parseInt(), Math.exp() 등등
전역에 선언되어 있기 때문에 어느
곳에서나 호출 가능
1. 기본개념

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

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

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

12. 함수 전달인자 - arguments
=> 가변전달인자 varargs(variable length
arguments)
1. 기본개념
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');

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

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

15. 호출패턴과 this
1. 메서드 호출 패턴
- 호출하는 패턴에 따라 this라는 추가적인 매개변수를 다르게
초기화 한다.
2. 호출패턴에 따라 달라지는 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
this === window
★ This -> 호출한 함수가
속한 오브젝트를 참조

16. 2. 함수 호출 – use strict
2. 호출패턴에 따라 달라지는 this
this === window
this === undefined
this === window
function funcA() {
console.dir(this);
};
console.dir(funcA());
function funcA() {
"use strict";
console.dir(this);
};
funcA();
window.funcA();
use strict : 따로 언급하지 않는 이상 window에 매핑되는 모호함을
허용하지 않음.

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

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

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

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

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

22. function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
}
Person.prototype.setName = function (name) {
this.name = name;
}
var personA = new Person("personA");
var personB = new Person("personB");
var personC = new Person("personC");
console.log(personA.getName());
console.log(personB.getName());
console.log(personC.getName());
공통속성을 추가하는 경우
– Prototype을 이용
Instance마다 개별적으로
가져야 할 프로퍼티
공통으로 가져야 할
프로퍼티

23. cf. Prototype을
사용하지 않은 경우
Prototype 참조

24. 변경이 발생했을 때
Person.prototype.getName = function () {
return 'Hello, ' + this.name;
}
console.log(personA.getName());
console.log(personB.getName());
console.log(personC.getName());
Hello, personA
Hello, personB
Hello, personC
Prototype을 참조하고 있는
다른 모든 Instance에도 모두 적용

25. Prototype의 몇 가지 속성
name : name / hasOwnProperty : true
name : getName / hasOwnProperty : false
name : setName / hasOwnProperty : false
for (var obj in personA) {
console.log('name : ', obj, ' / hasOwnProperty : ' +
personA.hasOwnProperty(obj));
}
- 마치 자신의 속성처럼 열거할 수 있다.(for in 사용)
- hasOwnProperty() 메서드를 사용해 소유여부(자신이
소유하고 있는지, prototype으로 참조하는지)를 확인할
수 있다.

26. function Circle(r) {
this.r = r;
}
Circle.prototype.PI = 3.14;
Circle.prototype.getArea = function () {
return 2 * this.r * this.PI;
}
var r2 = new Circle(2);
console.log(r2.getArea());
var r3 = new Circle(3);
console.log(r3.getArea());
var r3Alien = new Circle(3);
r3Alien.PI = 4.74; // PI 재정의
console.log(r3Alien.getArea());
내부의 property가 있는 경우에 prototype을 참고하지 않는다.
이런 경우를 다른 property가 가렸다(shadows) 혹은
숨겼다(hides)라고 한다
- Prototype property가 참조되지 않을 수 있다.

27. Function.prototype.addMethod = function (name, func) {
if(!this.prototype[name]) {
this.prototype[name] = func;
}
}
function Person(name) {
this.name = name;
}
Person.addMethod('setName', function(name) {
this.name = name;
});
Person.addMethod('getName', function () {
return this.name;
});
var personA = new Person("personA");
var personB = new Person("personB");
var personC = new Person("personC");
크락포드옹 스탈
Overriding 을 방지할 수 있다

28. Function의 용도가 2가지
: 실행을 위한 함수, 생성자 함수
혼란을 피하기 위해 생성자 함수는 대문자로
시작하도록 권고
크락포드옹님 주의사항

29. * prototype chaining 맛보기
3. 상속을 가능하게 해주는 Prototype
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

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

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

32. Quiz. 항목별 유효범위
4. 다른 언어와 다른 유효범위 Scope
항목별 Scope는
어떻게 될까?
outer()
inner()
x, a, b, c
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();

33. 항목별 유효범위
4. 다른 언어와 다른 유효범위 Scope
* JavaScript의 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();
!! If 블록을
넘어간다.
Scope 결정요소 :
어디에
선언되었느냐?
변수냐? 함수냐?
outer()
inner()
x a b c

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

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

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

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

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

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

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

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