-
자바스크립트 함수와 매개변수, 인수프론트엔드/JavaScript 2020. 9. 10. 02:09
매개변수의 타입
자바 스크립트에서 함수를 정의할 때 매개 변수의 타입은 따로 명시하지 않는다.
어차피 변수 자체도 타입을 명시하지 않기 때문에 전달되는 파라미터 값도 데이터를 가려받진 않는다.
다만 그와 별개로 함수에서 처리가 되지 않는 값을 줬을 경우 함수 내부에서 처리가 불가능해서
오류가 난다.
자바 스크립트의 인수(argument)
<body> <script> function test(x,y,z){ return z; } console.log(test(3,4)); // undefined 출력 </script> </body>자바 스크립트에선 매개 변수로 전달되는 인수가 기본 자료형(primitive)일 경우에는 기본 자료형 데이터가 바로 전달되고, 기본 자료형 이외의 객체가 전달될 경우는 객체의 참조값이 전달된다.
추가로 인수의 경우 다른 언어와 달리 원하는 숫자보다 적게 전달되더라도 오류가 나지 않는다.
그저 인수가 배정되지 않는 매개변수는 'undefined'값을 갖게 될 뿐이다.
위와 같이 x,y,z 세 개의 매개변수를 가질 때 2개의 값만 넣으면 인수가 없는 매개변수 z의 값은 'undefined'로 반환된다.
자바 스크립트의 인수(argument) 디폴트값 지정
<script> const log = console.log; function test(x, y = "값없음"){ console.log(x, y); } test(7); // 7 "값없음" 출력 test(7, 7); // 7 7 출력 </script>자바 스크립트는 위에서 말한대로 함수에서 매개변수의 숫자만큼 인수를 넣지 않아도 오류가 나지 않는다.
대신 'undifiend'가 뜨는데 이것 대신 대체할 디폴트 값을 지정할 수 있다.
위와 같이 '매개변수' + '=' + '디폴트값' 형식으로 지정해주면 된다.
이후에는 해당 인수가 입력되지 않아도 디폴트값이 대신 함수로 전달된다.
매개변수 여러개 받기
함수를 작성하다보면 매개 변수를 여러개 한 번에 받을 상황이 올 수도 있다.
이때를 아래와 같이 함수를 작성하면 된다.
<body> <script> function test(x,y,...z){ console.log(x); // 3출력 console.log(y); // 4출력 console.log(z); // [5,6]출력 } test(3,4,5,6); </script> </body>매개변수가 들어가는 자리에 (,...)을 넣어주면 원하는 만큼 인자를 받을 수 있다.
이때 알아두면 좋은게 인자가 저장되는 방식이다.
위 함수에서 'x,y,...z'와 같이 값을 매개변수로 'x'와 'y'와 'z'만 지정했다.
그런데 보통 변수 1개에는 1개의 인자만 전달된다.
그래서 입력한 인자 순서대로 'x'는 3, 'y'는 4가 저장된다.
그리고 최종적으로 'z'에는 두 개의 숫자가 들어가야 하므로 배열의 형태인 [5,6]의 형태로 저장이 된다.
인수를 배열로 받기
<body> <script> function test(...args){ console.log(args); } test(7,7,7,7); // [7,7,7,7] 형식으로 함수에 저장됨. </script> </body>인수를 받다보면 배열의 형태로 받고 싶은 경우도 있다.
이럴 때는 파라미터 창에 다음과 같이 입력하면 된다.
function 함수명 ( ...args) { 함수 실행부 }
파라미터 창 안에다가 점 세개 ( ... )를 찍으면 된다.
(참고로 args는 그냥 임의로 지정한 텍스트라 수정 가능하다.)
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바 스크립트의 클래스(class)와 객체(Object) 활용 (0) 2020.09.11 자바와 자바스크립트 클래스와 오브젝트 (0) 2020.09.11 자바스크립트의 함수(function) (0) 2020.09.10 자바스크립트의 배열(Array) (0) 2020.09.10 for...of / for...in 에 대해서 (0) 2020.09.09