JavaScript - 매개변수와 인수 (About Parameter and Argument)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 매개변수와 인수에 대해서 알아보도록 하겠습니다.

이전 포스팅에서는 함수의 기본적인 작동원리, 즉 기초적인 사항에 대해서 알아보았습니다.

 

이제 함수를 구성하고 있는 구성요소 하나 하나에 접근하여, 이 함수에서 어떠한 구성요소가 있고, 어떠한 역활을 하는지,

실제 예제를 통해 알아보도록 하겠습니다.

 

============================

1. 매개변수와 인자 ?

2. 실제 작동예시 보기 

============================

 

1. 매개변수와 인자

매개변수는 단어 그대로는 Parameter,  하지만 수학에서 사용한 그 Parameter 와는 그 의미적 전달이 다소 다르다고 할 수 있습니다.

이 매개변수는 함수를 정의(선언) 하는 변수명을 의미합니다.

선언의 영역에서의 변수가 매개변수라면, 이제 함수를 "호출" 해야 실제 값을 우리가 가져올 수 있습니다.

여기서 함수 호출영역에서의 작성은 "전달인자", "인수", "인자" 라는 명칭으로 부릅니다. 

 

여기서는 "인자" 라는 단어로 설명해보도록 하죠.

 

먼저 ,아래의 예시를 보도록 하겠습니다.

 

function showMessage(Xie)

예시에서 나오는 이 간단한 구문은, function showMessage 라는 함수에 매개변수 Xie 를 선언한 것입니다.

즉, 구조도 상 Function 은 함수명, showMessage 는 변수명, Xie 는 매개변수로서의 선언을 의미하기도 합니다.

 

쉽게 설명하면 매개변수는 함수안에서 선언되는 "변수명" 이라고 이해하면 조금 더 쉽게 전달이 가능합니다.

작성예시를 하나 더 살펴보도록 하겠습니다.

function showMessage(Name){
	console.log("Hello World!")
}

showMessage()

위 예시 구문에서의 함수선언의 영역은 [function showMessage(Name){ } 입니다.

작성자는 함수의 변수명을 showMessage 로 선언했고, 매개변수를 Name 으로 부여했습니다.

그리고 그 함수안에서 console.log 에 "Hello World" 를 작성했습니다.

 

기본적인 구조에서 함수 - 변수명 (매개변수) 에서의 매개변수는 한가지만 넣는 것이 아니라 여러개도 작성할 수 있습니다.

만약 아래의 예시처럼 작성하면, 매개변수 목록이라는 이름으로 불리우기도 하죠. 왜냐면 하나의 함수에 매개변수를 여러개를 입력했기 때문이죠.

 

하지만 위 구문에서 매개변수와 달리 함수를 호출하는 영역인 "showMessage()" 는 인자값이 부여되지 않았으므로, 아무런 영향이 없습니다. 

 

function userb (name, lastName, firstName, age) {
    return {
        name : name,
        lastName : lastName,
        firstName : firstName,
        age : age
    }
}
    console.log('Hynn', 'Tistory' , 'Blog' , 1)

위의 규칙대로 적용해보자면, 1개의 함수에는 변수명이 선언이 되고, 매개변수가 부여됩니다.

이 매개변수는 상황에 따라 부여되지 않을 수도 있습니다.

하지만 예시 구문에서는 매개변수가 "name" , "lastName" , "firstName", "age" 의 매개변수가 지정되어 있습니다.

 

이를 위에서 언급한 매개변수 목록 ( Parameter List) 라고 합니다. 당연하게도 이 매개변수는 함수를 선언,정의 하는 영역에 위치하므로 호출할때마다 값이 바뀌지 않는 고정적인 친구들입니다. 

 

반면에, 함수를 호출하는 영역에서의 인자값은, 얼마든지 변경이 가능합니다. 각각의 인자들은 매개변수의 위치에 들어갈 값이므로, 만약 작성자가 다른 인자를 부여하면, 해당하는 인자가 출력되게 됩니다. 즉 위의 예시에서는 name 에 Hynn , lastName 에 Tistory firstName 에 Blog, age 에 1 이라는 인자를 부여했습니다.

 

그러면 실제 Console 에서는 아래와 같이 출력됩니다.

 

 

2. 실제 작동 예시 보기

선언의 영역에서의 변수가 매개변수라면, 이제 함수를 "호출" 해야 실제 값을 우리가 가져올 수 있습니다.

여기서 함수 호출영역에서의 작성은 "전달인자", "인수", "인자" 라는 명칭으로 부릅니다. 

 

여기서는 "인자" 라는 단어로 설명해보도록 하죠.

위에서 설명한 "매개변수" 가 정의 되었다면, 이제 실제 함수를 호출해보도록 하죠.

 

위에서 예시로 설명한 함수를 실제로 작동해보도록 하겠습니다.

 

function showMessage(name){
    console.log('Hello' + name)
}
showMessage('Hynn')

 

함수호출 예시1

 

위의 작성된 내용을 가지고 설명하면 아래와 같습니다.

먼저 function 함수에서 showMessage 변수명을 선언하고 매개변수로 name 을 부여했습니다.

그리고 함수 식 내에서 console.log 를 실행하고 그 안에는 'Hello' 와 + name 을 출력하도록 합니다.

 

그리고 이제, 함수 호출을 수행합니다.

showMessage('Hynn') 을 호출하면 , 여기서 Hynn 영역이 바로 인자입니댜.

 

따라서, 매개변수에 인자값을 부여하게 되고, 결과값은 HelloHynn 이 됩니다. 이는 여러개도 가능하다고 설명드린 바 있습니다.

 

그럼 쉽게 여러개를 부여해보도록 하겠습니다. 

function showMessage(name,age,mae){
    console.log('Hello' + name + mae + age)
    console.log(name + age)
    console.log(age)
}
showMessage('Hynn',132,1)

 

위의 예시 함수를 사용해서, 매개변수에는 name, age, mae 라는 임의의 명칭을 부여합니다.

그리고 함수호출 영역에서 인자를 각각 Hyun 이라는 String 문자, Number 숫자 2개를 부여했습니다.

 

따라서 Console 에서는 각각의 인자를 대입하여 값을 출력합니다. 

 

 

매개변수와 인자값은, 함수가 복잡해질 수록, 자신이 함수를 선언한 영역, 호출하는 영역에서의 쓰임새가 다르기 때문에,

반드시 이해가 필요하고 숙지가 필요한 항목일 수 밖에 없습니다.

 

다음 포스팅에서는 이제 본격적인 함수의 기능들을 다루고 설명하는 포스팅을 작성할 예정입니다.

다음 포스팅에서 뵙겠습니다.

 

감사합니다.