jsNote 04: 함수의 선언과 표현, Arrow function

Q. function이란?

• 한 가지의 task나 값을 계산하기 위하여 쓰인다.
• 입력 - 연산 - 출력의 과정이다.
• 프로그램은 여러개의 function으로 이루어져 있고 function을 sub program이라 부르기도 한다.
• subprogram은 여러번 재사용이 가능하다.
• Input이 function을 통해 output하는 것이므로 함수의 이름을 정하는 것도 중요하다.

1. function declaration 함수 선언

• 함수의 기본 형태는 function name { body ... return; }
• 동사형태로 이름을 지정한다.
• 함수는 js에서 object(객체)이다.

function printHello(){
    console.log('hello');
}
printHello(); // 함수호출

function log(message){
    console.log(message);
}
log('원하는 메세지 입력'); 
log(1234); 

• js에서 타입은 중요하지 않다.
• 매개변수와 리턴값이 중요할 때는 이를 명시해주는 typescript 이용
  
  
  

2. parameter 매개변수

//premitive parameters : value 값으로 전달
//object parameters : reference 값으로 전달

function changeName(obj){
    obj.name = 'coder';
} //전달 받은 obj의 이름을 coder로 바꾸는 함수

const emma = { name: 'emma' };
changeName(emma);
console.log(emma); //name: "coder"

3. Default parameter (ES6에 추가된 기능)

function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}
showMessage('Hi!'); //Hi! by unknown
//두 개의 매개변수를 보내지 않았기 때문에 원래라면 Hi! by undefined라고 출력되지만
//from 뒤에 올 값이 없을 때 출력할 것을 미리 정해줄 수 있다 (='unknown')

4. Pest parameter (ES6에 추가된 기능)

function printAll(...args){
    for(let i=0; i<args.length; i++){
        console.log(args[i]);
    }

    for(const arg of args){
        console.log(arg);
    }

    args.forEach((arg)=>console.log(arg));
}
printAll('hi', 'coders', 'howareyou'); 
//배열을 매개변수로 보내 hi, coders, howareyou 하나씩 출력하는 3가지 방법

5. local scope 지역 스코프

let globalMessage = 'global'; //전역변수
function printMessage(){
    let message = 'hello'; //지역변수
    console.log(message); //hello
    console.log(globalMessage); //global
  	function printAnother() {
    	console.log(message);
    	let childMessage = `hello`;
  	}
  console.log(childMessage); // error : Uncaught ReferenceError: childMessage is not defined
}
printMessage();

• 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.
• 즉, 블락 안에서 지역/전역변수를 사용할 수 있으나 그 반대는 안된다.
• 중첩된 함수에서 자식함수가 부모함수에 정의된 변수에 접근 가능한 것을 클로저라고 한다.
  
  
  

6. Return a value

function sum(a, b){
    return a + b;
}
const result = sum(1,2);
console.log(result); //3
console.log(`sum: ${sum(1,2)}`); //sum: 3

7. Early return, early exit

//'~일 때 ~를 하라'는 함수는 나쁜 예시
function upgradeUser(user){
    if(user.point > 10){
        //logic
    }
}

//조건이 맞지 않을 때는 return해서 조건 종료, 조건이 맞을 때만 logic 실행하게 하는 함수가 좋은 예제
function upgradeUser(user){
    if(user.point <= 10){
        return;
    }
    //logic
}

Q. first-class function이란?

• function이 변수로 취급되고
• 다른 변수와 마찬가지로 변수에 값으로 할당이 되고
• 다른 함수에 매개변수로 전달되고
• 리턴값으로도 리턴된다
  
  
  

1. function expression 함수 표현

//함수 호출도 호이스팅 기능이 있어서 함수가 선언되기 전에 써도 사용 가능
const print = function (){ //함수에 이름이 없는 anonymous function
    console.log('프린트!');
} //함수를 선언함과 동시에 print라는 변수에 할당
print(); //print 호출

const printAgain = print;
printAgain(); //다시 print 함수 호출

const sumAgain = sum;
console.log(sumAgain(1,3));

2. 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(디버깅할 때 쓰거나 함수 내에서 함수 자신을 부를 때 사용)
const printNo = function print(){
    console.log('no!');
};

randomQuiz('wrong', printYes, printNo); //no!
randomQuiz('love you', printYes, printNo); //yes!

3. Arrow function

• 항상 이름 없는 함수로 사용한다.

// const simplePrint = function () {
//     console.log('simplePrint!');
// }; 를 아래처럼 화살표를 이용하여 간결하게 표현 가능
const simplePrint = () => console.log('simplePrint!');

const simpleMultiply = (a,b) => a*b;
const add = (a,b) => a+b;

4. IIFE : Immediately Invoked Function Expression

• 선언함과 동시에 호출하려면 함수를 괄호로 묶은 다음에 괄호로 끝에 호출해준다.

(function hello(){
    console.log('IIFE');
})();

Quiz.

• command와 두 개의 값을 받아 계산할 수 있는 function 만들기

function calculate(command, a, b){
    switch (command){
        case 'add':
            return a+b;
        case 'substract':
            return a-b;
        case 'multiply':
            return a*b;
        case 'remainder':
            return a%b;
        default:
            throw Error('unknown command');
    }
}
console.log(calculate('add',2,3)); //5
console.log(calculate('multyply',5,5)); //25