[JavaScript] 함수(Function)

Moon·2024년 10월 22일

JavaScript | 기초

목록 보기

8/48

변수 = 값
함수 = 명령들

함수는 다양한 명령들을 저장하는 것이라고 생각하면 된다. 변수가 값을 저장하는 것처럼, 함수는 여러 명령들을 저장하는 역할을 한다. 함수를 사용하면 복잡한 명령을 간결하게 묶어서 관리할 수 있으며, 나중에 반복적으로 사용할 때 특히 유용하다.

함수 선언

변수를 사용할 때처럼, 함수도 선언을 먼저 해야 한다.

함수는 function이라는 키워드를 사용해서 선언할 수 있다. function 뒤에 함수의 이름을 적고, 그 뒤에 소괄호 ()를 쓴다. 그다음, 중괄호 {} 안에 실행할 명령들을 작성하면 된다.

// 함수 선언
function 함수이름() { 명령들;}

이렇게 한 줄로 작성할 수도 있지만, 일반적으로는 가독성을 위해 줄바꿈을 사용하고, 명령어들은 한 줄에 하나씩 작성하는 것이 좋다. 특히 명령어들이 많을 때, 줄바꿈을 통해 코드가 더 깔끔하게 보인다.

// 함수 선언
function 함수이름() {
    명령;
    명령;
}

함수 예시: 여러 나라의 인사말 출력

함수의 예시로, 여러 나라의 인사말을 한 번에 출력하는 printGreetings라는 함수를 만들어본다.
함수 안에 이전에 많이 사용했던 console.log() 명령어를 넣어서 한 번에 여러 인사말을 출력할 수 있다.

// 함수 선언: 여러 인사말을 출력하는 함수
function printGreetings() {
    console.log('안녕하세요');  // 한국어 인사
    console.log('Hello');       // 영어 인사
    console.log('Hola');        // 스페인어 인사
    console.log('Bonjour');     // 프랑스어 인사
    console.log('こんにちは');   // 일본어 인사
}

이 함수는 다양한 나라의 인사말을 출력하는 명령어들을 하나로 묶어 두었다. 함수 안에 있는 console.log() 명령어들이 한 번에 실행되도록 만들어진 함수다.

그런데 저장하고 실행해 보면 아무것도 나타나는 게 없다.

함수 선언은 그 함수가 사용될 때 어떤 행동을 할지 정의만 하는 것이다.

함수 호출

함수를 선언한 후에는, 실제로 함수를 호출해야 실행된다.
함수를 호출하려면, 함수 이름 뒤에 소괄호 ()를 붙여서 실행할 수 있다. 함수가 호출되면, 그 안에 작성된 명령어들이 순서대로 실행된다.

// 함수 호출
printGreetings();

이 코드를 실행하면, 여러 나라의 인사말이 한 번에 출력된다:

함수의 장점: 반복 작업을 간결하게

함수는 여러 명령어들을 하나의 이름으로 묶어서 사용할 수 있기 때문에, 코드의 가독성과 재사용성을 높여준다. 예를 들어, 여러 번 인사말을 출력해야 할 때, 매번 console.log()를 쓰는 대신 함수를 호출하면 된다.

// 함수 호출을 여러 번 사용해보자
printGreetings();
printGreetings();

이렇게 함수를 여러 번 호출하면, 한 번 작성된 명령을 반복해서 실행할 수 있다. 함수를 사용하면 복잡한 작업을 단순하게 관리할 수 있다.
console.log()를 여러 번 반복해서 쓰지 않고도, 함수를 호출함으로써 쉽게 같은 작업을 할 수 있다.

함수 실습 문제

지금까지 배운 내용을 바탕으로 함수를 작성하고 호출하는 연습을 하면서 개념을 더 확실히 할 필요가 있다. 아래 문제들을 풀어보면서 직접 함수를 작성하고 실행해본다.

1. 기본적인 함수 작성

이름이 sayHi인 함수를 작성해서, 그 안에 console.log('Hi!') 명령어를 넣고 출력한다.

function sayHi() {
    console.log('Hi!');
}

sayHi();  // 예상 출력: Hi!

2. 여러 명령어를 가진 함수 작성

이름이 showPersonalInfo인 함수를 작성하고, 그 안에 이름, 나이, 좋아하는 음식을 출력하는 console.log() 명령어를 넣어서 출력한다.

function showPersonalInfo() {
    console.log("이름: 홍길동");
    console.log("나이: 25살");
    console.log("좋아하는 음식: 떡볶이");
}

showPersonalInfo();  
/* 예상 출력:
이름: 홍길동
나이: 25살
좋아하는 음식: 떡볶이
*/

3. 반복적인 작업을 처리하는 함수

greetTwice라는 함수를 작성하고, 그 안에 인사말을 두 번 출력하는 console.log() 명령어를 넣는다.

function greetTwice() {
    console.log('Hello!');
    console.log('Hello!');
}

greetTwice();  
/* 예상 출력:
Hello!
Hello!
*/

4. 함수 호출을 반복

위에서 작성한 greetTwice 함수를 두 번 호출하면 인사말이 네 번 출력된다.

greetTwice();  
greetTwice();
/* 예상 출력:
Hello!
Hello!
Hello!
Hello!
*/

함수는 여러 명령들을 하나로 묶어서 관리하는 방식이다. 변수가 값을 저장하는 것처럼, 함수는 명령어들을 저장한다.

콘솔에 값을 출력할 때 사용했던 console.log도 사실 JavaScript를 만든 개발자들이 미리 작성해 둔 함수다. 겉으로 보기엔 콘솔에 값을 출력하는 간단한 기능처럼 보이지만, 실제로는 그 안에 복잡한 명령어들이 들어 있을 수 있다.

그런데 함수 이름인 console.log만 알면 내부 동작을 몰라도 바로 사용할 수 있다. 이런 식으로 함수 내부의 복잡한 부분은 감추고, 이름을 통해 핵심 기능만 드러내는 것이 함수에서의 추상화다.

요약

함수는 function 키워드를 사용해 선언한다. function 뒤에 함수의 이름을 적고, 그 뒤에 소괄호 ()를 쓴다. 그다음, 중괄호 {} 안에 실행할 명령들을 작성하면 된다.

console.log() 같은 명령어를 함수 안에 넣을 수 있다.

함수를 호출할 때는 함수 이름 뒤에 소괄호 ()를 붙인다.