코딩자율학습단 19기 | 13일차 학습일지 – 자바스크립트 함수 정의/호출, 매개변수·return

오늘 학습 정보

• 날짜/Day: 2026/01/28 (Day13)
• 교재 범위: ~10.3 함수 기능 확장하기 (종이책 p.391~405)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 함수 정의(선언문/표현식/화살표)
• 핵심 키워드 2: 매개변수·인수 & 기본값
• 핵심 키워드 3: return(반환/즉시 종료)

개념 정리

2-1) 함수란 무엇이고 왜 쓰나

역할: 특정 목적의 코드를 블록으로 묶어 필요할 때 호출해 재사용/유지보수성을 높임

핵심 포인트:

• 반복되는 로직(예: 구구단 출력)을 함수로 묶으면, 수정이 필요할 때 함수 하나만 고치면 됨

짧은 예시(코드):

function gugudan() {
   for (let i = 1; i <= 9; i++) console.log(`3 * ${i} = ${3 * i}`);
}
gugudan();

2-2) 함수 정의 방법 3가지(선언문/표현식/화살표)

역할: 같은 “함수”라도 작성(정의) 방식이 다름

핵심 포인트:

• 함수 선언문: function 함수명(){} 형태로 정의
• 함수 표현식: 함수를 값처럼 변수에 할당해서 정의(변수명으로 호출)
• 화살표 함수: ES6 문법. 주로 표현식 형태로 사용(익명 함수 기반)

짧은 예시(코드):

// 1) 함수 선언문
function add(a, b) { return a + b; }

// 2) 함수 표현식(익명/네이밍 가능)
const add2 = function(a, b) { return a + b; };

// 3) 화살표 함수
const add3 = (a, b) => a + b;

추가 포인트(헷갈리기 쉬운 부분):

• 함수 표현식에서 function 뒤의 식별자(네이밍 함수)를 “그 이름”으로 호출하면 안 되고, 할당한 변수명 으로 호출해야 함

짧은 예시(코드):

const gugudan = function naming() { /* ... */ };
gugudan(); // OK
naming(); // ReferenceError 발생 가능

2-3) 매개변수(parameter)와 인수(argument)로 함수 확장하기

역할: 함수가 호출될 때 외부 데이터를 받아 동작을 바꾸거나 일반화

핵심 포인트:

• 매개변수: 함수를 정의할 때 받는 변수
• 인수: 함수를 호출할 때 전달하는 값
• 전달 순서: 첫 번째 인수 → 첫 번째 매개변수, 두 번째 인수 → 두 번째 매개변수 … (1:1 대응)
• 인수를 전달하지 않으면 매개변수는 기본적으로 undefined가 될 수 있음
• 매개변수가 없어도 호출 자체는 가능하지만, 전달값을 “받아 쓸 변수”가 없어서 활용이 어려움

짧은 예시(코드):

function gugudan(dan) {
   for (let i = 1; i <= 9; i++) console.log(`${dan} * ${i} = ${dan * i}`);
}
gugudan(3);
gugudan(5);

2-4) 기본값(default parameter)과 return 문

역할: (1) 인수가 빠졌을 때도 안정적으로 동작하게 하고, (2) 함수 결과를 함수 밖으로 반환

핵심 포인트:

• 기본값 할당: 호출 시 인수를 생략하면 지정한 기본값이 들어가도록 설정
• return의 2가지 의미
  • 값을 반환: 함수 호출 결과로 값을 돌려줌
  • 즉시 종료: return만 쓰면 함수 실행을 멈추고 undefined 반환

짧은 예시(코드):

// 기본값
function sum(a = 10, b = 10) {
   console.log(a, b);
}
sum(); // 10 10

// return으로 값 반환
function add(a, b) {
   return a + b;
}
const result = add(10, 20);
console.log(result); // 30

// return으로 즉시 종료(조건 검사 등)
function addSafe(a, b) {
   if (typeof a !== "number" || typeof b !== "number") return;
   return a + b;
}

- 짧은 예시(코드) 화살표 함수에서 { }를 생략하면 “표현식 결과가 return”으로 처리되는 형태도 확인
const addArrow = (a, b) => a + b;

이슈 로그

• 함수 표현식에서 네이밍 함수 식별자 vs 변수명 호출 구분이 헷갈릴 수 있어서, “호출은 변수명으로 한다”를 체크해두었습니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」