15. function

어떠한 하나의 기능을 담당하는것이 함수이다.
비슷한 동작을 하거나 어떠한 조건을 위해 작성하는 여러줄의 코드를
함수단위로 묶어 작성할 수 있다.
또한, 함수를 사용하면 유사한 동작을 하는 코드를 줄여 사용할 수 있다(재사용성).

앞에서 사용한 내장함수들은 alert, prompt, log등등이 있었다.
이런 함수들은 다 내부적으로 여러 코드가 실행된 후의 결과를 우리는 단 한줄로 사용하는것이다.

함수 선언

함수 선언방식은 아래와 간다

function 함수명(파라미터) {
  해당 로직
  return 리턴값; // 생략하면 undefined가 리턴됨.
}

1. 함수는 function이라는 키워드를 사용한다.
2. 그다음 함수의 이름을 적는다.
3. 함수에 필요한 파라미터를 작성한다.
   -> 파라미터가 여러개일 경우 ,로 구분하여 적어준다.
4. 해당 함수의 로직을 내부에 작성한다.
5. 함수가 끝난 뒤 리턴되는 값을 정의한다.

함수의 실행

함수명 뒤에 ()를 붙여주면 함수의 실행을 뜻한다.

// 함수의 선언
function showNumber(number) {
  console.log(number);
}

// 함수의 실행
showNumber(4);
showNumber(10);

함수를 한번 선언한 뒤 매개 변수의 변화만으로 해당 값이 콘솔에 찍힌다.
이렇게 함수 하나로 반복되는 여러줄을 줄일 수 있다.

지역 변수

함수 내에서 선언한 변수는 지역 변수가 된다.
이 변수는 해당 함수 내에서만 사용할 수 있으며, 함수가 종료되면
이 변수의 생명주기도 끝난다.

function oneNumber() {
  let number = 1;
}
oneNumber();
console.log(number); // undefined

위에서 함수 내에서의 number는 지역 변수이다.
number는 지역변수라서 전역(global)에서 사용할 수 없다.
그래서 콘솔에 number을 찍어보면 undefined가 나온다.

let number = 10;
function plusNumber() {
  number++;
}
plusNumber();
console.log(number); // 11

이번 함수는 함수내에서 변수를 만드는 것이 아닌 밖에서 선언된 number함수를 사용한다. 즉 global variable(전역 변수)를 사용하기 때문에 해당 값은 함수 내에서도 사용이 가능하며 밖에서도 사용이가능하다. 또한 함수 내에서 수정도 가능하다.
만약 함수 내에서 같은 이름의 변수를 선언한다면 함수 내에서 변수는 내부 변수를 가르킨다.

매개 변수

매게 변수로 받는 변수들은 전부 지역변수 이다.

let num1 = 10;
let num2 = 20;

function addNum(one, two) {
  one++;
  two++;
}
addNum(num1, num2);
console.log(num1, num2);  // 10, 20

위의 코드에서 addNum함수를 통하여 num1과 num2는 1씩 늘어날 것 같지만 콘솔에는 그대로다.
그 이유는 addNum에 파라미터로 넘겨주는 순간 변수안의 값이 one과 two에 복사되기때문이다.
즉, 복사한 값을 할당한 지역변수 one과 two의 값을 늘려주기 때문에 num1과 num2는 영향을 받지 않는다.

매개 변수의 기본값 설정

매개 변수가 안들어왔을떄 해당 변수의 값은 undefined다.

function print(text) {
  console.log(text);
}

print(); // undefiend가 콘솔에 출력

위와 같이 매개변수에 값을 못받을 경우 해당 변수는 undefined이다.
여기서 기본값을 undefined가 아닌 다른 값으로 설정해 줄 수 있다.

function print(text = 'hello') {
  console.log(text);
}
print();   // hello
print('code');  // code

위와같이 매게변수에 값을 지정해주면 해당값이 undefined대신
지정해준 값으로 나오게 된다.

반환값 (return)

중학교과정에서 함수를 배울때 봤던 그림이 있다.

어떠한 값이 들어오면 해당 기능이 실행 후 반환값이 있다는것이다.
프로그래밍 함수에서도 같다. 어떠한 함수든 반환값이 존재한다.

함수내에서 반환을 뜻하는 return키워드를 사용한다.

function sumNum(num1, num2) {
  return num1 + num2;
}
let result = sumNum(10, 20);
console.log(result); // 30

위와 같이 return키워드를 사용하여 num1과 num2를 더한값을 되돌려준다.
sumNum을 호출한 자리는 해당 로직을 실행하고 num1과 num2를 더한 값을 되돌려주고 그 값을 변수 result가 받아주었다.

• 리턴값이 생략되면 기본적으로 함수는 undefined를 리턴한다.
• 코드를 실행하다가 return키워드를 만나면 해당 return을 실행후 함수가 종료된다. --> return 뒤의 코드는 작동이 안된다.
• return뒤에 여러줄을 적으면 안된다.
  --> 여러줄을 적기위해서는 ()로 처음과 끝을 감싸준다.

함수의 이름

우리는 함수의 이름을 대충 지어서는 안된다.
함수의 이름은 어떻게 보면 해당 함수기능의 주석과도 같다.
우리는 이름을 보고 해당함수가 어떤기능을 하는지 추측을 할 수 있어야한다.
이것을 우리는 추상화라고 한다.

아래와 같이 권장하는 네이밍이 있다.

• show~~~ -> 무언가 보여줌
• get~~~ -> 어떠한 값을 반환함
• calc~~ -> 계산을 함
• create~~ -> 무언가를 생성함
• check~~~ -> 무언가 확인 후 boolean값을 리턴함