특정한 작업을 수행하는 코드 블록, 함수

함수(Function)는 특정한 작업을 수행하는 재사용 가능한 코드 블록입니다.

이를 위해 1줄 이상의 코드를 중괄호 { }로 묶어 블록(Block)을 만들고, 이 블록에 이름을 붙입니다.

함수 정의 예시
function sayHello() {
  console.log('Hello');
  console.log('Nice to meet you');
}

위 함수는 'Hello', 'Nice to meet you'라는 메시지를 출력하는 작업에 sayHello라는 이름을 붙였습니다.

2개의 console.log 코드가 함수 내부에 작성되어 있으며, 이 2개의 명령문은 중괄호 { }로 묶여 하나의 블록을 형성합니다.

함수를 호출하면 함수 내부의 코드가 실행되어 'Hello', 'Nice to meet you' 메시지가 1줄씩 출력됩니다.

함수 호출
function sayHello() {
  console.log('Hello');
  console.log('Nice to meet you');
}

sayHello();
// Hello
// Nice to meet you

함수는 왜 사용할까요?

함수의 목적은 코드의 재사용성을 높이는 것입니다.

한 번 정의된 함수는 함수 이름을 활용해 여러 번 호출할 수 있습니다.

이를 통해 코드의 중복을 줄이고, 유지 보수성을 높일 수 있습니다.

자바스크립트에서 함수는 function 키워드를 활용해 함수의 이름과 매개변수를 정의합니다.

add 함수 정의
function add(a, b) {
  return a + b;
}

여기서 add는 함수의 이름이며, a와 b는 매개변수입니다.

중괄호 { } 내부에는 함수가 실행할 코드를 작성하며, return 키워드를 사용해 함수의 결과값을 반환합니다.

함수를 호출한다는 것은 함수 내부의 코드를 실행하는 것을 의미합니다.

함수를 호출할 때는 함수의 이름 뒤에 괄호 ()를 붙여 호출합니다.

add 함수 호출
const result = add(10, 20); // 30

위 코드에서 add(10, 20)은 add 함수를 호출하고, 10과 20은 함수에 전달하는 인자입니다.

함수가 호출되면 함수 매개변수 a와 b에 인자 10과 20이 전달되어 함수가 실행됩니다.

이후 함수 내부의 return a + b 코드가 실행되어 30이 반환됩니다.

return으로 반환된 값인 30은 result 상수에 저장됩니다.

매개변수(Parameter)는 함수를 정의할 때 내부적으로 사용되는 변수를 의미하며, 인자(Argument)는 함수를 호출할 때 전달하는 실제 값을 의미합니다.

두 수의 곱을 반환하는 multiply 함수
function multiply(a, b) {
  return a * b;
}

const result = multiply(2, 3); // 6

예를 들어, multiply 함수의 매개변수는 a와 b이며, 함수를 호출할 때 전달하는 값 2와 3이 인자입니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!