elex/javascript-examples

Fork 0

Files

Elex f867e689aa 2025-01-26T02:15:33

2025-01-26 02:15:33 +09:00

6.1 KiB

Raw Blame History

함수

자바스크립트에서 함수는 코드의 재사용성과 모듈화를 높이는 가장 기본적인 단위입니다. 함수는 특정 작업을 수행하거나 값을 반환하는 독립된 코드 블록입니다.

함수는 특정 작업을 수행하는 코드 블록으로, 필요할 때 호출할 수 있습니다. 함수를 사용하면 다음과 같은 장점이 있습니다:

재사용성: 동일한 작업을 여러 번 실행할 때 반복적인 코드를 줄일 수 있습니다.
가독성: 코드가 구조화되어 더 이해하기 쉬워집니다.
유지보수성: 코드를 변경하거나 확장하기 용이합니다.

함수 선언과 호출

함수를 선언하려면 function 키워드를 사용합니다.

function greet(name) {
  console.log(`안녕하세요, ${name}!`);
}

함수를 호출하려면 함수 이름 뒤에 괄호를 붙이고 필요한 인수를 전달합니다.

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

함수의 구성 요소

함수 이름 (Function Name): 함수를 식별하는 데 사용됩니다.
매개변수 (Parameters): 함수가 입력값을 받을 수 있도록 정의합니다.
함수 본문 (Body): 함수가 실행할 코드 블록입니다.
반환값 (Return Value): 함수가 작업 후 반환하는 값입니다.

function add(a, b) {
  return a + b; // 반환값
}

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

함수의 반환값과 return 키워드

함수는 작업 결과를 반환하기 위해 return 키워드를 사용할 수 있습니다.

반환값이 없는 함수는 undefined를 반환합니다.

function noReturn() {}
console.log(noReturn()); // 출력: undefined

함수 표현식 (Function Expression)

함수는 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다.

const multiply = function (x, y) {
  return x * y;
};

console.log(multiply(4, 5)); // 출력: 20

스프레드 연산자

스프레드 연산자는 자바스크립트 ES6에서 도입된 문법으로, 세 개의 점(...)으로 표현됩니다. 이 연산자는 반복 가능한(iterable) 객체의 요소들을 펼쳐서 개별 요소로 만들어주는 역할을 합니다.

배열 결합

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

객체 얕은 복사

const person = { name: '홍길동', age: 30 };
const newPerson = { ...person };

함수의 인자 전달

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
const result = sum(...[1, 2, 3]); // 6

함수 호출 시 인자 전달

함수의 매개변수로 사용되어, 남은 인수들을 배열로 모아줍니다.

const numbers = [1, 2, 3];
Math.max(...numbers); // 3

화살표 함수 (Arrow Function)

ES6부터 도입된 화살표 함수는 간결한 문법으로 함수를 작성할 수 있습니다.

const subtract = (a, b) => a - b;

console.log(subtract(10, 4)); // 출력: 6

중괄호 {}를 생략하면 암묵적으로 값을 반환합니다.
중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해주어야 합니다.
매개변수가 하나라면 괄호 ()도 생략할 수 있습니다.

const square = x => x * x;

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

함수의 다양한 유형

기본 함수 (Regular Function)

function sayHello() {
console.log("안녕하세요!");
}

sayHello(); // 출력: 안녕하세요!

매개변수가 있는 함수

function greetUser(name, age) {
console.log(`이름: ${name}, 나이: ${age}`);
}

greetUser("철수", 25); // 출력: 이름: 철수, 나이: 25

기본값을 가진 매개변수 (Default Parameters) : 매개변수의 기본값을 설정할 수 있습니다.

function welcome(name = "사용자") {
console.log(`환영합니다, ${name}!`);
}

welcome(); // 출력: 환영합니다, 사용자!
welcome("민수"); // 출력: 환영합니다, 민수!

익명 함수 (Anonymous Function) : 익명 함수는 이름이 없는 함수입니다. 주로 콜백 함수로 사용됩니다.
```
setTimeout(function () {
console.log("3초 후 실행됩니다.");
}, 3000);
```

고급 함수 활용

재귀 함수 (Recursive Function)

함수 내에서 자기 자신을 호출하는 함수입니다.

function factorial(n) {
  if (n === 1) return 1; // 종료 조건
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 출력: 120

콜백 함수 (Callback Function)

다른 함수의 인수로 전달되는 함수입니다.

function processUserInput(callback) {
  const name = "영희";
  callback(name);
}

processUserInput(function (name) {
  console.log(`안녕하세요, ${name}!`);
});

클로저 (Closure)

클로저는 함수와 해당 함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하는 특성입니다.

function makeMultiplier(multiplier) {
  return function (x) {
    return x * multiplier;
  };
}

const double = makeMultiplier(2);
console.log(double(5)); // 출력: 10

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

IIFE는 선언과 동시에 실행되는 함수입니다.

(function () {
console.log("즉시 실행 함수입니다.");
})();

활용 사례

// 배열 요소의 합계
const numbers = [1, 2, 3, 4, 5];

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

console.log(sumArray(numbers)); // 출력: 15

// 문자열 반전
function reverseString(str) {
  return str.split("").reverse().join("");
}

console.log(reverseString("hello")); // 출력: olleh

6.1 KiB Raw Blame History

함수