• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Functions] JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ Arguments (아규먼츠) 객체

JS 함수는 함수 매개변수 값 (= 독립변수 = 인자)를 체크 안 함.

 

 

매개변수 (parameter)

 

함수 정의할 때 ( ) 안에 독립변수를 받기 위해 미리 나열해 둔 변수.

 


 

function homzzang(a, b, c) {

  // 실행코드

}

 

 

독립변수 (argument) = 전달인자 = 인자

 

함수를 호출할 때 함수 안에 실제로 전달되는 값을 의미.

 


 

echo homzzang(1,2,3);

 

 

매개변수 규칙

 

1.

JS 함수 선언 시, 매개변수의 데이터타입을 지정 안 함.

2.

JS 함수는 전달된 독립변수의 데이터타입을 체크 안 함.

3.
JS 함수는 전달된 독립변수 개수를 체크 안 함.

 

  

매개변수 기본값

 

1.

JS 함수 선언 시 선언된 매개변수 개수보다 적은 수의 독립변수가 전달된 경우,

독립변수가 누락된 매개변수는 undefined 상태가 됨.

 

2.

가끔 괜찮기도 하지만, 되도록이면 매개변수 기본값을 설정하는 게 바람직함.


ECMAScript 2015 이후

 

<p id="demo"></p>


<script>

function homzzang(x=3, y=0) {

  return x * y;

}

document.getElementById("demo").innerHTML = homzzang(3);

</script>

 

결과보기


EScript 2015 전

 

<p id="demo"></p>


<script>

function homzzang(x, y) {

  if (y === undefined) {

    y = 0;

  }  

  return x * y;

}

document.getElementById("demo").innerHTML = homzzang(3);

</script>

 

 

결과보기

 

Arguments 객체

 

1.

JS 함수엔 Arguments 라고 하는 내장 객체 존재.

 

2.

Arguments 객체는 함수 호출 시 전달 된 독립변수를 배열 형태로 갖음.

 

3.

Arguments 객체 활용해 함수 호출 시 전달된 독립변수의 크기 비교 가능.
(예) 값이 가장 큰 독립변수, 값이 가장 작은 독립변수, 독립변수의 평균 등.

 

4.
JS 함수 선언 시 선언된 매개변수 개수보다 훨씬 많은 수의 독립변수 받을 시,
arguments 라는 객체를 활용해 받을 수 있음.  (아래 예제들 참고)

 


독립변수의 최고값 구하기

 

<p id="demo"></p>


<script>

function homzzang() {

  var i;

  var max = -Infinity;

  for(i = 0; i < arguments.length; i++) {

    if (arguments[i] > max) {

      max = arguments[i];

    }

  }

  return max;

document.getElementById("demo").innerHTML = homzzang(3, 4, 5);

</script>

 

결과보기


독립변수 합계 구하기

 

<p id="demo"></p>


<script>

function homzzang() {

  var i;

  var sum = 0;

  for(i = 0; i < arguments.length; i++) {

    sum += arguments[i];

  }

  return sum;

}

document.getElementById("demo").innerHTML = homzzang(3,4,5);

</script>

 

결과보기

관련글 https://homzzang.com/b/tag-1143

 

 

※ 독립변수는 값에 의해 전달

 

1.

독립변수는 함수 호출 시 함수로 전달된 값을 말하며,

JS 함수는 독립변수의 위치가 아니라 값을 인식할 뿐임.


2.

함수가 독립변수 변경해도, 매개변수 원래값은 불변.

 

3.

독립변수 변경은 함수 외부에 표시 (반영)되지 않음.

 

 

※ 객체는 참조로 전달

 

1.

JS에서 객체 참조는 값(value)이라서, 

객체는 참조(reference)로 전달되는 것처럼 동작.

 

2.

함수가 객체 속성 변경하면 객체 원래 값이 변경됨.

 

3.

객체 속성에 대한 변경 사항은 함수 외부에 표시(반영)됨.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012