프로그램 언어/JavaScript

[J.S] 10. 함수 기능 확장하기

알케이88 2025. 8. 13. 16:38



10.1 매개 변수와 인수

함수는 어떤 작업을 수행시 외부에서 입력값을 받아 처리 할  수 있음.

함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 해주는 변수 : 매개변수(Parameter) 

정의한 함수를 실제로 호출할 때 소괄호 안에 넘겨주는 실제 데이터: 인수(Argument)

함수 호출시 전달 하는 데이터(인수)는 함수의 매개 변수에 자동으로 할당.

// 함수 선언문
function 함수이름(매개변수1, 매개변수2, 매개변수3, ..., 매개변수n) {
  // 함수 몸체
}

//함수 표현식
const 함수이름 = function 식별자(매개변수1, 매개변수2, 매개변수3, ..., 매개변수n) {
  // 함수 몸체
}

// 화살표 함수
const 함수이름 = (매개변수1, 매개변수2, 매개변수3, ..., 매개변수n) => {
  // 함수 몸체
}

//함수 호출
함수이름(매개변수1, 매개변수2, 매개변수3, ..., 매개변수n)

10.1.1 매개 변수란?

  • 함수를 정의 시 함수 이름 옆 소괄호() 안에 적는 변수의 이름
  • 함수가 실행 시 외부에서 들어올 값의 자리(변수)를 만듬
  • 함수 몸체 안에서 매개 변수를 사용해 입력값을 다룰 수 있음

형식

  1. 함수 정의 시 소괄호 안에 변수 이름을 쉼표로 구분하여 여러개 작성 가능
  2. 매개 변수는 변수 이름처럼 유요한 식별자 이어야 함
function 함수이름(매개변수1, 매개변수2, 매개변수3) {
  // 함수 몸체
}
function greet(name, age) {
  console.log(`${name}님은 ${age}세입니다.`);
}

name,age : 매개 변수

함수가 호출될 때 외부에서 name과 age 에 어떤 값이 들어올지 지정하는 역할

10.1.2 인수란?

  • 함수를 실제 호출시 소괄호 안에 넣는 값(데이터)
  • 매개변수는 일종의 이름, 인수는 그 이름에 들어가는 실제 데이터

형식

  1. 함수 호출시 소괄호 안에 실제값을 쉼표로 구분
  2. 인수는 변수, 리터럴, 표현식 등 다양한 형태가 가능
함수이름(인수1, 인수2, 인수3);
function greet(name, age) {
  console.log(`${name}님은 ${age}세입니다.`);
}

greet("홍길동", 25);           // 문자열과 숫자 리터럴
greet(userName, userAge);      // 변수
greet("홍길동", 20 + 5);       // 표현식

홍길동 : 인수

함수가 실행 되면 매개변수인 name 자리에 '홍길동' 이 할당되어 함수 몸체가 동작

 

10.1.3 매개 변수와 인수는 몇개까지 가능한가?

  • 자바스크립트 함수는 여러개의 매개 변수 정의 가능
  • 매개 변수와 인수의 갯수는 같아야 함
  • 갯수가 다르면 자바스크립트는 부족한 인수에는 undefined를 
  • 많은 인수는 무시 혹은 arguments 객제를 통해 접근 할 수 있음.
참고! argument 객체 
모든 함수 내부에는 arguments 라는 특별한 객체가 자동으로 생성
함수가 호출시 전달 받은 모든 인수(argument)를 담고 있은 묶음
배열처럼 인덱스 번호로 접근이 가능하나
엄밀히 말하면 배열은 아니고 배열 비슷한 객체
function printAll() {
  console.log(arguments);  // arguments 객체 전체 출력
  for(let i = 0; i < arguments.length; i++) {
    console.log(`arguments[${i}] = ${arguments[i]}`);
  }
}

printAll("사과", "바나나", "체리");

출력 결과
["사과", "바나나", "체리"]  // arguments 객체 (배열과 비슷함)
arguments[0] = 사과
arguments[1] = 바나나
arguments[2] = 체리

10.2 매개변수의 특징

주요 특징

  • 명명 규칙
  • 데이터 전달 방식
  • 기본값 할당 방법

10.2.1 명명 규칙

  • 자바스크립트 변수명 규칙을 따름
  • 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함 가능
  • 숫자로 시작, 예약어 사용 불가 (예: 1ex, 2ex for, if 등)
  • 여러 단어로 이루어질 경우 카멜 케이스 스타일 권장 (예: userName, totalPrice 등)
function calculateTotal(price, taxRate) {
  // ...
}

 

10.2.2 데이터 전달

  • 값에 의한 전달(pass-by-value) 방식을 사용 
    1. 원시 타입인 경우(primitive Type)인 경우
      • 숫자, 문자열, 불리언 등 원시값은 자체가 복사되우 함수로 전달
      • 함수 내부에서 매개 변수를 수정해도 원래 변수에는 영향이 없음
    2. 참조 타입(Reference Type)인 경우
      • 객체, 배열, 함수등 참조 타입은 메모리 주소(참조값)가 복사되어 전달
      • 함수 내부에서 매개 변수를 통해 원본 객체를 수정 가능
function changeValue(x) {
  x = 10;  // 매개 변수 x를 10으로 변경해도
}
 
