JavaScript 2.15

함수

• 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다.
• 함수는 프로그램을 구성하는 주요 구성요서이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출할 수 있다.

함수 선언

• 함수 선언(function declaration) 방식을 이요하면 함수를 만들 수 있다.
  • 함수 선언 방식은 함수 선언문이라고 부르기도 한다.

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

• Function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있다.
• 만약 매개변수가 있다면 각 매개변수를 콤마로 구분해준다.

function name(parameters) {
  ...함수 본문...
}

• 함수 이름 옆에 괄호를 붙이면 호출할 수 있다.

지역 변수

• 함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근할 수 있다.

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

  alert( message );
}

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

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

외부 변수

• 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있으며 수정도 가능하다.

// 접근
let userName = 'John';

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

showMessage(); // Hello, John

// 수정
let userName = 'John';

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

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

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

showMessage();

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

• 외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.
• 함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면 내부 변수는 외부 변수를 가린다.

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

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

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.

전역 변수

• 함수 외부에 선언된 변수는 전역 변수라고 부른다.
• 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있다.
• 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.

매개 변수

• 매개 변수를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다.
• 매개변수는 인수라고 불리기도 한다.
• 전역 변수가 있고 이 변수를 함수에 전달하였을 때 함수가 전역 변수를 변경하지만 변경 사항은 외부 변수에 반영되지 않는다.

function showMessage(from, text) {

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

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

let from = "Ann";

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

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

기본값

• 매개 변수에 값을 전달하지 않으면 그 값은 undefined가 된다.
• 값이 undefined가 되지 않게 하려면 기본값을 설정해주면 된다.
  • 매개변수 오른쪽에 =을 붙이고 undefined 대신 설정하고자 하는 기본값을 써준다.

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

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

• text가 값을 전달받지 못해도 기본값이 설정된다.

매개변수 기본값 평가 시점

• 자바 스크립트에선 함수를 호출할 때마다 매개변수 기본값을 평가한다.
• 해당하는 매개변수가 없을 때만 기본값을 평가한다.

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

• 함수 선언부에서 매개 변수 기본값을 설정하는 것 대신 함수가 실행되는 도중에 기본값을 설정할때도 있다.
• 매개 변수를 undefined와 비교하여 함수 호출 시 매개 변수가 생략되었는지를 확인한다.

반환 값

• 함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환하게 할 수 있다.
• 이 때 이 특정한 값을 반환 값이라고 한다.
• 지시자 return은 함수 내 어디서든 사용할 수 있고 실행 흐름이 지시자 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한다.
• 지시자 return만 명시하는 것도 가능하며 이런 경우 함수가 즉시 종료된다.

함수 이름짓기

• 함수 이름만 보고도 어떤 동작을 하는지 알 수 있어야 한다.
• 함수는 동작 하나만 담당한다.

함수==주석

• 함수를 간결하고, 한 가지 기능만 수행할 수 있게 만들면 함수가 주석의 역할을 할 수도 있다.