JavaScript Function

안녕하세요. 오늘은 자바스크립트 함수(Function)에 대해 알아볼게요.

 

 

 

자바스크립트 함수(Function)

 

함수는 특정 작업을 수행하거나 값을 계산하는 코드의 묶음이에요.

 

사용 목적은 코드의 재사용성과 프로그램의 모듈화 / 구조화, 그리고 이벤트 처리가 있어요.

function 함수명(매개변수) {
  // 수행할 코드
  return 반환값;
}

 

 

 

함수 선언 방식 

 

1. 함수 선언식(Function Declaration)

 

함수 선언식은 function 키워드 + 함수명을 얘기해요.

 

호이스팅이 적용돼서 선언 이전 호출이 가능해요.

greet(); // 가능

function greet() {
  console.log('안녕하세요! (함수 선언식)');
}

 

 

2. 함수 표현식(Function Expression)

 

함수 표현식은 변수에 익명 함수를 할당하고, 호이스팅 적용이 안돼요.

// greet2(); // ❌ 오류: 초기화 전 접근 불가

const greet2 = function() {
  console.log('안녕하세요! (함수 표현식)');
};

greet2(); // ✅

 

 

3. 화살표 함수(Arrow Function)

 

화살표 함수는 다른 선언 방식과 달리 function 대신 =>을 사용해요.

 

간결한 문법과 this 바인딩이 다르고, 항상 익명 함수를 사용해요.

const greet3 = () => {
  console.log('안녕하세요! (화살표 함수)');
};

greet3();

// 매개변수 1개 & 반환 1줄이라면 더 간단히
const greet4 = name => console.log(`안녕하세요, ${name}님!`);
greet4('홍길동');

 

 

 

 

매개변수(parameter)와 인자(argument)

 

매개변수는 함수 정의 시 입력값을 받기 위한 변수고,

 

인자는 함수 호출 시 실제로 전달하는 값이에요.

function add(a, b) {
  console.log(a + b);
}

add(3, 6); // 9
add(10);   // NaN (b가 undefined)

JS는 매개변수 개수와 인자 개수가 일치 않아도 되고, 전달되지 않는 인자는 undefined로 처리돼요.

 

 

 

반환값(return)

 

반환값은 함수 실행 결과를 반환으로, return 이후의 코드는 실행되지 않아요.

function subtract(a, b) {
  return a - b;
  console.log('이 코드는 실행되지 않음'); // 🚫
}

console.log(subtract(10, 7)); // 3

return이 없는 함수는 자동으로 undefined를 반환하게 돼요.

 

 

 

스코프(Scope, 변수의 유효 범위)

 

스코프는 지역 변수(Local)와 전역 변수(Global)로 구분하는데요.

 

지역 변수는 함수 내부에서만 접근 가능하고, 전역 변수는 파일 전체에서 접근이 가능해요.

let username = '홍길동'; // 전역 변수

function cgs() {
  let job = 'developer'; // 지역 변수
  console.log(`${username}'s job is ${job}`);
}

cgs(); // 정상 작동
// console.log(job); // ❌ ReferenceError

 

 

 

기본 매개변수(Default Parameters)

 

함수에 인자를 전달하지 않았을 때 사용할 기본값 지정이에요.

 

기본값이 있는 매개변수는 항상 뒤에 위치해야 해요.

function greet(name = '비회원 고객', age) {
  console.log(`안녕하세요, ${name}님! ${age}세 입니다.`);
}

greet('홍길동', 35); // ✅ 인자 전달
greet(29);           // name = 29, age = undefined (주의)


function greet2(age, name = '비회원 고객') {
  console.log(`안녕하세요, ${name}님! ${age}세 입니다.`);
}

greet2(34); // 안녕하세요, 비회원 고객님! 34세 입니다.

 

 

 

가변 매개변수(Rest Parameters)

 

가변 매개변수는 인자 개수가 유동적일 때, 모든 인자들을 배열로 받아요.

function spreadFunc(num1, num2, ...nums) {
  console.log(num1, num2);
  console.log(nums); // 나머지 인자들이 배열로 들어감
}

spreadFunc(1, 2, 3, 4, 5);
// 출력: 1 2 / [3, 4, 5]

// 예제 - 최소값 찾기
function findMin(...numbers) {
  let minNum = Math.min(...numbers);
  return minNum;
}

console.log(findMin(31, 23, 45, 66, 43, 32)); // 23

 

 

 

다음은 자바스크립트 함수의 요약표예요.

 

구분	키워드	특징	예시
함수 선언식	function	호이스팅 O	function sum(a,b){}
함수 표현식	const = function()	호이스팅 X	const sum = function(){}
화살표 함수	() => {}	간결, this 바인딩 다름	const sum = (a,b)=>a+b
기본 매개변수	param=value	인자 없을 때 기본값	function greet(name='Guest')
나머지 매개변수	...rest	가변 인자 배열화	function fn(...nums)

 

 

 

여기까지 자바스크립트 함수에 대해 알아봤는데요.

 

함수를 잘 사용한다면 코드 재사용성과 유지보스성이 높아질 것 같아요.