[JavaScript] 매개 변수와 인수, 참조에 의한 전달

매개 변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(parameter)를 통해 인수(argument)를 전달한다.

 

인수는 값으로 평가될 수 있는 표현식이어야 한다. 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.

 

매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고, undefined로 초기화된 후 인수가 순서대로 할당된다. 매개변수는 함수 몸체 내부에서만 참조할 수 있고, 함수 몸체 외부에서는 참조할 수 없다. 

 

함수는 매개변수의 개수오아 인수의 개수가 일치하는지 체크하지 않는다. 매개변수보다 전달되는 인수가 많거나 적은 경우 에러가 발생하지 않는다. 인수가 모자라는 경우 인수가 할당되지 않은 매개변수의 값은 undefined가 되고, 인수가 더 많은 경우엔 초과된 인수는 무시되며, 다만 arguments 객체의 프로퍼티에는 포함된다.

function add(x, y) {
  return x + y;
}

console.log(x, y); // ReferenceError: x is not defined

console.log(add(2)); // NaN (2 + undefined의 결과)
console.log(add(1, 2, 3)); // 3 (1 + 2의 결과)

인수 확인

function add(x, y) {
  return x + y;
}
// 개발자의 의도: 두 개의 숫자를 더한 값을 반환하는 함수

console.log(add(2)); // NaN
console.log(add('a', 'b')); // 'ab'

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않으며, 동적 타입 언어이므로 매개 변수의 타입을 사전에 지정할 수 없다. 따라서 개발자의 의도와 다르게 함수에 적절하지 않은 인수가 들어와도 에러를 발생하지 않고 코드가 실행된다. 따라서 자바스크립트에서는 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.

함수 내부에서 인수 타입 확인하기

function add(x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
  }
  return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 합니다.

위와 같이 함수 내부에서 확인을 거친다 하더라도, 부적절한 호출을 사전에 방지할 수는 없다. 따라서 정적 타입을 선언할 수 있는 타입스크립트와 같은 언어를 도입하여 컴파일 시점에 부적절한 호출을 방지할 수 있도록 하는 것도 하나의 방법이다.

단축 평가를 사용한 기본값 할당

