JavaScript 함수

JavaScript 함수는 호출이 실행되기를 기다리는 동안 많은 코드를 포함하는 것 이상의 기능을 수행 할 수 있습니다. 함수는 시간이지나면서 진화하여 새로운 정의, 실행 방법 및 구문으로 이어졌습니다. 이 글에서는 자바 스크립트 함수가 지금까지해온 현재의 역할 중 일부를 다룰 것입니다.

기능을 표현하고 정의하는 다양한 방법을 아는 것은 보다 최적의 방법으로 로직을 구현 자바 스크립트에서. 또한 면접 질문에보다 쉽게 대답 할 수 있습니다..

함수 식

단순히 함수를 상태 기능 키워드, 선택적 매개 변수 및 코드 본문은 기능 선언.

이 선언을 JavaScript 표현식 (예 : 할당 또는 산술 표현식)에 넣으면 기능 표현.

// 함수 선언 함수 function_name () ; // 함수 표현식 var function_name = function () ;

평가 중에는 모든 JavaScript 선언이 끌어 올려집니다 (범위에서 위로 올라갔습니다). 따라서 함수 선언 전에 함수 호출을 작성하는 것은 괜찮습니다 (선언은 어쨌든 위로 이동 될 것이기 때문에).

function_name (); // 함수 호출 [WORKS] function function_name () ;

그러나 함수 표현식은 함수가 표현식의 일부가되고 독립형 선언이 아니기 때문에 호이스트되지 않습니다..

function_name (); // 함수 호출 [작동하지 않습니다] var function_name = function () ;

즉시 호출 된 함수 식 (IIFE)

함수 표현식입니다. 코드는 즉시 실행됩니다 (평가 될 때 한 번만). 간단하게 추가하여 만들 수 있습니다. () (함수를 호출 할 때 사용되는 구문)을 함수 표현식 바로 뒤에 추가합니다. 그들은 익명 (그것을 부를 수있는 이름이 없음) 일 수 있습니다..

다음은 IIFE를 만드는 가장 일반적인 두 가지 구문입니다.

