Welcome to

Javascript Function

1. Function

2. Function 고급

2. Scope

3. Scope Chain

4. Parameter

5. Closure

Javascript 기초 6

선수 추천 과정 HTML5 CSS3

Function (1/3)

주어진 입력(파라미터)에 근거해 어떠한 처리를 실시하여 그 결과를 돌려주는 구조가 함수. Javascript는 디폴트로 많은 함수를 제공하고 있지만, 애플리케이션 개발자가 자기 스스로 함수를 정의할 수도 있음.

Javascript 기초6

인수

함수가 동작하기 위한 인자 값

함수

미리 정의한 처리 방식

반환 값

함수에 의한 처리의 결과

function 명령으로 정의 하기 (선언적 방식)

Function 생성자를 이용하여 정의 하기

함수 리터럴 표현으로 정의하기 (익명 함수)

함수 선언 3 가지 방식

Function (2/3)

함수 명을 선언할때 다음 두가지를 유의할 것 1 . 단순한 문자열이나 식이 아닌 식별자를 지정해야 함 2. 그 함수가 무엇을 처리하는지 이해할 수 있는 이름으로 (동사+명사 showMessage)

function 명령으로 정의하기 인수는 동작을 결정하기 위한 파라미터로 여러개를 입력받을 때는 콤마로 단락을 구분 함. 함수 내부에서만 참조할 수 있음

Function 생성자 경유로 정의 내장 객체인 Function 객체의 생성자를 이용해 정의 가능하지만, 굳이 이용할 장점이 많지 않음

함수 리터럴 표현으로 정의하기 Javascript 에서는 함수도 데이터형의 일종임. 즉, 함수를 변수에 대입하거나 어떤 함수의 인수로 건네거나 반환값으로 함수를 주는 것 또한 가능

Javascript 기초6

Function (3/3)

Javascript의 함수 정의는 간단하나, 실제 코딩을 진행하는 경우 생각하지 못하 문제점으로 문제를 겪을 수 있음. 함수 정의라 하더라도 기법에 따라 해석이 다르므로 주의해야 함.

return 도중에 줄 바꾸지 말것 Javascript 문장 끝에 세미콜론을 붙이는 것이 필수가 아니지만, 불필요한 혼란을 야기하기도 함

함수는 데이터형의 일종 함수는 데이터형의 일종으로, 함수를 수치형이나 문자로 전환이 가능하며, 변수처럼 호출 또한 가능 함

function 은 정적인 구조 선언 코드를 해석/컴파일 하는 타이밍에 함수를 등록. 실행 시에는 코드내의 구조의 일부분으로 어디라도 호출 가능

리터럴/Function은 실행시 판단 함수 리터럴이나 Function 생성자는 실행시 판단 되므로, 호출하는 곳보다 먼저 선언이 되어야 함

Javascript 기초6

Function 고급

Javascript 에서의 Function 의 중요성은 다른 언어보다 높음. 다양한 Function 의 기능과 개념을 알게되면 Javascript 를 이용하여 다양한 작업들이 가능함

Object 를 이용한 이름 부여 인수 이름 부여 인수를 통해 코드의 의미를 이해하기 쉽고 차례를 바꾸어도 되며, 인수의 수가 많아져도 관리가 용이

일회용 함수는 익명 함수로 일회용 함수는 이름을 부여하기 보다는 익명 함수(함수 리터럴)을 이용하여 코드를 간결 함. Ajax 에서 많이 사용되는 기법임

함수의 인자로 함수를 이용 가능 Javascript 에서는 함수도 데이터 형의 일정이므로 함수를 인수, 반환값으로 취급할 수 있음. 이를 고계 함수 (Higher-order function) 이라 함

Javascript 기초6

Scope (1/3)

Scope 는 변수가 스크립트 안의 어느 장소에서 참조할 수 있는가를 결정하는 개념으로, 스크립트 전체에서 참조할 수 있는 Global Scope 와 정의된 함수 안에서만 참조할 수 있는 Local Scope 로 나뉨

변수 선언에 var 명령은 필수 함var 명령을 사용하지 않고 선언된 변수는 모두 글로벌 변수로 취급됨. 로컬 변수를 정의하려면 반드시 var 명령을 사용해야 함

스크립트 전체에서 참조할 있는 Scope

정의된 함수 안에서만 참조할 수 있는 Scope

Global Scope

Local Scope

로컬 변수는 함수 선두에 선언 함로컬 변수는 선언된 함수 전체에서 유효한 변수 임. 직관적 유효범위와 실제 유효 범위가 어긋날 수 있으므로 주의가 필요함

Javascript 기초6

Scope (2/3)

가인수는 기본적으로 로컬 변수로 처리 됨. 인수 값이 Value 형인 경우, 함수내에서 변경이 일어나도 글로벌 변수 값에 영향이 없으나, 참조형인 경우, 메모리 주소 참조로 인하여 결과적으로는 글로벌 변수의 값도 바뀌게 됨

