Javascript - Function
-
Upload
wonmin-lee -
Category
Education
-
view
295 -
download
0
description
Transcript of Javascript - Function
JavascriptFunction
함수란?
한번 정의하면 몇번이든 실행/호출 할 수 있다.함수에 매개변수를 가질 수 있다.
매개변수는 몸체 내에서 지역변수처럼 취급받는다.자바스크립트에서는 함수는 객체다.
객체이므로 변수나 다른 함수에도 전달할 수 있다.
함수 정의
//일반적 함수정의function hello() { //code}
//지역 변수로 함수 정의var hello = function() { //code}
//함수의 전달인자(매개변수)에 함수를 정의hello(function(a, b){ //code});
모든 함수는 function 키워드에 의해 정의.함수는 return 하지 않으면 undefined 로 반환.
중첩 함수
//일반적 함수정의function hello(a, b) { //code! function world(x) { //중첩함수의 this 키워드는 엄격한 모드(use strict)에서 //global 객체로 반환하지 않고 undefined로 반환. }}
매개변수는 함수 블록 범위내에서 사용할 수 있다.
함수 호출방법
일반적인 함수 형태메서드 형태생성자
함수 호출function a(a, b) { return a + b;}!a(1, 2); //3!var total = a(1, 2) + a(3, 4);//total = 10
메소드 호출-1
var o = {};var f = function(x, y) { //code};!o.m = f; //객체 o의 메소드인 o.m에 f를 할당.o.m(x, y); //호출o['m'](x, y);
메소드 호출-2var calculator = { x: 1, y: 1, add: function() { this.result = this.x + this.y; }};!calculator.add();calculator.result; //2
생성자 호출
var a = new Object();var a = new Object; //빈괄호 생략가능.
함수나 메서드 호출 앞에 new 키워드가 붙으면,생성자 호출이다.
매개변수
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의 내용 추가 푸시.
함수 정의 시 매개변수 형식을 명시하지 않아도 된다.자바스크립트는 함수 호출 시 전달인자의 개수도 검사하지 않음.
Arguments 키워드
//함수 정의function f(x, y, z) { console.log(arguments); //모든 전달인자를 배열로 반환 console.log(arguments.length); //전달인자 개수 반환}!//함수 호출f('전달인자넘버원', '넘버투', '넘버쓰리');!//결과//['전달인자넘버원', '넘버투', '넘버쓰리']//3
전달인자의 개수를 확인할 수 있다.전달인자를 검사하거나 식으로 변형할 수 있다.
배열 함수
var a = [];a[0] = function(){ //code return a[1] + ' world';};a[1] = 'hello';!a[0]();//'hello world';
함수는 객체이므로 배열요소에도 포함할 수 있다.
네임스페이스 함수함수이름 중복을 방지하기 위해 아래처럼 네임스페이스 함수를 사용.
var namespace = {! foo: function(){ //code },! bar: function(){ //code }};!namespace.foo();namespace.bar();
익명 함수이름이 없는 익명함수.
함수 구문의 마지막에 바로 실행.
(function(){ //code})();
클로저란?
var scope = 'global scope';!//어휘적인 유효범위 스코프function outer() { var scope = 'local scope'; function inner() { alert(scope); } inner();}!outer(); //local
어휘적인 유효범위다.함수를 호출할 때, 함수 정의한 순간의 유효범위 내에서 호출된다.
함수 메소드함수의 기본 내장 메소드 모음.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
call(), apply()
• 함수를 간접적으로 호출. • 다른 객체의 메서드인 것처럼 다룰 수 있음.
http://jsfiddle.net/F68t3/17/show/
toString()• 함수는 객체와 마찬가지로 toString() 메소드가 있다.
• 함수의 전체코드를 문자열로 반환.
http://jsfiddle.net/ts24y/2/show/
Closures
The Function() Constructor
Callable Objects
Functional Programming
Closures• 모든 언어는 어휘적 유효범위를 가짐.• 함수는 정의한 순간 변수의 유효범위를 사용하여 실행.• 기술적으로 모든 함수는 클로저.• 변수는 함수 실행 후 자동소멸• 함수 내의 변수를 참조하는 곳이 없다면 함수가 닫힘.
http://repl.it/NaN/2
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; }
=
• 동적으로 함수를 생성하고 실행중에 컴파일.• 생성자가 호출될 때마다 몸체를 parse하고, 새로운 함수 객체를 생성.
• 자주 호출되는 함수내에서 생성자 사용시 비효율적.• 반대로 함수 정의 표현식은중첩함수와 루프내에 있어도 컴파일하지 않음.
• 생성자로 생성한 함수는 어휘적 유효범위를 사용하지 않음.
• 코드에서 Function() 생성자를 사용할 필요가 거의 없음.
The Function() Constructor
http://repl.it/Ncm/1
• 호출 가능객체가 모두 함수는 아니다.• IE8이하 웹브라우저에서Window.alert(), Document.getElementById() Function 객체가 아니라 호출 가능한 호스트 객체.
• IE9 이후부터 진짜 함수를 사용하도록 변경. 이런식의 호출 가능 객체는 없어지고 있음.
• RegExp를 직접 호출할 수 있지만 관련 코드 작성 자제. 이 기능은 제거될 예정.
Callable Objects
function isFunction(x) { return Object.prototype.toString.call(x) === "[object Function]";}
• 자바스크립트에서는 함수를 객체로 취급하기 때문에함수형 프로그래밍 기법을 사용할 수 있다.
• ECMAScript5에서 지원하는 map(), reduce() 같은 배열 메서드로 함수형 프로그래밍 스타일로 코딩가능.
Functional Programming
• 배열에 있는 값들의 평균과 표준편차를 구하는 코드.• 비-함수형 프로그래밍 스타일.• Array의 map(), reduce() 메소드를 활용하여 함수 프로그래밍.
함수로 배열처리하기Functional Programming
http://repl.it/NdW
• 하나이상의 함수를 인자로 받아, 새 함수로 반환하는 함수.
고차 함수Functional Programming
http://repl.it/NdX
함수의 파셜 애플리케이션Functional Programming
http://repl.it/Nd7/2
메모이제이션http://repl.it/Nd8/1
감사합니다.