Fam으로 돌아온 걸 환영합니다!
오늘 나는 가장 기본적인 용어로 서로 다른 유형의 자바스크립트 함수를 분해하는 블로그를 만들고 싶다.
제가 처음 MDN 문서를 작성하기 시작했을 때 저는 대부분의 시간을 곤혹스러워했습니다. 그래서 이것은 현재 진행 중인 시리즈의 일부분이 될 것입니다. 이 시리즈는 JavaScript의 핵심 기초 지식을 깊이 있게 이해하게 될 것입니다. 이 기초 지식은 CompSci 배경이 아닌 사람이 작성한 것입니다.

함수

그래, 우리는 처음부터 시작해야 해!
함수는 인코딩의 기본 구성 부분으로 자바스크립트든 자바든 기본 원리에 익숙해지기를 원합니다.
자바스크립트에서 (대부분의 언어처럼) 함수는 임무를 수행하거나 값을 되돌려 주는 코드 블록이다. 이 점에서 주의해야 할 좋은 점은 함수가 이 점을 하고 함수를 실행해야 한다는 것이다.
그러나 그것을 더욱 재미있게 하기 위해 자바스크립트는 이미 발전되었고, 그것들을 설명하고 사용하는 여러 가지 방법이 있기 때문에 시작합시다.

함수 선언

나는 함수 성명부터 시작할 것이다. 왜냐하면 함수 성명이 프로그램이 컴파일할 때 향상되었기 때문이다.
뭐 공부 해요?향상은 자바스크립트가 함수를 메모리에 분배하는 방식과 순서이다. 이것은 단독으로 연구할 만한 주제this article에 대해 잘 설명한다.

function funcName(withParams) {
  // params can be declared, but are not enforced;
};

function funcName() {
  // without declared params;
};

funcName();

구문:

기능으로 시작

뒷면 이름

선택 가능한 매개 변수를 사용합니다. 매개 변수가 없으면 전달할 수 있고 arguments 를 사용하여 접근할 수 있습니다.

호출 함수 이름

을 통해 호출
우선 함수 설명을 향상시키는 이유는 컴파일할 때 자바스크립트가 "Function"으로 시작하는 성명을 찾기 때문이다. 이것은 매우 의미가 있다. 응, 그리고 이 모든 설명을 무더기의 맨 위로 끌어올린다.
이것은 우리가 주의해야 할 몇 가지 문제를 초래할 수 있다. 주로 컴파일러가 함수 성명을 향상시키기 전에 함수 성명을 호출할 때이다.

함수 표현식

함수 표현식은 익명 함수를 변수 (var/let/const) 에 분배하는 곳입니다

const funcName = function() {
  // do something;
};

funcName();

구문:

변수

에 명시된 이름으로 시작

변수

에 할당된 함수()

매개변수의 작동 방식 동일

동일한 방식으로 호출

함수 표현식은 향상되지 않기 때문에 함수 표현식의 싫은 실례가 향상되고 메모리에 저장되기 전에 호출되는 것을 방지할 수 있습니다.
P, 함수 표현식은 향상되지 않았지만 VAR 성명은 향상되었습니다. 따라서 VAR로 함수를 설명하면 향상됩니다.
하지만 잠깐만,

이것은 명명 함수 표현식이라고 한다

const funcName = function yoda(){
  // do something
};

typeof yoda; // -> "undefined"
funcName(); // -> "function"

그럼, 왜 이러는 거예요?우리가 유형을 검사할 때, Yoda는 "정의되지 않은"것입니다. 명명 함수 표현식의 장점은 이름이 함수 자체에서 식별되고 디버깅할 때 현저하게 도움을 줄 수 있다는 것입니다. 이름은 호출 창고에 표시되고, 익명 함수는 창고에 표시되지 않기 때문입니다.

const funcName = function yoda(param) {
  console.log(typeof yoda === 'function'); // -> true
  return typeof param;
}

funcName(3);     // -> 'number'
funcName.name;   // -> 'yoda'

따라서 업그레이드할 때 명명 함수 표현식이 당신에게 적합하다면 고려할 가치가 있습니까?

화살표 함수

아, 화살표 기능, 여러분이 가장 좋아하는 ES6의 새로운 기능.
화살표 함수는 함수 표현식의 문법 확장으로 우리가 부르는 뚱뚱한 화살표(또는 나는 로켓이라고 부르는 것을 더 좋아한다)를 이용하여 몇 가지 다른 방식으로 구성할 수 있다.

// -> no params
const funcName = () => {
  // do something;
};

// -> one param
const funcName = param => {
  // if one param the brackets arent needed;
};

// -> more than one param
const funcName = (paramOne, paramTwo, paramThree) => {
  // but if more than one they are required;
};

// -> if the function is simple enough it can be simplified to a single line, removing the need for brackets after the rocket.
const funcName = (x, y) => x * y;

지금까지의 모든 함수처럼 때로는 화살표가 작용하기 때문에 그 중의 함정들을 살펴보자.

이게 이상하더라고요.

Wes Bos는 이 점을 this 로 더 잘 설명할 수 있을 것이다.
그가 매우 잘하기 때문에, 나는 한 친구에게 전화를 해서, 네가 그 문장을 복습하게 할 것이지, 중복하는 것이 아니다.

시공자

화살표 함수는 구조 함수로 사용할 수 없으므로 화살표 함수로 "New"를 호출할 수 없습니다.

객체 문자

마지막 까다로운 부분은 대상 문자입니다. 예를 들어 문법 화살표 함수로 인해 그것들을 해독할 수 없습니다.
ES5 객체 문자는 다음과 같이 작동합니다.

const setColour = function (colour) {
    return {value: colour}
};

let backgroundColour = setColour('Blue');
backgroundColour.value; // -> "Blue"

그러나 기본적으로 화살표 함수는 괄호를 사용하기 때문에 블록 범위와 대상 문자를 구분할 수 없기 때문에 오류가 발생할 수 있습니다.

const setColour = colour => {value: colour };

하지만 극복할 수 있지만 포장해야 한다.

const setColour = colour => ({value: colour });

함수 표현식 즉시 호출(IIFE)

말 그대로 정의할 때 호출되는 함수입니다.

(function () {
    // do something;
})();

이 함수는 보기에는 좀 이상하지만, 괄호로 묶인 익명 함수일 뿐, 그 후에 바로 호출됩니다.
그것들은 즉시 호출될 수 있을 뿐만 아니라, 전 세계로 확대되지 않을 뿐만 아니라, 로켓으로 표현할 수 없다.
컴파일 프로세스가 호출되었기 때문에, 명칭은 필요하지 않지만, 명칭을 줄 수 있습니다.

(function funcName() {
  // do something;
})();

iLife는 많은 추가 기능이 있지만, 놀라운 article 을 지적해 드리겠습니다. 이 모든 것을 명확하게 포함합니다.
그래, 나는 네가 이 문장을 좋아하길 바란다. 만약 네가 이렇게 멀리 가서 좋아하거나 공유하면 귀엽고, 네가 이렇게 좋아한다면.
나는 곧 돌아와서 자바스크립트와 관련된 더 많은 내용을 가져올 것이다.
많은luv
합작사