JavaScript 함수 유형(한국어)

JavaScript 함수 유형은 초보 개발자에게 함수의 다양한 형태를 소개하는데 도움이 될 것입니다. 함수는 JavaScript 프로그래밍에서 중요한 개념 중 하나이며, 이러한 다양한 함수 유형을 이해하면 코드를 더 효과적으로 작성할 수 있습니다.

Method

  1. Named Functions: 기명함수는 사용자가 이름을 지정한 함수로, 선억적 함수라고도 부른다.

  2. Anonymous Functions: 함수를 만들 때 이름을 지정하지 않고 변수 혹은 호출만으로 선언할 수 있는 함수 입니다.

  3. Arrow Functions: 단순하고 간결한 문법으로 함수를 만들 수 있습니다.

  4. Immediately Invoked Function Expressions: 자동 실행 함수로도 불리는 즉시 실행 함수입니다. 로컬 블록 내에서 호이스팅을 방지하고, 전역변수를 오염시키는 것을 방지하는 프라이버시 유지 함수입니다.

  5. Higher Order Functions: 하나 이상의 함수를 인수로 취한다. 함수를 결과로 반환한다.

  6. Constructor Function: 객체를 생성하기 위해 사용되는 특수한 함수입니다.


Named Functions

기명함수, 선언적 함수라고도 불리는 이 함수는, 가장 전통적인 함수 정의 방식입니다. 함수 이름을 사용하여 함수를 정의하고 호출할 수 있습니다. 함수 이름을 통해 코드 내에서 언제든지 호출할 수 있습니다. 이러한 함수는 코드의 가독성을 향상시키고 재사용 가능하게 만듭니다.

Named Functions

function greetPlanet(){
    console.log("Hello, Planet");
}
greetPlanet();

Anonymous Functions

익명 함수는 이름이 없는 함수로, 주로 변수에 함수를 할당하는 방식으로 사용됩니다. 이 함수는 다른 함수의 인자로 넘길 수 있고, 함수 표현식을 통해 생성됩니다.

Anonymous Functions

let greet = function (name) {
    console.log(`안녕, ${name}`);
}

greet("KJ");

Arrow Functions

화살표 함수는 ES6에서 도입된 함수 정의 방식으로, 주로 짧은 함수를 간결하게 표현할 때 사용됩니다. 함수 내용이 한 줄인 경우에 특히 유용합니다.

Arrow Functions

let greet = () => console.log("안녕");
greet();

Immediately Invoked Function Expressions

즉시 실행 함수 표현식으로, 생성 즉시 실행되는 함수로, 함수를 정의하자마자 호출합니다. 이를 사용하여 전역 스코프 오염을 방지하고 비공개 스코프를 만들 수 있습니다.

Immediately Invoked Function Expressions

(function () {
    let str = "Hello World!";
    console.log(str);
})();

Higher Order Functions

고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 가리킵니다. 이것들은 함수형 프로그래밍에서 중요한 개념이며, 주로 배열 조작 함수(map, filter, reduce)에 사용됩니다.

Higher Order Functions

let arr = [20, 30, 40];

let newArr = arr.map((el) => el + 10);
console.log(newArr);

Constructor Function

생성자 함수는 비슷한 속성과 메서드를 가진 객체를 여러 개 생성하기 위한 블루프린트 역할을 합니다. new 키워드를 사용하여 새로운 객체 인스턴스를 만듭니다.

Constructor Function

function Person(name, place) {
    this.name = name;
    this.place = place;
}

let user1 = new Person("SJ", "Korea");

console.log(`Hello, World! ${user1.name} from ${user1.place}.`);