[JavaScript] 함수 - Function

함수는 프로그램을 구성하는 주요 '구성요소 (building block)'입니다.

 

함수 선언

함수 선언 (function declaration) 방식을 이용하면 함수를 만들 수 있다. 

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage();

펑션 키워드, 함수이름, 괄호 안 매개변수(parameter) 써주면 선언할 수 있고

이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'를 중괄호로 감싸 붙여준다

 

함수이름 옆 괄호를 붙여 호출하기.

지역 변수

함수 내에서 선언한 변수인 지역 변수 (local variable)는 함수 안에서만 접근할 수 있습니다.

예시:

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

외부 변수

반대로 함수 내부에서는 외부에서 선언한 변수인 외부 변수(outer variable)에 접근 가능과 수정도 가능

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

하지만 만약 외부에서 선언한 변수를 내부에서 동일하게 만들었다면

외부에서  만든 변수를 가려버려서 내부에서 만든 변수만 쓸 수 있음

 

전역변수

위 userName 처럼 함수 외부에서 선언된 변수를 전역변수(global variable)라고 부름

전역 변수는 지역 변수에 의해 가려지지 않는다면 모든 함수에서 접근 가능.

변수는 연관되는 함수 내에 선언하고, 전역 변수는 최소화하고 되도록 사용하지 않는 것이 좋다. 

 

매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 전달 가능. (인수라고도 불림 argument 엄밀히 말해서 같지는 않음)

 

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

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

함수를 호출하면 전달된 인자는 지역변수 from과 text에 복사됨. 복사!!

그 후로 지역변수는 이 복사된 값을 사용

 

하지만 이 전달된 인자를 함수가 변경한다 해도 외부 변수 from에 영향을 미치지 않음

from은 언제나 복사된 값을 사용하기에

function showMessage(from, text) {

  from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // Ann

기본값

정의한 함수의 매개변수가 두개인데 하나만 부르는 경우 에러가 생기진 않음.

그러나 할당되지 않은 매개변수는 undefined가 할당된다.

 

갑이 전달되지 않아도 디폴트 값을 주고싶다면 기본값(default value)을 설정해주면 됨

기본값에는 함수도 기본 값으로 넣어줄 수 있음

function showMessage(from, text = "no text given") { //*  이 라인처럼
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

function showMeYourMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

반환 값(return value)

함수를 호출했을 때, 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있습니다.

 

지시자 return은 함수 내 어디서든 사용할 수 있습니다. 실행 중 리턴을 만나면 함수 실행은

즉시 중단되고 함수를 호출한 곳에 값을 반환 

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

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

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

 

return만 명시해서 함수가 종료되게 할 수도 있음

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "영화 상영" ); // (*)
  // ...
}

return문이 없거나 return지시자만 있는 함수는 undefined를 반환

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

function doSomething() {
  return;
}

alert( doSomething() === undefined ); // true

주의

리턴 값이 긴 표현식인 경우 새 줄을 넣어 코드를 작성하면 안됨

왜냐면 return문 끝에 세미콜론을 자동으로 넣기에 이렇게 return문을 작성하면 안됩니다.

return;
 (some + long + expression + or + whatever * f(a) + f(b))

대신에 이렇게 해주면 잘 작동이 된다

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

함수 이름짓기

함수는 동작을 수행하기 위한 코드를 모아놓은 것이라서

대개 이름은 동사로 짓는다. 간결하고 명확해야하며 어떤 동작을 하는지도 설명 가능해야함

함수는 대개 동작 하나만 담당해야함.

그 이외의 동작은 수행해선 안되는게 좋음

예시로

• getAge 함수는 나이를 얻어오는 동작만 수행해야하는데
  alert창에 나이를 출력해주는 동작은 이 함수에 들어가지 않는게 좋음
• checkPermission 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야함
  승인 여부를 보여주는 메세지를 띄우는 동작은 안들어가는게 좋음