let a = 5;
changeValue(a);  
console.log(a);  // 5  원래 변수 a는 그대로
 
//함수 내부의 x는 a의 복사본 일 뿐 원본과 별개

let myArr = [1, 2, 3];
changeArray(myArr);
console.log(myArr);  // [1, 2, 3, 4]  원본 배열이 변경됨
 
// arr변수는 배열 객체를 가르키는 '주소값'을 복사한 것
원본 배열을 직접 변경
pass by value란?
말 그대로 변수 안에 있는 값을 복사해서 함수로 전달 하는 방식
즉 원본 변수와 함수 내부 매개 변수는 서로 다른 저장 공간을 가짐
원본 변수 → 복사 → 함수 매개 변수
복사본을 쓰기 때문에 함수 내부에서도 바꿔도 원본에는 영향이 없음
실행순서
a 값 5가 x에 복사되어 들어감
함수 내부에서 x=10으로 바꿔도 a는 변함 없이 5
원본과 매개변수가 완전히 다른 메모리 공간

 

10.2.3 기본값 할당(Default Parameters)

앞에서 매개 변수를 정의 하고 데이터를 전달 하지 않으면 매개 변수는 undefined 값이 자동으로 할당됨

그러나 ES6에서 기본값을 지정하는 방식이 추가됨

  • 함수 매개변수에 기본값을 지정시
  • 함수 호출 시 인수가 없거나 undefined일 때 기본값이 적용
  • 기본 값은 매개 변수 선언 시 = 뒤에 작성
function greet(name = "손님") {
  console.log(`${name}님, 환영합니다!`);
}

greet("홍길동"); // 홍길동님, 환영합니다!
greet();         // 손님님, 환영합니다!

 

10.3 return 문

10.3.1 return 문이란?

return문은 함수의 실행 결과(반환값)를 함수 호출한 곳으로 돌려주는 명령어

  • return을 만나면 그 즉시 함수 실행이 종료.
  • return 뒤의 값은 함수 호출 위치로 반환.
  • 함수 외부로 데이터를 전달할 때 반드시 사용.
  • 반환값을 생략하면 undefined가 자동으로 반환.

10.3.2 기본 문법

function 함수이름(매개변수) {
  // 실행할 코드
  return 반환값;  // 반환값은 옵션
}
  • 반환값이 있으면 → 함수 호출한 곳에서 활용 가능
  • 반환값이 없으면 → undefined 반환
  • return 값을 사용하면 함수 외부에서 계산 결과를 활용 가능

10.3.3 동작방식

  1. 함수 호출 → 함수 내부 코드 실행 시작
  2. return 문 실행 시 → 즉시 함수 종료
  3. 반환값이 있으면 → 함수 호출한 위치로 반환됨
  4. 반환값이 없으면 → undefined 자동 반환

10.3.4 예제와 상황별 동작

1) return 없이 단순 실행

 function sum(num1, num2){
    let result = num1 + num2;
    console.log("inner : " + result)
 }
 
 sum(10, 20);       // inner : 30
  • 단순히 결과를 내부에서 출력
  • 외부에서는 result를 사용할 수 없음

2) 지역 변수 접근 시 오류

 

 function sum(num1, num2){
    let result = num1 + num2;
 }
 
 sum(10, 20);      
 console.log("outer : " + result) // ReferenceError: result is not defined
  • result는 함수 내부 지역 변수
  • 함수 종료 시 메모리에서 제거 → 외부에서 접근 불가

3) return을 사용하여 값 반

function sum(num1, num2){
   let result = num1 + num2;
   return result;
}

let out = sum(10, 20);       // 반환값을 외부 변수에 저장
console.log("out :" + out);  // 30
  • 내부 변수 result 값을 반환(return)
  • 반환값을 외부 변수 out에 저장하여 활용 가능

4) 변수 대신 계산식 바로 반환

function sum(num1, num2){
   return = num1 + num2;
}

const result = sum(10, 20);    
console.log("out :" + result);  

 

  • 꼭 변수를 반환할 필요 없음
  • 계산식을 바로 return 가능

 

5) return으로 함수 실행 중

function sum(num1, num2){
   if(typeof num1 !== "number" || typeof num2 !=="number"){
    return;
   }
   return num1 _ num2;
}

let result = sum("a", "b");    
console.log("out :" + result);  

 

  • 조건 불충족 시 즉시 종료
  • 값이 없으면 undefined 반환

 

정리

  • return은 함수 실행 종료 + 값 반환 역할을 함
  • 반환값이 없다면 자동으로 undefined
  • 외부에서 데이터를 쓰려면 반드시 반환값을 변수에 저장
  • 단순 실행 종료용으로도 활용 가능

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한 대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지합니다.)

'프로그램 언어 > JavaScript' 카테고리의 다른 글

[J.S] 9. 함수를 정의하는 방법  (6) 2025.08.13
[J.S] 8. 함수란?  (5) 2025.08.13
[J.S] 7. 반복문 다루기  (14) 2025.08.12
[J.S] 6. 조건문 다루기  (4) 2025.08.12
[J.S] 5. 연산자  (7) 2025.08.12

'프로그램 언어/JavaScript'의 다른글

  • 현재글[J.S] 10. 함수 기능 확장하기

관련글

티스토리툴바