Chapter 2. JS 함수

NavDevJae·2021년 2월 7일

JS에 다가가기~~

목록 보기

2/6

함수 (function)

함수의 정의
1. 코드의 묶음이다.
```
console.log(n * 1);
console.log(n * 2);
console.log(n * 3);
..........
```
2. 기능의 단위이다.
3. 입력과 출력간의 매핑(Mapping)
4. 반드시 돌아온다. (Return)

함수를 어떻게 사용할 수 있나??

버튼 제작 즉 선언한다. (declaration)

function cal(param1, param2) {     // 두개의 parameter 사용 
    console.log(param1 * param2); 
    return param1 + 10; // param1에 10을 더한 값을 리턴한다. 
} // 함수는 heap이라는 특별한 공간에 따로 저장된다. 
 // 좀 더 자세한 내용은 나중에 배워보자.

버튼 사용한다. 호출한다. (call, invocation)
cal(10,10); // 위에 언급된 function cal(){}를 호출한다. 

cal 함수내의 호출된 인자 10,10은 위에서 선언된 param1과 param2 즉 함수의 파라미터 값으로 전달된다. 그리고 난 후, 순차적으로 함수내의 값이 실행된다.

함수 이름 지정??

function interestRate(){} // 이자율을 명명한 함수이다.
 function totalAmount(){} // 계산된 amount의 총 합계를 명명한 함수이다. 
 //함수 명명하는 것은 매우 중요하다!!! 나중에 복잡한 코딩을 하게 될 경우, 함수의 이름만으로 그 함수의 역할을 알 수 있기 때문이다.

함수 선언 종류

=> 함수 선언 종류를 말하기 전에, 매개변수 (parameter)에 대해 알아보자.

특별히 함수에서 사용할 입력값이다.

함수 실행시 입력에 따라 바뀔 수 있는 변수지만 일반적인 변수와는 달리 let과 같은 키워드를 쓰지 않고 사용 가능하다. 예시는 아래와 같다.

let distanceToHome = function (time, speed) { //사람마다 걸리는 시간과 속도가 다르므로 매개변수로 지정해 주었다. 언제든지 변할 수 있는 값이기에.. ㅎ
   let distance = time * speed; 
   console.log(distance);// distance를 console에 찍어보면 undefined가 나온다. 입력만 있을 뿐 출력이 없기 때문이다. 
}      
 let distanceToHome = function (time, speed) { //사람마다 걸리는 시간과 속도가 다르므로 매개변수로 지정해 주었다. 언제든지 변할 수 있는 값이기에.. ㅎ
   let distance = time * speed; 
   return distance; // return해주면 함수가 출력까지 되므로, 함수 바깥으로 결과를 가져올 수 있다!! 함수는 return 값이 있어야 된다는 것을 잘 기억해두자!! 
   // 아무 리턴이 없으면 -> 결과는 undefined 
}

함수 선언식 (function declaration) 및 함수 표현식 (function expressions)

function 함수명 (){구현 로직} // 함수 선언식 
 let 함수명 = function (){구현 로직} // 함수 표현식

함수 표현식과 함수 선언식의 차이점 : 호이스팅 (hoisting) 영향 유무이다. 호이스팅에 관한 설명은 일단 밑에 코드를 참조하고 조금 더 깊이 알고싶다면 맨 끝에 있는 참조 링크를 참고하기 바란다.

// 코드 실행 전. 
getMessage();
setMessage();

function getMessage() {};
let setMessage = function() {};

 // 코드 실행 후.
 function getMessage() {}; // 함수 선언식은 hoisting에 의해 위치가 상단으로 올라갔다.  

getMessage(); // 정상적으로 호출된다. 
setMessage();

let setMessage = function () {}; // 함수 표현식은 "Uncaught TypeError : setMessage is not a function"
// 함수 표현식인 setMessage는 호출된 후 선언이 되었으므로 setMessage를 변수로 인식한다.

=> 그러므로, 함수 선언식보다는 함수 표현식을 추천한다!!! 호이스팅 영향을 받지 않는다는 것 이외에 클로져, 콜백 등으로 사용 가능하다는 다른 장점이 있지만 지금은 그냥 이런 장점이 있다는 것만 알고있자.

참고하면 좋을 링크

함수 표현식 => 검색어 : mdn function expression javascript
함수 선언식 => 검색어 : mdn function declaration javascript
호이스팅 (Hoisting) => 검색어 : mdn function hoisting javascript
매개변수 (parameter) vs 인자 (arguments)
=> 검색어 : difference between parameter and arguments javascript