파트 1 - 자바스크립트 기본 - 15) 함수

Lee·2021년 10월 5일

모던 자바스크립트 튜토리얼 정복하기

목록 보기

14/43

함수 파트 링크 : https://ko.javascript.info/function-basics

함수 선언

<script>
  function 함수 (parameter) {
      ...함수본문(=body)...
  }
</script>

함수의 주요 용도중 하나는 중복 코드 피하기이다.

변수는 연관되는 함수내에 선언, 전역 변수는 되도록 사용하지 않는 것이 좋다. 다만, 프로젝트 전반에 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있다.

매개 변수

인수(argument)라고도 한다.
인수로 전달된 값들은 그 값을 그대로 사용하는 것이 아니라 값을 복사하여 복사된 값을 사용한다.
따라서 함수 내에서 인수의 값을 바꾸더라도 외부에 선언된 원래의 변수 값은 변함이 없다.
ex)

<script>
  function showMessage(from, text) {
    from = '*' + from + '*'; //전역변수 from의 값을 가져와 사용.
    //여기서 제일 앞의 from은 전역변수 from을 의미하는 것이 아니라 전역변수 from의 값을 복사해서 갖고 있는 인수 from을 의미한다.
    alert(from + ":" + text);
  }
  let from = "Ann";
  showMessage(from, "Hello"); // *Ann*:Hello
  alert(from); //Ann => 함수는 전역변수에 복사된 값을 사용하기 때문에 전역 변수 from의 값에는 영향을 안 미친다.
</script>

기본값

매개변수에 아무런 값도 주지 않으면 undefined 가 들어간다.
ex) 인수를 2개 받는 함수에 인수 한 개 값만 넣으면 나머지 인수 하나는 undefined가 된다.
이렇게 값이 인수에 전달되지 않더라도 해당 인수가 undefined가 되는 것을 방지하려면 아래 예시처럼 인수에 기본값을 할당하면 된다.

<script>
  function 함수 (인수1, 인수2='기본값') { 
      본문 
  };
</script>

함수 호출시 인수 2에 어떤 값을 넣어주면 그 넣어준 값이 적용되고 넣어주는 값이 없으면 인수2에 할당된 기본값이 적용된다.

위와같은 방법 외에도

<script>
//1
function 함수 (인수) {
  if(인수 === undefined) {
      인수 = '값';
  }
}

//2
function 함수 (인수) {
  인수 = 인수 || '값';
}

//3
//0은 인수에 들어와도 값으로 인정하되 undefined나 null일 경우(인수가 없을 경우) 'unknown'을 반환하는 코드
function 함수 (인수) {
  alert(인수 ?? 'unknown');
}
</script>