JavaScript 기초: 함수

 

 

JavaScript 기초: 함수

이번 포스팅에서는 JavaScript에서 함수를 사용하는 방법에 대해 알아보겠습니다. 함수는 반복적인 작업을 줄이고, 코드를 더 구조적으로 작성할 수 있도록 도와줍니다.

1. 함수란 무엇인가?

함수는 하나 이상의 작업을 수행하는 코드 블록입니다. 함수는 필요할 때 여러 번 호출하여 재사용할 수 있습니다.

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

2. 함수 선언

JavaScript에서 함수를 선언하는 방법은 두 가지가 있습니다: 함수 선언식과 함수 표현식.

2.1 함수 선언식

가장 기본적인 형태의 함수 선언입니다.

function add(a, b) {
    return a + b;
}
console.log(add(2, 3)); // 출력: 5
    

2.2 함수 표현식

함수를 변수에 할당하여 선언합니다.

const subtract = function (a, b) {
    return a - b;
};
console.log(subtract(5, 2)); // 출력: 3
    

3. 화살표 함수

ES6에서 도입된 화살표 함수는 간결한 함수 선언 방식을 제공합니다.

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 출력: 12
    

4. 함수의 매개변수와 반환값

함수는 매개변수를 전달받아 작업을 수행하고, 결과값을 반환할 수 있습니다.

function greet(name) {
    return "안녕하세요, " + name + "!";
}
console.log(greet("홍길동")); // 출력: 안녕하세요, 홍길동!
    

5. 함수의 기본 매개변수

기본값을 매개변수로 설정하여 함수 호출 시 값을 생략할 수 있습니다.

function greet(name = "친구") {
    return "안녕하세요, " + name + "!";
}
console.log(greet()); // 출력: 안녕하세요, 친구!
console.log(greet("홍길동")); // 출력: 안녕하세요, 홍길동!
    

6. 익명 함수와 즉시 실행 함수

6.1 익명 함수

이름이 없는 함수입니다. 콜백으로 자주 사용됩니다.

setTimeout(function () {
    console.log("3초 후 실행됩니다.");
}, 3000);
    

6.2 즉시 실행 함수

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

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

7. 활용 예제

실습 과제

다음 조건을 만족하는 함수를 작성해 보세요:

1. 두 숫자를 더한 결과를 반환하는 함수
2. 문자열의 길이를 반환하는 함수

힌트: 함수 선언식 또는 표현식을 사용해 보세요.

// 실습 3-1: 두 숫자를 더한 결과를 반환하는 함수
function addNumbers(a, b) {
    return a + b;
}
console.log(addNumbers(5, 7)); // 출력: 12

// 실습 3-2: 문자열의 길이를 반환하는 함수
function getStringLength(str) {
    return str.length;
}
console.log(getStringLength("JavaScript")); // 출력: 10

 

이번 포스팅에서는 JavaScript 함수의 기초와 다양한 선언 방식을 배웠습니다. 다음에는 "DOM 조작"에 대해 다뤄보겠습니다!