Search

반응형

'매개변수'에 해당되는 글 2건

  1. 2022.09.25 [자바스크립트]함수 이야기 8탄, 매개변수(parameters)와 인수(arguments) 1
  2. 2022.07.24 [자바스크립트]함수 이야기 2탄 - 매개변수(인수) 값 전달, 참조 전달
반응형

여러분이 함수를 사용하려면 매개변수와 인수를 알아야 합니다.

매개변수(parameters, 파라미터), 인수(arguments, 아규먼트)의 의미 먼저 이해해 봅니다.

매개변수(파라미터)는 함수를 만들 때 어떤 값을 입력받을지 정하는 변수라 할 수 있습니다.

괄호() 안에 매개변수 이름을 지정해서 사용하면 됩니다.

1
2
3
function myFunc(a, b) {
    return a + b;
}
cs

myFunc는 함수 이름이고 괄호 안의 a, b가 매개변수가 됩니다.

인수(arguments)는 이렇게 함수를 정의할 때 선언한 a, b에 함수를 호출하면서 입력할 실제 값을 의미합니다.

myFunc(5, 6);

매개변수 a, b에 5, 6 값을 넣은 후 호출했습니다.

이때 5, 6이 인수입니다.

 

인수 사용하는 방법

인수는 객체입니다. 그리고 배열처럼 [i]를 붙여서 값을 가져올 수 있습니다.

함수를 호출할 때 설정된 매개변수로 인수를 전달하면 함수 내부에서 해당 인수 객체를

배열처럼 사용해서 값을 사용할 수 있습니다.

객체 이름은 arguments입니다.

arguments[i]; 

이렇게 함수 내에서 사용할 수 있습니다.

첫 번째 인수를 받으려면 arguments[0]로 i는 배열처럼 0으로 시작합니다.

중요한 점은 배열처럼이라는 표현을 썼는데요. 그 의미는 배열과 같은 객체는 아니라는 의미입니다.

사용법이 비슷해서 배열처럼이라는 표현을 사용하고 있습니다.

인수가 총 몇개인지 확인할 때 사용하는 속성은 length입니다.

var len = arguments.length;

