[자바스크립트] 함수

함수

• 유사한 동작을 하는 코드가 여러 곳에서 필요할 때 함수를 사용한다.
• 함수는 어떤 코드를 캡슐화해서 실행을 여러 번 할 수 있게 해 준다.
• 함수를 실행시키는 것은 () 괄호이다. ()는 함수 실행 버튼이다.

 

 

함수 선언

함수 선언 방식

function 함수이름(복수의, 매개변수는, 콤마로, 구분) {
  /* 함수 본문 */
}

• 함수 내에서 선언한 지역 변수는 함수 안에서만 접근할 수 있다.
• 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다.(수정도 가능)
• 외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.

 

 

매개변수

• 매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다.
• 매개변수는 인수라고도 불린다.

function showMessage(from, text) { // 인수: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

• 매개변수에 값을 전달하지 않으면 기본 값은 undefined가 된다.
• 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 '기본값(default value)'을 설정하면 된다.
  • 설정 방법은 매개변수 오른쪽에 =을 붙이고 undefined 대신 설정하고자 하는 기본값을 작성해준다.

  function showMessage(from, text = "no text given") {
    alert( from + ": " + text );
  }
  
  showMessage("Ann"); // Ann: no text given

 

 

매개변수 기본값을 설정할 수 있는 또 다른 방법

• 함수가 실행되는 도중에 기본값을 설정하는 게 논리에 맞는 경우가 생기기도 한다.
• 이런 경우는 매개변수를 undefined와 비교하여 함수 호출 시 매개변수가 생략되었는지를 확인한다.

function showMessage(text) {
  if (text === undefined) {
    text = '빈 문자열';

    //if문 대신 논리 연산자 ||를 사용할 수 있다.
    //text = text || '빈 문자열';
  }

  alert(text);
}

showMessage(); // 빈 문자열

 

반환 값

return

• 함수 수행 결과를 받아야 된다.
• 함수는 나를 위해 무언가를 해주는 것이다.
• 함수로부터 결과 값을 얻기를 원하는 것이다.

 

🔔 사전 지식( confirm() )

• 확인 및 취소 버튼을 가진 대화창
• 반환 값으로는 true, false

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

• return문이 없거나 return지시자만 있는 함수는 undefined를 반환한다.
• return 지시자만 있는 경우도 undefined를 반환

 

 

함수 이름 짓기

• 함수의 이름은 대게 동사이다.
• 함수 이름만 보고 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.
• "show"로 시작하는 함수는 대개 무언가를 보여주는 함수
• "get…" : 값을 반환함
• "calc…" : 무언가를 계산함
• "create…" : 무언가를 생성함
• "check…" : 무언가를 확인하고 불린 값을 반환함

 

📌 참고

• 모던 JavaScript 튜토리얼