[자바스크립트 ] 아규먼트 vs 파라미터(Argument vs Parameter)

작업을 하는 도중에 항상 헷갈리는 워딩이 있다

그것은 바로 argument 와 parameter 이다 

 

정의를 살펴보면 이러하다 

1. 파라미터(Paramter) From MDN

파라미터는 함수내부에서 사용되는 변수명이고, 이 변수들은 arguments를 함수안으로 불러오기(import) 위해 사용한다

A parameter is a named variable passed into a function. Parameter variables are used to import arguments into functions.

 

function example01(parameter) {
  console.log(parameter); // Output = foo
}

function example02(anything) {
  console.log(anything); // Output = foo
}

const argument = "foo";

example01(argument);
example02(argument);
example02('foo');

위 코드처럼 함수안에서 사용하기 위한 변수로, 원하는 명칭(parameter, anything)뿐만 아니라 아무 변수명이나 사용할 수 있다

 

2. 아규먼트(Argument) From MDN

아규먼트는 함수 호출 시 들어가는 실제 value(primitive or object)이다

An argument is a value (primitive or object) passed as input to a function.

위에서 argument라는 변수에 'foo' 를 할당한 후 example(argument) 를 호출하거나 example02('foo')로 바로 값을 대입하기도 하는데 이떄 이것을 아규먼트(argument) 라고 부른다

 

 

인자를 전달하는 방법 ???  값, 참조값(by value vs by reference)

const thomas = {
  name: 'Thomas Shelby',
  passport: 'KA38274'
}

const checkIn = function(passenger) {

  passenger.name = 'Mr. ' + passenger.name;
  
  if (passenger.passport === 'KA38274') {
    console.log(`${passenger.name} Checked in`);
  } else {
    console.log('Wrong passport!');
  }
}

checkIn(thomas);
console.log(thomas)

위의 내용에서 checkIn 함수를 실행 시 인자로 thomas 라는 객체 변수의 참조값을 전달하고 있다

checkIn함수가 실행되고나서 console.log(thomas)의 출력값이 어떻게 나올지 예생해봐라

 

 

 

 

출력값은 아래와 같다

{ name: 'Mr. Thomas Shelby', passport: 'KA38274' }

 

이처럼 checkIn 함수에서 위 처럼 수정할 경우에 기존에 있던 데이터 속성에 영향을 미치는 것을 볼 수 있다

데이터 조작을 의도한 경우라면 문제가 안 되겠지만 기존 데이터에는 영향을 미치지 않고 checkIn 함수를 실행하고 싶은 경우에는 다음과 같이 하면 된다

 

const thomas = {
  name: 'Thomas Shelby',
  passport: 'KA38274'
}

const checkIn = function(passenger) {

  const name = 'Mr. ' + passenger.name;
  
  if (passenger.passport === 'KA38274') {
    console.log(`${name} Checked in`);
  } else {
    console.log('Wrong passport!');
  }
}

checkIn(thomas);
console.log(thomas)

const name 변수에  parameter 데이터를  할당하여 사용해주면 해결된다

 

그러면 console.log() 출력시 기존 데이터 영향을 미치지 않는 것을 볼 수 있다

{ name: 'Thomas Shelby', passport: 'KA38274' }