function(함수)

프로그램을 구성하는 주여 구성 요소이다.
함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출하여 사용이 가능 하다.
함수는 데이터이다.

1. 함수 선언

function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 작성하여 함수 선언이 가능하다.

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

2. 함수 호출

작성한 function_name()을 사용하여 호출하면 함수 본문이 실행된다.

    function showMessage() {
      console.log('안녕하세요');
    }
    showMessage();

3. 변수

1. 지역 변수(local variable) : 함수 내에서 선언한 변수
2. 외부 변수(outer variable) : 함수 외부에서 선언한 변수

• 지역 변수는 함수 안에서 접근이 가능하며 함수 내부에서 함수 외부의 변수에 접근할 수 있다.

    function showLocalVar() {
      let message="123";
      console.log(message);
    }
    showLocalVar();
    // console.log(message); // message is not defined


    let userName = 'Hun';
    
    function showOuterVar() {
      let message = 'Hello ' + userName;
      console.log(message);
    }
    showOuterVar();

• 함수에서는 외부 변수에 접근과 수정 둘 다 가능하다.

    let editUserName = 'Hunn';
    
    function showEditOuterVar() {
      editUserName = 'Seung'; // 외부 변수를 수정
      let message = 'Hello, ' + editUserName;
      console.log(message);
    }

    console.log(editUserName);  // 함수 호출 전이므로 'Hunn'이 출력

    showEditOuterVar();

    console.log(editUserName);  // 함수에 의해 'Seung'으로 값이 바뀜

• 외부 변수는 지역 변수가 없는 경우에만 사용가능하며 지역 변수와 외부 변수가동일한 이름을 가진 변수가 선언되었다면 내부 변수는 외부 변수를 덮어 쓴다.

    let localOuterUserName = 'Hunnn'; // 외부 변수 선언, 전역 변수라고도 하며 최소한으로만 쓰자
    
    function showLocalOuter() {
      let localOuterUserName = 'Seungg';  // 같은 이름을 가진 지역 변수 선언
      let message = 'Hello, ' + localOuterUserName;
      console.log(message);
    }

    // 함수는 내부 변수인 localOuterUserName만 사용한다.
    showLocalOuter();

    // 내부 변수 에서만 값이 바뀌었으므로 외부 변수의 값이 나온다.
    console.log(localOuterUserName);

3. 매개 변수(parameter) : 임의의 데이터를 함수 안에 전달하는 역할을 하는 변수

    function showParameter(from, text) { // parameter: from, text
      console.log(from + ': ' + text);
    }

    showParameter('Hun', 'Hello!');     // Hun: Hello!
    showParameter('Hun', "What's up?"); // Hun: What's up?

위의 예시를 보면 함수를 호출할 때 함수에 전달된 인자들(arguments)은 parameter로 들어가게 된다.

4. 기본 값

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

showParameter('Hun'); // Hun: undefined

• 매개 변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 '기본 값'을 설정 해주면 된다.

• 기본값을 설정하는 방법은 '매개 변수 = value' 형식으로 작성을 해주면 된다.
  또 다른 방법으로 if문이나 논리 연산자, nullish를 사용하는 방법도 존재한다.

    function showParameterValue(from, text="is my name") {
      console.log(from + ": " + text);
    }

    showParameterValue('Hun');  // Hun:  is my name

5. return

return은 반환 값으로 불리며 함수를 호출했을 때 함수를 호풀한 그곳에 특정 값을 반환하게 할 수 있다.

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

    let result= sum(2, 3);
    console.log(result);  // 5

• return은 함수 내 어디서든 사용이 가능하며 함수 실행 중 return을 만나게 되면 함수 실행이 return까지만 진행이 된 후 중단 되며 함수를 호출한 곳에 값을 반환하게 된다.

  함수안에 아무것도 없거나 return만 있을 경우 undefined를 반환한다.

    function doNothing() {
      // 1. 아무것도 없거나
      /* empty */
      // 2. return만 있을 경우
      return;
    }

    console.log(doNothing() === undefined); // true

• return 사용 시 여러 줄에 걸쳐 식을 작성하고 싶다면 아래처럼 작성해야 한다.

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

6. 함수 이름 짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이기 때문에 가능한 간결하고 명확해야 한다.
이름만 봐도 어떤 기능을 하는지 알 수 있게 해놔야 하며 함수는 동작 하나만 담당해야 한다.

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