function add(a, b) {
  a = a || 0;
  b = b || 0;
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

 ES6에서 도입된 매개변수 기본값

매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우와 undefined를 전달한 경우에만 유효하다.

function add(a = 0, b = 0) {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

매개변수의 최대 개수

ECMAScript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지 않다. 다만, 물리적 한계에 의해 자바스크립트 엔진마다 제한은 있다.

 

매개변수는 순서에 의미가 있기 때문에, 매개변수가 많아지면 함수를 호출할 때 전달해야 할 인수의 순서를 고려해야 한다. 이는 함수를 사용하기 어렵게 하고 실수를 발생시킬 가능성을 높인다. 만약 매개변수의 개수나 순서를 변경하면 함수 호출 방법도 바뀌어 해당 함수를 사용하는 모든 코드가 영향을 받으므로 유지보수성이 나빠진다.

 

즉, 이상적인 매개변수는 0개이며 적을 수록 좋다. 매개 변수가 많다는 것은 함수가 여러가지 일을 한다는 뜻이기 때문에, 매개변수가 적을 수록 좋다는 것은 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다는 클린 코드 작성 원칙과도 일맥상통한다.

$.ajax({
  method: 'POST',
  url: '/user',
  data: { id: 1, name: 'Lee' },
  cache: false
});

위와 같이 객체를 인수로 사용할 경우, 매개 변수의 순서를 신경쓰지 않아도 되고 명시적으로 인수의 의미를 설명하는 프로퍼티 키를 사용하게 되어 가독성이 좋아지고 실수도 줄어드는 효과가 있다. 다만, 함수 내부로 전달된 객체를 변경하면 함수 외부의 객체가 변경되는 부수효과가 발생하므로 주의해야 한다.

 

반환문

함수는 return 키워드와 표현식으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다. 함수 호출은 표현식이라고 했는데, 함수 호출 표현식은 return 키워드가 반환한 표현식의 평가 결과인 반환값으로 평가된다.

 

반환문은 ①함수의 실행을 중단하고 함수 몸체를 빠져나가고, ②return 키워드 뒤에 오는 표현식을 평가해 반환한다. return 키워드 뒤에 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

function foo() {
  return;
  console.log('실행되지 않는다.');
}
console.log(foo()); // undefined

반환문을 생략할 경우, 함수는 함수 몸체의 마지막 문까지 실행한 후 암묵적으로 undefined를 반환한다. 

function foo () {}
console.log(foo()); // undefined

return 키워드와 반환값으로 사용할 표현식 사이에 줄바꿈이 있으면 세미콜론 자동 삽입 기능에 의해 세미콜론이 추가되어 의도치 않은 결과가 발생할 수 있다.

function multiply(x, y) {
  return // 세미콜론 자동 삽입 기능(ASI)에 의해 return 뒤에 세미콜론 삽입
  x * y;
}
console.log(multiply(3, 5)); // undefined

반환문은 함수 몸체 내부에서만 사용할 수 있으며, 전역에서 사용할 경우 Syntax Error가 발생한다. Node.js는 모듈 시스템에 의해 파일별로 독립적인 스코프를 갖기 때문에, Node.js 환경에서는 파일의 가장 바깥 영역에 반환문을 사용해도 에러가 발생하지 않는다.

function foo () {
    return;
}
foo();
return; //SyntaxError: Illegal return statement

 

참조에 의한 전달과 외부 상태의 변경

원시 값과 객체의 비교에서 살펴보았듯, 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다. 매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수의 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.

function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

var num = 100;
var person = {name: "Jung"};

changeVal(num, person); 
// num에 저장된 원시 값은 값 자체가 복사되고, person에 저장된 객체는 참조 값이 복사되어 전달된다. 

console.log(num); // 100 -> 원시 값은 원본이 훼손되지 않음
console.log(person); // {name: "Kim"} -> 객체는 원본이 훼손됨

원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 재할당을 통해 값을 변경해도 원본은 훼손되지 않는다. 즉, 부수 효과가 발생하지 않는다.

그러나 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다. 즉, 부수 효과가 발생한다.

 

이처럼 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워져, 코드의 복잡성을 증가시키고 가독성을 해치게 된다. 객체의 변경을 추적하기 위해서는 옵저버 패턴 등을 통해 객체를 참조하는 모든 이들에게 변경 사실을 통지하고 이에 대처하는 추가 대응이 필요하다.

이러한 문제의 해결 방법 중 하나는 객체를 불변 객체로 만들어 사용하는 것이다. 이 경우 객체의 복사본을 새롭게 생성하는 비용은 들지만, 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만들 수 있다.

외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라고 부른다. 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 프로그래밍 패러다임을 함수형 프로그래밍이라 한다.

 

옵저버 패턴(Observer Pattern)
디자인 패턴 중 하나로, 한 객체의 상태가 변경될 때, 그 상태를 의존하는 다른 객체들에게 자동으로 통지하고 업데이트하는 구조를 제공한다. 객체 간의 의존성을 최소화하면서 효율적으로 상태 변경을 관리할 수 있다.
주체(Subject)는 상태를 관리하고, 변경이 발생했을 때 옵저버들에게 통지하는 역할을 한다. 옵저버(Observer)는 주체의 상태를 관찰하는 객체로, 주체로부터 통지를 받으면 그에 따라 자신의 상태를 업데이트한다.
아래는 changeVal 함수를 바탕으로 만든 간단한 옵저버 패턴의 예시 코드이다. person이 상태를 가진 객체이고, addObserver를 통해 변경을 감지할 함수들을 등록한다. changeVal을 통해 person의 상태를 변경하면, notifyObservers가 호출되어 등록된 모든 옵저버를 실행한다.

const person = { name: 'Jung' }; // 상태를 가진 객체
const observers = []; // 변경을 감지할 옵저버들

// 옵저버 등록
function addObserver(observer) {
  observers.push(observer);
}

// 변경 통지
function notifyObservers() {
  observers.forEach(observer => observer(person));
}

// 객체 상태 변경 함수
function changeVal(obj) {
  obj.name = "Kim"; // 상태 변경
  notifyObservers(); // 변경 통지
}

// 옵저버 등록 (변경 시 실행될 함수)
addObserver((updatedPerson) => {
  console.log('Observer 1:', updatedPerson);
});
addObserver((updatedPerson) => {
  console.log('Observer 2:', updatedPerson);
});

// 상태 변경
changeVal(); 
// Output:
// Observer 1: { name: 'Kim' }
// Observer 2: { name: 'Kim' }

 

 

---

참고

 

모던 자바스크립트 Deep Dive

범용 애플리케이션 개발 언어로 성장했습니다. 따라서 자바스크립트를 학습하는 방식도 이에 걸맞게 변화해야 하며, 이 책은 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위해 기획되었습니다. 《모던 자바스크립트 Deep Dive》에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤칩니다. 따라서 여러분이 작성한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측하고

저자

이웅모

출판

위키북스

출판일

2020.09.25