JavaScript 자바스크립트 함수 function 알아보기

자바스크립트 함수란?

자바스크립트 함수는 프로그래밍에서 특정 작업이나 계산을 수행하는 코드 블록입니다. 함수는 재사용 가능한 코드 조각을 만들어내며, 프로그램을 더 모듈화하고 관리하기 쉽게 만들어줍니다. 또한 함수는 작업을 수행하고 값을 반환할 수 있습니다.

함수 특징

1. 재사용성 (Reusability)
   • 함수는 특정한 작업을 수행하는 코드 블록으로, 이를 여러 번 호출할 수 있습니다. 이는 코드를 재사용하여 중복을 피하고 프로그램을 간결하게 만듭니다.
2. 매개변수 (Parameters)
   • 함수는 매개변수를 받아들일 수 있습니다. 매개변수는 함수 내에서 사용되는 변수로, 함수를 호출할 때 값이 전달됩니다. 이를 통해 함수는 다양한 상황에서 다양한 입력을 처리할 수 있습니다.
3. 반환값 (Return Value)
   • 함수는 결과값을 반환할 수 있습니다. return 키워드를 사용하여 함수가 실행된 결과를 호출한 곳으로 전달할 수 있습니다. 이를 통해 함수의 실행 결과를 활용할 수 있습니다.
4. 스코프 (Scope)
   • 자바스크립트에서 함수는 자체의 스코프를 가집니다. 이는 함수 안에서 선언된 변수는 함수 내부에서만 유효하며 외부에서는 접근할 수 없습니다. 이로써 변수의 충돌을 방지하고 데이터를 캡슐화할 수 있습니다.
5. 클로저 (Closures)
   • 함수는 클로저의 개념을 지원합니다. 클로저는 함수가 자신이 정의된 스코프 외부의 변수에 접근할 수 있는 특성을 나타냅니다. 이는 함수가 생성될 때의 환경을 기억하고 이후에도 그 상태를 유지할 수 있게 합니다.
6. 익명 함수 (Anonymous Function)
   • 함수는 이름을 가지지 않고 변수에 할당하여 사용할 수 있습니다. 이러한 익명 함수는 주로 콜백 함수나 즉시 실행 함수 등의 패턴에서 활용됩니다.
7. 화살표 함수 (Arrow Function)
   • ES6에서 도입된 화살표 함수는 간결한 문법을 제공하며, 주로 간단한 표현식이나 콜백 함수를 작성할 때 사용됩니다.
8. 호이스팅 (Hoisting)
   • 자바스크립트에서 함수 선언은 변수 선언과 마찬가지로 호이스팅(hoisting)이 발생합니다. 함수 선언문은 코드의 최상단으로 끌어올려지기 때문에 선언 이전에도 호출할 수 있습니다.
9. 매개변수 기본값 (Default Parameters)
   • ES6에서 도입된 기능으로, 함수의 매개변수에 기본값을 설정할 수 있습니다. 이를 통해 함수를 호출할 때 인자를 생략할 경우 기본값이 사용됩니다.
10. 가변 인자 (Rest Parameters)
    • 함수를 정의할 때 몇 개의 인자를 받을지 미리 지정하지 않고, 호출 시 필요한 수만큼의 인자를 받을 수 있게 하는 기능입니다. 이를 통해 함수는 정해진 개수의 매개변수보다 많은 인자를 처리할 수 있습니다.
    • 가변인자는 함수 정의에서 … 연산자와 함께 사용되며, 이를 통해 함수 내에서 그 인자들을 배열로 다룰 수 있습니다. 가변인자를 사용하면 함수가 동적으로 다양한 상황에 대응할 수 있어 높은 유연성을 제공합니다.

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("철수"); // 출력: 안녕하세요, 철수님!

function add(x, y) {
  return x + y;
}

let result = add(3, 4);
console.log(result); // 출력: 7

let multiply = function(a, b) {
  return a * b;
};

let product = multiply(2, 5);
console.log(product); // 출력: 10

// 즉시 실행 함수
(function() {
  console.log("이 함수는 즉시 실행됩니다.");
})();

let square = (x) => x * x;

let squaredValue = square(5);
console.log(squaredValue); // 출력: 25

function outerFunction() {
  let outerVariable = "바깥 변수";

  function innerFunction() {
    let innerVariable = "안쪽 변수";
    console.log(outerVariable + "에 접근 가능");
    console.log(innerVariable + "에 직접 접근 가능");
  }

  return innerFunction;
}

let closureExample = outerFunction();
closureExample(); // 출력: 바깥 변수에 접근 가능, 안쪽 변수에 직접 접근 가능

hoistedFunction(); // 호이스팅으로 인해 호출 가능

function hoistedFunction() {
  console.log("호이스팅된 함수");
}

function greetWithDefault(name = "손님") {
  console.log("안녕하세요, " + name + "님!");
}

greetWithDefault(); // 출력: 안녕하세요, 손님님!
greetWithDefault("영희"); // 출력: 안녕하세요, 영희님!

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

let result = sum(1, 2, 3, 4, 5);
console.log(result); // 출력: 15