함수 표현식은
표현식이 예상되는 위치에 생성됩니다. 자주 접하게 될 함수
표현식을 변수에 할당된 값으로 사용합니다. 함수 선언이
항상 이름이 필요하지만 함수 표현식을 사용하여 익명처리
함수를 생략하고 function 키워드와 함께
선택적 매개변수를 포함하는 괄호 쌍:
const myVariable = function() { };
그런 다음 이러한 포드를 호출합니다 함수 표현식을 사용합니다.
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
함수 표현식을 사용하여 구문을 사용하여 이름이 지정된 함수를 만들 수도 있습니다. 함수 선언과 유사합니다.
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
그러나 함수 선언과 달리 이름이 지정된 함수 표현식은 함수 자체 내에서만 함수 이름으로 액세스:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
함수 표현식과 연결된 이름은 주로 디버깅에 유용합니다. 가 이름이 지정된 함수 표현식은 자체를 재귀적으로 호출할 수도 있지만 이는 현대 개발에서 매우 일반적인 사용 사례입니다.
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
화살표 함수 표현식
화살표 함수 표현식('화살표 함수' 또는 드물게 '람다'이라고 함) 함수')가 ES6에 도입되어 생성에 필요한 간결한 문법을 제공합니다. 몇 가지 고유한 동작이 있는 익명 함수 표현식입니다.
표현식이 예상되는 곳마다 화살표 함수를 만들 수 있습니다.
예를 들어 변수에 할당된 값으로 나타낼 수 있습니다. 가장 일반적인 형태의 화살표는
함수는 0 이상의 일치하는 괄호 쌍으로 구성됩니다.
매개변수, 단일 등호 및 초과 문자로 이루어진 화살표
(=>), 함수 본문이 포함된 일치하는 중괄호 한 쌍이 있습니다.
const myFunction = () => {};
특정 조건에서는 구문을 더 간결하게 만들 수 있습니다. 매개변수를 하나만 사용하는 경우 시작 괄호를 생략할 수 있습니다.
const myFunction = myParameter => {};
함수 본문이 단일 표현식의 값을 반환하도록 하려면 함수 본문을 중괄호로 묶거나 return 키워드를 사용할 필요가 없습니다.
const myFunction = () => 2 + 2
myFunction()
> 4
화살표 함수는
arguments 또는
this 값. 대신 두 유형 모두 상속됩니다.
화살표 함수의
어휘적으로 포함된 환경으로, 가장 가까운
해당 컨텍스트를 제공하는 인클로징 함수를 제공합니다.
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
화살표 함수 호출
화살표 함수는
다른 유형의 함수도 사용할 수 있습니다.
화살표 함수 본문에 있는 arguments 객체는 다음에서 값을 상속합니다.
해당 화살표 함수의 가장 가까운
어휘적으로 포함된 환경:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
이 예에서 false 인수로 호출된 외부 함수는
true 인수가 있는 내부 화살표 함수 arguments 객체
화살표 함수 내부의 값은 외부 함수의 결합으로 확인되고,
내부 함수는 외부 함수의 false를 로깅합니다.
상위 컨텍스트에서 상속할 arguments 객체가 없는 경우 화살표
함수의 arguments 객체가 정의되지 않은 상태에서 이 객체에 액세스하려고 하면
오류:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
즉시 호출되는 함수 표현식(IIFE)
IIFE (즉시 호출 함수 표현식)라고도 하는 "자체 실행 익명 함수" 는 함수식이며 즉시 생성됩니다. IIFE는 시스템에 의해 생성된 함수식을 사용하여 그룹화 연산자로 함수를 둘러쌉니다. 두 번째로 일치하는 괄호 쌍이 함수를 호출합니다. 함수 정의 자체를 따르거나 그룹화된 직후에 연산자와 같습니다. 표준 함수를 사용하는 경우 실질적인 차이가 없습니다. 비교해 보겠습니다.
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
첫 번째 예시에서는 그룹화된 함수 표현식을 호출합니다. 두 번째 예는 그룹화 연산자 내에서 함수 선언을 호출하면 가 그룹화된 표현식으로 평가됩니다. 결과는 다음 중 어느 시점에서나 동일합니다. 있습니다.
하지만 IIFE가 화살표 함수인 경우에는 차이가 있습니다. 이 경우 함수를 호출하는 데 사용되는 괄호는 그룹화 연산자 외부에 있어야 합니다. 화살표 함수 자체는 표현식이 아니지만 표현식이 예상되는 컨텍스트에서 만들어져야 하기 때문입니다. 그룹화 연산자의 범위 내에서 화살표 함수를 호출하려고 하면 표현식 컨텍스트에서 아직 생성되지 않은 화살표 함수를 호출하는 것이 됩니다.
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
그룹화 연산자는 표현식을 예상하기 때문에 그 뒤에 오는 괄호가 그룹화된 표현식:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
기존 애플리케이션은 특히 함수 범위 변수 및 함수 선언으로 전역 범위를 오염시키지 않기 위해 범위를 관리하는 데 IIFE를 자주 사용했습니다. 블록 범위 지정을 도입하기 전 ES6에서는 전체 스크립트를 IIFE로 래핑하여 글로벌 범위의 우발적 오염을 방지합니다.
이해도 확인
함수 외부에서 이름으로 이름이 지정된 함수 표현식을 호출할 수 있나요? 함수입니까?