(function optional_function_name () // body ());

과

(function optional_function_name () // body) ();

함수 선언 주위의 괄호는이를 표현식으로 변환 한 다음 () 함수를 호출 한 후 추가하는 동안 다른 방법으로 IIFE를 만들 수 있습니다. () 함수 표현 뒤에 (아래처럼), 선호하는 메소드는 위의 두 가지입니다..

// IIFE를 만드는 몇 가지 방법 function () / * ... * / (); + function () / * ... * / (); 새로운 함수 () / * ... * /;

IIFE는 한 번만 실행하고 네임 스페이스 지정, 클로저 만들기, 개인 변수 만들기 등과 같은 코드 작성에 이상적입니다. 아래는 IIFE 사용의 예입니다..

var page_language = (function () var lang; // 페이지의 언어를 가져 오는 코드 return lang;) ();

페이지의 언어를 가져 오는 코드는 한 번만 실행됩니다 (페이지가로드 된 후 가능). 결과는에 저장됩니다. page_language 나중에 사용하기 위해.

행동 양식

함수가 객체의 속성 인 경우 메서드라고합니다. 함수도 객체이기 때문에 다른 함수 내부의 함수도 메소드입니다. 아래는 객체 내부의 메소드 예제입니다..

var calc = add : function (a, b) return a + b, sub : 함수 (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

그만큼 더하다 과 보결 함수는 계산 목적.

이제 함수 예제 내의 함수에 대해 :

function add (a) return function (b) return a + b; console.log (add (1) (2)); // 출력은 3입니다.

반환 된 익명 함수는 함수의 메서드입니다. 더하다.

참고 : 매개 변수 (에이) 함수 더하다 위의 예제에서 다음 함수 호출에 사용할 수있는 경우이 유형의 프로세스가 호출됩니다. 카레.

생성자

추가 할 때 새로운 키워드를 함수 앞에 붙여서 호출하면 인스턴스를 생성하는 생성자가됩니다. 다음은 생성자를 사용하여 인스턴스를 생성하는 예제입니다. 과일 값이 각각에 추가됩니다. 과일의 재산.

함수 과일 () var 이름, 가족; // 과학 이름 및 패밀리 this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () 반환 패밀리;; this.setFamily = function (value) 패밀리 = 값;  var 사과 = 새로운 과일 (); apple.setName ( "Malus domestica"); apple.setFamily ( "Rosaceae"); var 오렌지 = 새로운 과일 (); orange.setName ( "감귤류? Â ?? ?? ??¢Â ?? ?? ?? sinensis "); orange.setFamily ("Rutaceae "); console.log (orange.getName ()); //"감귤류?¢Â ?? ?? ?? sinensis "console.log (apple.getName ()); //"Malus domestica "console.log (orange.getFamily ()); //"진딧물 "

화살표 기능 (ES6 표준) [Firefox에서만]

ES6 Standard의 새로운 함수 정의는 함수 표현식에 대한 더 짧은 구문을 제공합니다. 구문은 다음과 같습니다.

() => / * body * /

이 샘플 함수는 다음과 같습니다.

var sing = function () console.log ( '노래 ...');

와 같다:

var sing = () => console.log ( '노래 ...');

화살표 기능은 익명이며 자체 기능이 없습니다. 이 값, 이 그 안에는 이 둘러 쌈 코드에서. 또한 생성자로 변경할 수 없습니다. 새로운 예어.

원하는 때에 유용합니다. 이 내부와 같은 기능을 내부와 짧은 구문은 함수 내에서 함수를 간결하게 작성합니다 (아래처럼)

setInterval (function () console.log ( 'message'), 1000);

으로

setInterval (() => console.log ( 'message'), 1000);

생성기 함수 (ES6 표준) [Firefox에서만]

ES6 Standard의 또 다른 새로운 함수 정의는 Generator Function입니다. 생성자 함수는 실행을 중지하고 계속할 수 있습니다. 구문은 다음과 같습니다.

함수 * function_name ()

또는

함수 * function_name ()

생성자 함수는 반복자를 만듭니다. 이터레이터의 다음 것 메서드는 생성자 함수 내에서 코드가 실행될 때까지 실행됩니다. 수율 키워드에 도달했습니다. 그 후, 수율 키워드가 생성자 함수에 의해 반환되고 실행이 중지됩니다..

생성기 기능은 다음 것 메서드는 다음에 호출 될 때까지 호출됩니다. 수율 키워드에 도달했습니다. 일단 모든 수율 표현식이 실행되면 반환 된 값이 반환됩니다. 정의되지 않은.

다음은 간단한 예입니다.

함수 * generator_func (count) for (var i = 0; i 다른 예가 있습니다 :
 함수 * randomIncrement (i) yield i + 3; 수확량 i + 5; 수확량 i + 10; 수확량 i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). value); // 9 console.log (itr.next (). value); // 14 
 또한 수율* 값을 다른 생성자 함수에 전달하는 표현식
 기능 * 과일 (과일) (수확량 * 채소 (과일); "포도"를 산출하십시오;  기능 * 채소 (과일) (과일 + "시금치"를 생산한다. 열매 + "와 브로콜리"; 열매 + "와 오이";  var itr = fruits ( "Apple"); console.log (itr.next (). value); // "Apple and Spinach"console.log (itr.next (). value); // "Apple and Broccoli"console.log (itr.next (). value); // "Apple and Cucumber"console.log (itr.next (). value); // "포도"console.log (itr.next (). 값); // undefined 
 생성기 함수는 배열을 반복 할 때와 같이 한 번에 실행하는 것이 아니라 코드를 원하는 지점에서 값을 하나씩 이동하려는 경우 유용합니다.
 결론
 아래에 참조 목록을 포함 시켰습니다. 여기에는 참조 및 다른 주제에 대해 심도있는 기사 링크가 있습니다.. 두 ES6 표준 기능은 현재 Firefox에서만 작동합니다.
 참고 문헌
 ECMAScript 언어 : 함수 및 클래스
 즉시 호출 된 함수 식 (IIFE)
 ES6 생성기의 기본 사항
 화살표 기능
 기능 - Mozilla 개발자 네트워크