1
2
3
4
5
6
7
function test(){
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
 
test(12345);
cs

잠깐!

이 코드는 좀 이상합니다.

test() 함수는 매개변수가 1개도 선언이 되지 않았지만 7번 라인을 보면 1,2,3,4,5를 인수로 넘기고 있습니다.

보통 자바라면 오류가 발생했겠지만,

자바스크립트는 아무렇지도 않게 받아 줍니다.

그리고 해당 값은 선언된 매개변수가 없기에 사용할 수 없지만

arguments[]를 사용해서 순서대로 값을 꺼내서 사용할 수 있게 됩니다.

정말 황당하네요. ^^

매개변수가 정해졌지만 인수를 설정하지 않는다면 해당 매개변수는 함수 내에서 변수와 마찬가지로 undefined가 할당됩니다.

1
2
3
4
5
6
function test(a, b){
    console.log(a);
    console.log(b);
 
}
test(1);
cs

위 예제는 b 매개변수에 값을 넣지 않고 6번 라인처럼 호출을 한다면 undefined가 출력됩니다.

다르게 생각해 본다면 매개변수가 만들어지면 기본으로 undefined가 할당되어 있다고 생각하면 됩니다.

만약 b 값에 무조건 인수가 할당되어야 하고 undefined가 안되어한다면 기본값으로 설정할 수 있습니다.

test(a, b = 0)

이처럼 b 값이 필수여야 하며 기본(디폴트)으로 값이 무조건 있어야 한다면

그래서 사용자가 호출할 때 누락했다면 기본으로 0을 할당하는 방법으로 선언할 때 사용하면 됩니다.

 

나머지 매개변수 사용하는 방법

1
2
3
4
5
6
7
function test(a, ... others){
    console.log(a);
    console.log(others[0]);
    console.log(others[1]);
}
 
test('a'12);
cs

마지막으로 나머지 매개변수를 사용하는 방법을 알아봅니다.

위 예제를 보면... 뒤에 매개변수를 사용했습니다.

정해지지 않은 수만큼 인수를 받아야 하는 경우 위 예제처럼 점 3개를 사용하고 매개변수를 사용하면 됩니다.

해당 매개변수는 함수 내에서 배열로 사용할 수 있습니다.

자바스크립트는 정말 유연한 프로그램입니다.

그렇기에 더 자세히 살펴보면서 충분히 이해하고 사용한다면

다양한 기능을 사용할 수 있을 겁니다.

또한 자바스크립트를 깊이 공부하면서 다른 프로그램 언어 또한 깊이가 더해지는 느낌이 든답니다.

하나를 하더라도 제대로 전문가가 되어야 한다는 마음으로

열심히 읽고 코딩하면서 실력을 키워나가 봅니다.

반응형
반응형

함수를 정의하는 방법 2가지에 대해 이전 포스팅에서 알아봤습니다.

함수 선언과 함수 표현식이 있었는데요.

함수를 만들 때 매개변수(파라미터)에 대한 이야기를 더 해볼까 합니다.

 

값과 참조

자바스크립트 외 다른 언어에서도 들어봤을 내용일 텐데요.

값의 전달 그리고 참조에 의한 전달에 관한 이야기입니다.

매개변수에 값을 그냥 전달하면 될 거 같은데

값의 전달은 뭐고, 참조에 의한 전달은 어떤 의미일까요?

예제를 통해 쉽게 접근해보겠습니다.

 

매개변수에 값을 전달.

하얀 A4용지가 있습니다.

정보를 담기 위해 1장을 가져옵니다.

다른 종이와 혼동되지 않기 위에 상단에 이름을 적습니다. (var name)

이 종이는 name이라는 이름이 지정되었고

아직 어떤 내용도 담기지 않았습니다. (undefined)

이제 종이에 "홍길동"이라고 적습니다. (name = "홍길동")

변수가 선언 및 할당되었습니다. (var name = "홍길동";)

 

이제 이 name을 함수로 전달해보겠습니다.

자바스크립트는 **중요** 기본 자료형은 매개변수로 값으로 전달됩니다.

무슨 의미일까요?

name이라는 변수는 기본 자료형인 String입니다.

그래서 값으로 전달해야 합니다.

전역에 선언된 name과 연관 짓지 않고 따로 다른 종이에 복사해서

값이 복사된 종이를 건네게 됩니다.

이 방식이 값을 전달한다는 의미입니다.

그래서 함수는 복사된 값(종이)을 받았기에

내부에서 값을 바꾸더라도 복사한 종이이기에

밖에 원본 종이의 값은 바뀌지 않습니다.

함수 내부에서만 복사된 종이의 값을 변경하고 버리기 때문이지요.

다음 예를 통해 확인해볼게요.

1
2
3
4
5
6
7
8
9
10
11
12
  function chg(a) {
          a = '123';
              
      return a;
  }
  
  
  var a = 'abc';
  
  console.log(a);
  console.log(chg(a));
  console.log(a);
cs

함수 내부에서 전역(또는 함수 밖에서) 선언된 

기본 자료형 변수를 매개변수로 받으면 함수 내부에서만

수정이 되고 함수 범위를 나오면 다시 

원래 데이터를 유지하는 것을 확인할 수 있습니다.

이것이 바로 값을 전달한다는 의미입니다. 

 

참조에 의한 전달.

그렇다면~

참조에 의한 전달은 어떤 의미일까요?

언어적으로 해석해 보면 참조만 한다는 건데...

다시 종이 이야기로 가봅니다.

이번에는 기본적인 종이가 아닌 종이 묶음이 필요합니다.

일반적으로 책이나 노트 등을 종이 묶음으로  볼 수 있는데요.

자바스크립트에서는 배열이나 객체 등으로  생각해 볼 수 있겠네요.

이렇게 종이 묶음은 복사해서 전달하기에는 양이 많습니다.

그래서 종이 묶음 목차만 건네준다고 상상해볼게요.

함수는 실제 복사본 데이터도 아니고 목차만 받았습니다.

어디에 그 값이 있다는 정보입니다.

그래서 함수 내부에서 해당 종이 묶음 중 어떤 목차 부분의 값을 수정했습니다.

그렇다면 복사본 종이도 받지 않았는데 값은 어떻게 변경되어야 할까요?

해당 위치(메모리)에 있는 함수 밖 종이 묶음의 값을 수정합니다.

그 위치는 메모리의 위치(주소)로 생각하면 됩니다.

즉 배열 또는 객체 같은 데이터를 매개변수(인자) 값으로 받으면

해당 정보의 위치정보를 가지고

실제 원본의 값을 수정하게 된다는 의미가

참조에 의한 전달입니다.

다음 예를 통해 확인해 볼게요.

1
2
3
4
5
6
7
8
9
10
11
  function chg(obj) {
      obj.name = 'KOREA';
  }
  
  var obj = {id : "001"name : "USA"};
  
  console.log(obj.name);
  
  chg(obj);
  
  console.log(obj.name);
cs

USA였던 값이 함수를 호출하고 난 뒤

전역 객체인데도 KOREA로 변경되었습니다.

이런 방식을 참조에 의한 전달이라고 합니다.

이제 값과 참조에 의한 전달이 이해되셨나요?

값에 의한 전달이라도 this를 사용하면

전역 값을 변경할 수 있습니다.

this는 전역 변수를 가리키고 있거든요.

다음 예처럼요.

1
2
3
4
5
6
7
8
9
10
11
  function chg(obj) {
      obj.name = 'KOREA';
  }
  
  var obj = {id : "001"name : "USA"};
  
  console.log(obj.name);
  
  chg(obj);
  
  console.log(obj.name);
cs

결과는 첫 예제와 다르게

값이 바뀌는 것을 확인할 수 있답니다.

 

지금까지 함수 매개변수로 값에 의한 전달과 참조에 의한 전달에 대해

예제를 통해 살펴봤습니다.

즐 코딩하세요.

 

반응형