JavaScript의 다른 유형의 함수

사진 제공: Markus Spiske on Unsplash

JavaScript 함수는 특정 작업을 수행하도록 설계된 코드 블록입니다.

MDN은 말한다:

함수는 JavaScript의 기본 빌딩 블록 중 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 명령문 집합인 JavaScript 절차입니다. 함수를 사용하려면 호출하려는 범위의 어딘가에 함수를 정의해야 합니다.

JavaScript 함수는 "무언가"가 호출(호출)할 때 실행됩니다.

예시:

function square(x) {
  return x * x;
}
square(10); // 100

기본 구문:

function validFunctionName(parameter) {
  return statement;
}

함수에는 여러 매개변수가 있거나 매개변수가 전혀 없을 수 있습니다. 다음 예에서 bark는 매개변수 이름을 나열하지 않지만 power는 매개변수 이름을 2개 나열합니다.
bark( )

function bark() {
  return "woof-woof";
}
bark(); //   woof-woof

power( )

function power(base, exponent) {
  let result = 1;
  for(let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
}
power(2, 10); // 1024

함수 표현:

함수 표현식은 명명된 함수 또는 익명 함수를 정의합니다. 익명 함수는 이름이 없는 함수입니다.

var fullName = function(firstName, lastName) {
 return `${firstName} ${lastName}`;
}
fullName("Jamal", "Uddin"); // Jamal Uddin

화살표 기능:

화살표 함수 표현식은 함수 표현식을 작성하기 위한 더 짧은 구문입니다. 화살표 함수는 자체 값을 생성하지 않습니다.

여러 가지 방법으로 화살표 함수를 작성할 수 있습니다.

첫 번째:

일반 함수 표현식처럼 보이지만 화살표(=>) 키가 있습니다.

const double = (value) => {
  return value * 2
}
double(10); // 20

초:

반환 키워드 생략

const double2 = value => value * 2;
double2(10); // 20

제삼:

함수에 매개변수가 없는 경우

const noise = () => console.log("Pling");
noise(); // Pling

또는

const noise2 = _ => console.log("Pling");
noise2(); // Pling

네번째:

매개변수가 두 개 이상인 경우 괄호를 사용해야 합니다.

const addAll = (x, y, z) => x + y + z;

addAll(10, 20, 30); // 60

다섯 번째:

매개 변수에서 기본값을 사용할 수 있습니다.

const multiply = (a = 2, b = 3, c = 1) => a * b * c;
multiply(2, 2, 2); // 8
multiply(2, 2);    // 4
multiply(3);       // 9
multiply();        // 6

JavaScript는 함수에 전달하는 인수의 수에 대해 매우 광범위합니다. 너무 많이 전달하면 추가 항목은 무시됩니다. 너무 적게 전달하면 누락된 매개변수에 정의되지 않은 값이 할당됩니다.

반품:

return 키워드는 함수 내에서만 사용할 수 있음을 기억하십시오. 다른 예를 살펴보겠습니다.

function returnOnlyOnce(){
  return "Hello";
  return "Goodbye";
}
returnOnlyOnce(); // "Hello"

이 예제에서 return 키워드가 함수에서 한 번만 실행될 수 있음을 알 수 있습니다. 일단 실행되면 함수가 완료되고 다른 코드 행은 실행되지 않습니다.

함수 속기 방법:

약식 메서드 정의는 객체 리터럴 및 ES6 클래스의 메서드 선언에 사용할 수 있습니다. 함수 이름, 괄호 쌍(para1, ..., paramN)의 매개 변수 목록과 본문 문을 구분하는 중괄호 { ... } 쌍을 사용하여 정의할 수 있습니다.

다음 예제에서는 개체 리터럴에서 속기 메서드 정의를 사용합니다.

const fruits = {  
  items: [],
  add(...items) {
    this.items.push(...items);
  },
  get(index) {
    return this.items[index];
  }
};
fruits.add('mango', 'banana', 'guava');  
fruits.get(1); // banana

과일 개체의 add() 및 get() 메서드는 짧은 메서드 정의를 사용하여 정의됩니다. 이러한 메서드는 평소와 같이 호출됩니다: fruits.add(...) 및 fruits.get(...) .

발전기 기능:

ES6는 생성기(또는 생성기 함수)의 형태로 함수 및 반복자를 사용하는 새로운 방식을 도입했습니다. 제너레이터는 도중에 멈추고 멈춘 곳에서 계속할 수 있는 기능입니다. 간단히 말해서 제너레이터는 함수처럼 보이지만 반복자처럼 작동합니다.

참고: async/await는 생성기를 기반으로 합니다. 자세히 보기here .

예시:

function * generatorFunction() { 
  yield 'Hello, ';
console.log('I will be printed after the pause');  
  yield 'World!';
}
const generatorObject = generatorFunction();
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
// output should be following below.
// Hello, 
// I will be printed after the pause
// World!
// undefined

기능: 새 기능

Function 생성자는 새 Function 개체를 만듭니다.

var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)); // 8

진실의 출처:

MDN JavaScript Function

Eloquent JavaScript functions chapter

w3schools

추신: 영어는 제 모국어가 아니며 이것은 저의 첫 번째 영어 기사이므로 실수를 발견했다면 더 많은 기사를 쓸 수 있도록 저를 용서해 주십시오.

행복한 프로그래밍! :)

나는 누구인가?

방글라데시 다카에서 소프트웨어 개발자로 일하고 있는 Md. Jamal Uddin입니다. 나는 새로운 것을 배우고 다른 사람들과 공유하는 것을 좋아합니다. 절단 기술을 가지고 노는 것이 나의 취미이고 레거시를 가지고 일하는 것이 나의 본업입니다 :). 나를 연결하고