[JAVA SCRIPT] 함수

1. 함수

함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.

 

alert(message), prompt(message, default), confirm(question)은 대표적인 내장 함수이다.

 

 

 

 

2. 함수 선언

방법

function showMessage() {

  alert("안녕하세요!");

}

 

문법

function name(parameters) {

  //함수 본문

}

 

 

 

 

2. 지역 변수

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

 

예시

function showMessage() {

  let message = "안녕하세요!";    //지역 변수

 

  alert(message);

}

 

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

 

alert(message);    //오류

 

 

 

 

3. 외부 변수

(1) 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다.

 

예시

let userName = "John;    //외부 변수

 

function showMessage() {

    let message = "Hello, " + "userName";

    alert(message);

}

 

showMessage();    //Hello, John

 

 

(2) 함수에서는 외부 변수를 수정할 수도 있다.

 

예시

let userName = "John";

 

function showMessage() {

  userName = "Bob";

  alert(userName);

}

 

showMessage();    //Bob

 

 

주의사항

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.

 

 

 

 

4. 함수 내부에 외부 변수와 동일한 이름의 변수가 선언되었을 때

내부 변수는 외부 변수를 가린다.

 

예시

let userName = "John";

 

function showMessage() {
  let userName = "Bob";    //같은 이름의 지역 변수

  alert(userName);    //Bob

}

 

alert(userName);    //John

 

 

위 예시의 "userName"처럼, 함수 외부에 선언된 변수는 "전역 변수"라고 부른다.

 

 

 

 

5. 매개 변수

매개 변수를 이용하여 임의의 데이터를 함수 안에 전달할 수 있다.

매개 변수를 인수라고 부르기도 한다.

 

예시

function showMessage(from, text) {

  alert(from + ": " + text);

}

 

showMessage("Ann", "Hello!");    //Ann: Hello!

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

 

 

 

 

6. 함수 안에서의 전역 변수 변경

예시

functuon showMessage(from, text) {

  from = "*" + from + "*";    //전역 변수 변경

  alert(from + ": " + text);

}

 

let from = "Ann";    //전역 변수

 

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

alert(from);    //Ann

 

예시에서 보는 것과 같이 함수 안에서 전역 변수를 변경해도 원래의 전역 변수의 값은 변하지 않는 것을 알 수 있다.

 

 

 

 

7. 기본값

매개 변수에 값을 전달하지 않으면 그 값은 undefined가 된다.

이것을 방지하려면 기본값을 설정해주면 된다.

 

예시

function showMessage(from, text = "no text given");

  alert(from + ": " + text);

}

 

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

 

 

기본값으로는 복잡한 표현식도 설정 가능하다.

예시

function showMessage(from, text = anotherFunction()) {

    //anotherFunction()은 text의 값이 없을 때에만 호출된다.

    //anotherFunction()의 반환값이 text의 값이다.

}

 

 

 

 

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

(1) if 문 이용

예시

function showMessage(txet) {

  if (text == undefined) {

    text = "빈 문자열";

  }

 

  alert(text);

}

 

showMessage();    //빈 문자열

 

 

(2) "||" 이용

예시

function showMessage(text) {

  text = text || "빈 문자열";    //"||"는 첫 번째 truthy를 반환하므로 text가 undefined일 때에만 "빈 문자열"이 반환                                                된다.

  //코드

}

 

 

(3) "??" 이용

"??"는 0을 falsy로 평가하지 않기 때문에 유용하다.

 

예시

function showCount(count) {

  alert(count ?? "unknown");

}

 

//alert안에 "??"를 쓰면 적용된다는 것을 알게되었다.

 

 

 

 

9. 반환값

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

이때 이 특정 값을 반환 값이라고 부른다.

 

예시

function sum(a, b) {

  return a + b;

}

 

let result = sum(1, 2);

alert(result);    //3

 

 

return은 함수 내 어디서든 사용 가능하다.

return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한다.

예시

fucntion showMovie(age) {

  if (조건문) {

return;    //반환값이 없는 경우 함수가 즉시 종료된다.

  }

 

 

 

 

10. return 문이 없거나 return 지시자만 있는 함수

undefined를 반환한다.

 

예시(1)

return 문이 없는 경우

function doNothing() {}

 

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

 

//alert 안에서 "==="를 통해 ture, false 값을 비교하여 반환할 수 있다는 것을 알게 되었다.

 

 

예시(2)

return 지시자만 있는 경우

 

function doNothing() {

  return;

}

 

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

 

 

주의사항

return과 값 사이에 절대 줄을 삽입하면 안 된다.

 

예시

이 예시의 코드는 다음 코드와 같은 동작을 한다.

return;

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

 

만약 표현식을 여러 줄에 걸쳐서 작성하고 싶다면 표현식이 return 지시자가 있는 줄에서 시작해야 한다.

또는 괄호를 return 지시자와 같은 줄에 써줘도 된다.

예시