function
서브 프로그램이라도 불리며 여러번 재사용이 가능하다.
1. function description
function name(param1, param2) { body ... return; } - one funtion === one thing
하나의 funtion은 한가지의 일만 해야한다. - 이름은 동사형식으로 naming 하는 것이 좋다.
- JS에서 funtion은 Object이다.
function printHello(){
console.log("Hello")
}
printHello();
아래와 같이 파라미터로 전달시켜서 출력하는 것이 더 유용하다.
function log(message){
console.log(message)
}
log("Hello");2. Parameters
premetive parameters : value가 전달이 된다.
Object parameters : 메모리에 reference가 저장 된다.
function changeName(obj) {
obj.name = 'coder';
}
const ellie = {name : 'ellie'}
changeName(ellie);
//coder3. Defalut parameters (added in ES6)
function showMessage(message, from) {
console.log(`${message} by ${from}`)
}
showMessage('Hi!') // Hi! by undefined위와 같이 from의 parameter 값이 정해지지 않으면 undefined로 출력되게 된다.
이를 보완한 방법이 아래 방식
function showMessage(message, from) {
if(from === undefined) {
from = 'unknown'
}
console.log(`${message} by ${from}`)
}
showMessage('Hi!') // Hi! by unknown
를 아래와 같이 간단하게 적을 수 있다.
function showMessage(message, from = 'unknown') {
console.log(`${message} by ${from}`)
}
showMessage('Hi!') // Hi! by unknown4. Rest parameters (added in ES6)
... 을 붙이면 배열 형태로 전달
function printAll(...args) {
for (let i = 0; i < args.length; i++){
console.log(args[i]);
}
}
printAll('car', 'house', 'book')
// car
// house
// book인자를 3개를 전달 -> 배열 형태로 전달이 된다.
위를 간단하게 출력하려면
function printAll(...args) {
** for of 사용 ** args에 있는 값을 하나씩 꺼낼수 있다.
for (const arg of args){
console.log(arg);
}
** forEach 사용 ** 배열에 forEach를 사용해
args에 있는 값을 하나씩 꺼낼수 있다.
args.forEach((arg) => console.log(arg))
}5. Local scope
let globalMessage = 'global'
function printMessage() {
let message = 'hello';
console.log(message); //local variable
console.log(globalMessage); //global variable
function printAnother(){
console.log(message); // 부모 함수의 변수 확인 가능! ( = 클로저)
let childMessage = 'hi';
}
console.log(childmessage); //error!자식 함수의 변수 확인 불가능 ...
}
printMessage();
console.log(message); //error!
6. Return a value
아래와 같이 값을 리턴할수 있는 함수가 있고
위의 예제와 같이 따로 값을 리턴하지 않는 함수가 있는데 이는 return undifined; 이다.
function sum(a, b){
return a + b;
}
const result = sum(1, 2) //37. Early return, early exit
블럭 안에서 로직을 많이 작성하다보면 가독성이 떨어진다. 빨리 함수를 종료(return)한 후에 필요한 로직을 밖에 적는 것이 가독성이 좋다.
//bad
function upgradeUser(user){
if(user.point > 10){
//long upgrade logic ...
}
}
//good
function upgradeUser(user){
if(user.point <= 10){
return;
}
//long upgrade logic ...
}
- First class function
function은 다른 변수와 마찬가지로
변수에 할당이 되고
funtion에 parameter로 전달이 되고
return 값으로도 return이 된다.
-> 이것이 가능한게 function expression이다.
1. Function expression
sum(3, 2); // 2. 자바스크립트 엔진이 선언된것을 제일 위로 올려준다.
function sum(a, b){
return a + b;
}
const print = function(){
console.log('hey')
} //1. 함수가 선언돤 것과 동시에 변수에 할당함.
print(); //hey
const printAgain = print;
printAgain(); //hey
const sumAgain = sum;
console.log(sunAgain(1, 3)) //42. Callback function using function expression
function randomQuiz (answer, printYes, printNo){
if(answer === "love you"){
printYes();
} else {
printNo();
}
}
// ** anonymous function (이름이 없는) ** //
const printYes = function () {
console.log("yes!")
}
// ** named function ** //
- 디버깅을 할때 함수의 stack trace에 나오게 하기 위해서 쓴다.
- 함수안에서 자신 스스로 또 다른 함수를 호출할때
const printNo = function print() {
console.log("No!")
print(); // 함수 안에서 자신 스스로를 호출하는 경우를 'recursions' 라고 한다.
// 사용시 프로그램이 죽기 때문에 피보나치수를 계산할때나 반복되는 평균값을 계산할때 등등 에만 사용하는것이 좋다.
}
randomQuiz('wrong', printYes, printNo) //No!
randomQuiz('love you', printYes, printNo) //Yes!
// ** printYes, printNo 의 두가지 콜백 function이 parameter로 전달되어서
정답이 조건과 같을때만 printYes를 나머지 정답이 아닌 경우에는 printNo를 호출.3. Arrow function
//always anonymous - 항상 이름이 없는 function
const simplePrint = function () {
console.log("simple print)
}
↓
const simplePrint = () => console.log("simple print)
...
const add = function (a, b) {
return a + b;
}
↓
const add = (a, b) => a + b
......
또는 블럭이 필요한 경우에는 return 을 사용해줘야 한다.
const simplePrint = () => {
console.log("simple print);
}
const add = (a, b) => {
return a + b;
}4. IIFE : Immeditely Invoked Function Expression
최근에는 잘 쓰이지는 않지만 함수를 바로 호출하고 싶을떄 사용한다.
function hello(){
console.log('IIFE')
}
hello();
↓
(function hello(){
console.log('IIFE')
})();