기본 15. 함수

: 프로그램을 구성하는 주요 '구성요소'

: 코드 중복 제거

 

내장함수 : alert, promt, confirm 등

 

함수 선언

1) 함수 선언문

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

 

2) 함수 표현식 (아래 링크 및 다음 게시물)

3) 화살표 함수 (참고)

https://kekehome.tistory.com/28

4주차 map과 express, 함수의 형태

 

예시

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

showMessage();
showMessage();

• 메세지를 두 번 호출하고 싶을 때, 위 코드와 같이 함수를 선언해 중복을 피함

 

---

지역 변수 : 함수 내부에 선언한 변수는 함수 내부에서만 사용 가능!

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

  alert( message );
}

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

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

• 함수 내부에서 선언한 message 변수를 외부에서 사용하면 에러

 

외부 변수 (전역 변수) : 함수 외부에서 선언한 변수를 내부에서 그냥 사용 가능

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

let userName = 'John';	//함수 아래에 변수를 선언해도 잘 실행됨

showMessage(); // Hello, John
//단 함수 사용 아래에 userName을 선언하면 아무것도 뜨지 않음

• 외부 변수의 경우 함수 '사용'  이전에만 사용되면 코드가 잘 실행됨

 - 함수 내부에서 수정 가능

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

• 매개변수 : from, text
  • 외부 변수와 이름이 같은 매개변수이지만, 외부의 변수에 영향 주지 않음 / 전달된 데이터는 복사된 값일 뿐
• 인수 :  from, "Hello"

---

기본값

: 매개변수에 인수를 전달하지 않는 경우 undefined처리

 

매개변수에 값을 꼭 전달하고 싶지 않을 때 사용함

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

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

• 첫번째 매개변수에만 전달했지만, 기본값을 넣어줘 undefined가 출력되지 않음

위 코드에서 

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

와 같이 undefined 자료형을 전달해도 기본값이 설정돼 있으면, 기본값이 출력됨

 

---

반환 값

: 함수가 특정값을 반환할 수 있음 / return 지시자 이용

 

더하기 함수를 이용해 결과를 반환

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

• return a + b 로 결과를 반환해 result 변수에게 할당

return만 명시하는 경우

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

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

• 함수 즉시 종료

return이 없거나 / return만 있는 경우 --> 그 함수는 undefined 반환

function doNothing() { /* empty */ }

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

function doNothing() {
  return;
}

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

 

 

---

함수 이름

: 접두어 붙이기

 

접두어

• show : 무언가를 보여줌
• get : 값을 반환함
• calc : 무언가를 계산함
• create : 무언가를 생성함
• check : 무언가를 확인 후 불린값 반환함

showMessage(..)     // 메시지를 보여줌
getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..)         // 합계를 계산하고 그 결과를 반환함
createForm(..)      // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

 

 

 

 

---

참고 문서