Value 형

10

Global 변수 Local 변수

Global 실제 값 Local

Reference 형

10

100

100

200

200

200

200

200

[1, 2, 4, 8, 16]

200

[1, 2, 4, 8]

Javascript 기초6

Scope (3/3)

Javascript 는 Java, C 와는 달리, 블록 레벨의 Scope 는 지원하지 않으며, 함수 리터럴과 Function 생성자로 함수를 정의할 때 리터럴은 Local 이지만, Function 생성자로 생성한 경우 Global 변수로 취급이 된다

블록 레벨 스코프 미 지원 Javascript 의 경우 블록 레벨의 스코프가 지원이 되지 않아, 블록(if)에서 빠져나온 이후에도 변수가 유효하게 사용될 수 있다.

Function 생성자는 글로벌 함수 리터럴은 Local 변수이지만, Function 생성자를 통하여 함수를 생성하게 되는 경우 글로벌 변수로 참조하게 된다.

Javascript 기초6

functon ???(){ }

Scope chain

Javascript 에서는 Scope Chain 의 선두에 위치하고 있는 객체로 부터 순서대로 Property를 검색해, 매치하는 Property가 처음 발견된 곳에서 그 값을 채택 함

Call 객체

functon ???(){ }

Call 객체

Global 객체 스크립트 전체

함수 내부

중첩된 함수 내부

Scope 단위로 Global 객체, Call 객체 생성. 이것들을 생성 순서대로 연결한 것이 Scope Chain

임

Javascript에서는 스크립트 실행시 내부 Global 객체를 생성. Global 변수와 Global 함수는 Global 객체의 Property나 Method임. Local 변수도 실은 Local Object 객체의 Property 이다. Activation 객체 혹은 Call 객체라고 불림.

Javascript 기초6

Parameter

Javascript 는 파라메터의 수를 체크하지 않아서, 부여되는 인수의 수가 함수 측에서 요구하는 수와 다른 경우에도 이를 체크하지 않음. 생성하는 함수가 요구하는 이수의 개수를 자유롭게 변경할 수 있으며, callee 를 이용하여 자기 자신을 호출 가능

Parameter 수를 체크하지 않음 Javascript 는 부여되는 인수의 수가 함수측에서 요구하는 수와 다른 경우에도 이를 체크하지 않음

callee 를 이용하여 재귀 호출 arguments 객체에서는 실행중인 함수 자신을 참조할 수 있는 callee 프로퍼티를 제공 함

가변길이 인수의 함수 정의 호출원의 사정상 인수의 개수가 변동될 수 있는데,인수의 함수를 이용함으로 써 유연하게 처리할 수 있음

Javascript 기초6

Closure (1/2)

Closure 는 로컬 변수를 참조하고 있는 함수 내의 함수이며, 일종의 기억영역을 제공해주는 구조를 가지고 있음

var myClosure = closure(1);

function closure(init){ var counter = init; return function(){ return ++counter; } }

변수 counter는 1

function(){ return ++counter; }

myClosure(); 2

myClosure(); 3

myClosure(); 4

반환 값 함수 Literal

가인수 init 에 1세트

로컬 변수 counter

변환값인 함수 Literal을 경유하여 로컬 변수를 참조, 조작할 수 있다.

내부적으로 참조하고 있는 로컬변수 counter도 함께 남아있다. -> 데이터의 보존장소(기억 영역)를 지닌 함수가 만들 어 짐

var myClosure1 = closure(1);

function closure(init){ var counter = init; return function(){ return ++counter; } }

글로벌 객체

myClosure1 myClosure2

var myClosure2 = closure(100);

Call 1-1

Call 1-2

Call 1-1

Call 1-2

counter=1 counter=100

함수 리터럴 (Closure)

함수 리터럴 (Closure)

Javascript 기초6

Closure (2/2)

각각의 호출마다 생성된 Call 객체는 별개의 것으로, 각각의 Call 객체에 속한 로컬 변수 Counter 도 별개의 것이 됨. Call객체는 함수가 호출 될 때마다 생성되어 각각의 Scope 체인은 독립된 것, 그 안에 관리되는 로컬 변수 counter 도 별개의 것이 됨

Call 객체

Global 객체 closure 호출 시 생성

- 익명 함수를 나타내는 Call 객체 - closure 함수의 Call 객체 - 글로벌 객체

클로저 (Closure) 객체 (Object)

클로저를 감싸고 있는 부모 함수 생성자

클로저로 부터 참조되는 로컬 변수 프로퍼티

클로저 자신 메소드

클로저 리턴 함수 호출 인스턴스화

클로저를 대입하는 변수 인스턴스

closure 사용 변수에 들어가는 처리가 하나만 필요한 경우는 클로저를 사용하고, 복수의 처리가 필요한 경우는 객체를 이용

Javascript 기초6

Expand your dimension!

Let’s Start!