프론트엔드스터디 e04 js function

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

1.기본개념 부터 잡아보자

2.호출패턴 에 따라 달라지는 this

3. 상속을 가능하게 해주는 Prototype

4.다른 언어와 다른 유효범위 Scope

+@ 재귀함수를 구현하는 3 가지 방법




4. 다른 언어와 다른 유효범위 Scope


함수 (function) 란 ?

호출되거나 실행될 수 있는 자바스크립트 코드 블록

모듈화의 근간

자바스크립트는 함수형 언어

일급객체 (First class citizen)

1. 기본개념

– 일급객체 First citizen 다음과 같은 조건을 만족할 때 일급

객체라고 말할 수 있다 .

- 변수나 데이터 구조안에 담을 수있다 .

- 파라미터로 전달 할 수 있다 .

- 반환값 (return value) 으로 사용할 수 있다 .

1. 기본개념

var func = function () {};

return function(){};

func(function(){});

함수 vs. 메서드

console.dir() 은 함수일까 ? 메서드일까 ?

vs.

1. 기본개념

function funcA() { /* 코드 블록 */}

var objA = { funcA : function() { /* 코드 블록 */ }}

함수 vs. 메서드

함수를 객체의 속성에 저장하는 경우

=> 메서드 (method)

console.dir() 의 dir 역시console 객체의 하나의 속성

1. 기본개념

내장함수 (built-in function)

미리 생성되어 있는 함수들

parseInt(), Math.exp() 등등

전역에 선언되어 있기 때문에 어느 곳에서나 호출 가능

1. 기본개념

함수의 종류

FunctionDeclaration vs. FunctionExpression

* FunctionDeclaration 은 Hoisting 이 발생한다 . ( 단 , 정식명칭은 아니다 .)

1. 기본개념

Quiz.

funcA();function funcA() { console.log('funcA has called');} // 호출됨

funcB();var funcB = function() { console.log('funcB has called');}; // 에러

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);

그 외의 함수들즉시실행함수

1. 기본개념

중첩된 함수 혹은 내부함수

=> closure

(function(){ console.log("Right now!")})();

function a() { return function() { }}

함수 전달인자 - 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');

Arguments 객체- 함수 내부에 존재하는 객체

1. 기본개념

function dirArgu(/* 파라미터 선언 없음 */) { console.dir(arguments);}

dirArgu(1);

dirArgu(1,2,3,4,5,6,7);

호출패턴과 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 -> 호출한 함수가 속한 오브젝트를 참조

2. 함수 호출 – use strict


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 에 매핑되는 모호함을 허용하지 않음 .

3. 생성자에서 호출


this

this === FuncA

function FuncA() {};var funcB = new FuncA();

FuncA.prototype.checkThis = function(){ console.dir(this);};

funcB.checkThis();

4. call 과 apply


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 시킬

프로퍼티들을 넘길 수 있다

+@ bind 를 통한 this mapping


this

call, apply -> 호출시점에 일시적인 매핑

bind -> 영구적인 Binding

var newA = A.bind({x:3,y:4});

var newA2 = A.bind({x:3,y:4});





+@ 재귀함수

함수의 프로토타입 상속


=> __proto__ 는 생성자의 prototype 을 바라보고 있다 .

function FuncA() {}var funcA1 = new FuncA();

console.dir(funcA1);

FuncA.prototype.addedMethod = function(){ console.log("I'm added"); };

console.dir(funcA1);

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

Prototype 참조

변경이 발생했을 때

Person.prototype.getName = function () { return 'Hello, ' + this.name;}

console.log(personA.getName());console.log(personB.getName());console.log(personC.getName());

Hello, personAHello, personBHello, personC

Prototype 을 참조하고 있는 다른 모든 Instance 에도 모두 적용

Prototype 의 몇 가지 속성

name : name / hasOwnProperty : truename : getName / hasOwnProperty : falsename : setName / hasOwnProperty : false

for (var obj in personA) { console.log('name : ', obj, ' / hasOwnProperty : ' + personA.hasOwnProperty(obj));}

- 마치 자신의 속성처럼 열거할 수 있다 .(for in 사용 )- hasOwnProperty() 메서드를 사용해 소유여부 ( 자신이

소유하고 있는지 , prototype 으로 참조하는지 ) 를 확인할 수 있다 .

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 가 참조되지 않을 수 있다 .

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 을 방지할 수 있다

Function 의 용도가 2 가지: 실행을 위한 함수 , 생성자 함수

혼란을 피하기 위해 생성자 함수는 대문자로 시작하도록 권고

크락포드옹님 주의사항

* 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

Quiz.

a = ?

4. 다른 언어와 다른 유효범위

Scope

function aa() { var a = 1; function b() { var a = 2; c(); } function c() { console.log(a); } b();}

aa();

Quiz. 항목별 유효범위


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();

항목별 유효범위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

블록 vs. 함수 유효범위C, Java 등의 언어의 유효범위 : { } (Block)

블록이 끝났다고 (}) 유효범위가 끝나지

않는다 .⇒ JavaScript 의

유효범위 : 함수


Scope

if(window) { var x =123;}console.log(x);





+@ 재귀함수를 구현하는 3 가지

방법

Quiz.


방법

arguments? callee?

괄호는 왜 2 개 ?

function factorial() { return function(x) { if (x <= 1) return 1; else return x * arguments.callee(x-1); };}

factorial()(5);

Quiz.


방법

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) 를 실행 .

재귀 - Function Declaration

=> 어느 곳에서든지 이름으로 호출 가능


방법

function factorial(x) { if (x <= 1) return 1; else return x * factorial(x-1);}

factorial(5);

– 재귀 메서드 (Function Expression)

=> 익명 함수에 이름을 주면 함수 내에서 사용할 수 있다 .


방법

var factorial = function recurs(x) { if (x <= 1) return 1; else return x * recurs(x-1);}

factorial(5);

– 재귀 arguments.callee (deprecated)

=> 함수가 호출되는 시점에 자신을 호출한 객체를 arguments.callee 에 할당한다 .


방법

var factorial = function(x) { if (x <= 1) return 1; else return x * arguments.callee(x-1);}

factorial(5);

참고자료

- http://www.ecma-international.org/ecma-262/5.1/

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

Reference/Operators/this

- 자바스크립트 완벽가이드 데이비드 플래너건

- 자바스크립트 핵심 가이드 더글라스 크락포드

- 자바스크립트 닌자 비급 존 레식 , 베어 바이볼트

- 몰입 ! 자바스크립트 김영보


this

http://www.ecma-international.org/ecma-262/5.1/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

프론트엔드스터디 e04 js function

Engineering