[Javascript] ES5+ 기초강의 5 - Arrow Function? 함수의 선언과 표현

---

1. Function

• 프로그램을 구성하는 기본적인 블록.
• 서브 프로그램으로 여러 번 재사용할 수 있음.
• 한 가지 task(작업)이나 value(값)을 연산하는 역할을 수행.

1.1 Function declaration : 함수 선언

• 함수는 프로그램을 구성하는 기본적인 블록
• 하나의 기능을 수행하는 프로그램 블록을 하나의 함수로 작성
  • 다수의 기능을 수행하는 이름으로 작성해야 한다면,
  • 각각의 기능을 수행하는 함수로 나누고 기능에 맞는 이름을 변경.
• Javascript에서 함수(function)는 object 타입.

 

// 1. Funtion declaration
// funcation name(param1, param2, ...) { body... return; }
// 하나의 function은 한가지의 일만 수행

// naming(명명 방법) : doSomething, command, verb
// - 하나의 기능을 수행하는 함수로 작성.
// - 동사, 명사, 명령등 의미를 내포하는 단어를 조합

// e.g creatrCardAndPoint -> createCard, createPoint
// - 다수의 기능을 하는 이름이 나오면 분리한다.

// JS(Javascript)에서 function은 object 타입

function printHello() {
    console.log('Hello');
}
printHello();

function log(message) { // JS에서는 함수 Parameter 전달 Type이 불명확
    console.log(message);
}

// Type이 중요한 함수의 경우 문제가 발생할 수 있음.
log('Hello2');  // String Type을 Parameter로 전달
log(1234);      // Number Type를 Parameter로 전달

 

1.2 매개 변수 : Parameters

• Primitive type : value(값)을 전달, call by valuie
• Object type     : reference(참조 : 주소)를 전달, call by reference

// 2. Parameters
// primitive type parameter : value(값) 전달
// object type parameter    : reference(참조:주소) 전달
function changeName(obj) {
    obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);

 

1.3 Default Parameter : 매개 변수 기본 값 [ ES6 추가 ]

ES6 이상

// 3. Default parameters(ES6 추가)
function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`)
};
showMessage('Hi!');

ES5 이하

// ES6 이전 코딩
// 기본값이 전달되지 않을 경우 처리해야함
function showMessageOld(message, from) {
    console.log(`${message} by ${from}`)
};
showMessageOld('Hi!'); // 'Hi by undefined' : undefined object

 

function showMessageOldModify(message, from) {
    
    // from param : default 값 처리
    if (from === undefined) {
        from = 'unknwon';    
    }
    console.log(`${message} by ${from}`)
};
showMessageOldModify('Hi!'); // 'Hi by unkonwn' :

 

1.4 Rest Parameters : 나머지 매개변수들 [ ES6 추가 ]

• 배열로 파라미터를 전달

// 4. Rest parameters (ES6 추가)
// - 배열로 파라미터를 전달
function printAll(...args) {
    // for loop 출력
    for (let i=0; i<args.length; i++) {
        console.log(args[i]);
    }

    // advanced for loop 출력
    for (const arg of args) {
        console.log(arg);
    }

    // arrow function 사용한 출력
    args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

 

1.5 Local Scope 

• 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.
• 함수에서 변수의 참조 스코프는 기본으로 Local로 전역 변수를 참조할 수 있다.
• 함수 내에 다시 함수를 선언한 경우도 마찬가지로 Child 영역의 변수는 부모에서 참조할 수 없고, Child는 부모의 변수를 참조할 수 있다.

// 5. Local scope
// 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.
let globalMessage = 'global'; // global variable
function printMessage() {
    let message = 'local';
    console.log(message);       // local variable  : 참조 가능
    console.log(globalMessage); // global variable : 참조 가능

    function printAnother() {
        let childMessage = 'child';
        console.log('child: '+message);       // parent variable : 참조 가능
        console.log('child: '+childMessage);  // local variable  : 참조 가능
        console.log('child: '+globalMessage); // global variable : 참조 가능
    }

    printAnother();
    // console.log(childMessage); <-- 에러 발생 : undefined
}
// console.log(message); <-- 에러 발생 : undefined
printMessage();

 

1.6 Return : 값 반환

• 함수에 return을 명시하지 않으면 내부적으로 return undefined로 처리

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

function printSome() {
    console.log(`printSome -> sum: ${sum(1,2)}`);
    // return undefined : return을 명시하지 않으면, 자동으로 추가됨
}

 

1.7 Early return, early exit : 함수 코딩 추천 방법

• 함수 코딩 시 가능하면 조건에 만족하지 않으면 빨리 반환(return) 처리

잘못된 예

function upgradeUserBad(user) {
    if (user.point > 10) {
        // long upgrade logic..
    }
}

좋은 예

// 좋은 예
function upgradeUserGood(user) {
    // 값이 맞지 않을 경우 빨리 함수에서 반환
    if (user.point <= 10) {
        return;
    }
    // 이후 필요한 logic 처리
    // long upgrade logic...
}

 

2. 함수 이해하기

2.1 First-class function

• 함수(function)도 변수처럼 취급할 수 있음.
• 변수에 값으로 할당될 수 있고,
• 다른 함수에 인자(argument)로 전달될 수 있으며
• 다른 함수에서 반환(return)될 수 있음.

2.2 Function Expression : 함수 표현

• 함수는 정의(define)되기 전에 호출할 수 있음.
• JS에서는 함수 선언(function declaration)을 최상위로 자동 이동해줌 (hoisted)
• 함수 본문은 함수가 실행될 때 생성됨.

anonymous fuction vs named function

• anonymous function : 이름 없는 함수
• named function          : 일반 함수

const print = function() { // anonymous function : 이름없는 함수
    console.log('print');
}
const namedPrintAgain = function namedPrint() { // named function : 함수
    console.log('print');
}

함수 사용 예

print();                  // 변수 print를 함수처럼 호출
namedPrintAgain();        // 변수 namedPrintAgain을 함수처럼 호출

const printAgain = print; // 다른 변수에 할당
printAgain();

const sumAgain = sum;       // 다른 변수에 할당
console.log(sumAgain(1,3)); // 할당 받은 함수를 파라미터로 전달하고 호출

 

2.3 함수 표현(expression)을 사용한 Callback function

• Callback function : 필요한 경우 사용할 수 있도록 변수에 파라미터로 전달받은 함수
• anonymous function, named function 모두 전달할 수 있음
• named function이 디버깅에 좀 더 유리며, 재귀 호출 시 사용할 수 있음.
• 재귀 호출은 프로그램이 다운될 위험이 있으니 주의하여 코딩해야 함.

// 2. 함수 표현(expression)을 사용한 Callback function
// - 필요한 경우 사용할 수 있도록 변수에 파라미터로 전달받은 함수
function randomQuiz(answer, printYes, printNo) {
    if (answer === 'love you') {
        printYes();
    } else {
        printNo();
    }
}

// anonymous function
const printYes = function () {
    console.log('YES');
};

// named function
// - 디버깅 할 때 함수 이름이 표현됨.
// - 재귀(recursion)를 사용할 때 사용 가능.
const printNo = function print() {
    console.log('NO');
    // print();  <-- 재귀 호출 : 프로그램 다운 위험이 있으니 주의하여 사용
};

randomQuiz('test', printYes, printNo); 
randomQuiz('love you', printYes, printNo);

 

2.4 Arrow function : 애로우 함수

• =>를 사용하여 표기한 함수
• 항상 anonymous function을 사용
• 좀 더 간편하게 함수를 표현할 수 있음

// 3. Arrow function
// - 항상 anonymous 사용
const simplePrintNormal = function () {
    console.log('simplePrint');
};

// 좀 더 편하게 표현
const simplePrintArrow = () => console.log('simplePrint');

 

• 한 줄로 표기할 경우 return 생략 가능
• { }를 사용하여 블록으로 표기한 경우 return 명시

 

// Normal function expression
const addNormal = function (a, b) {
    return a + b;
}

// Arrow function expression
const addArrow = (a, b) => a + b;    // 간결한 표현이 가능

const simpleMultiply = (a, b) => {   // 여러 줄인 경우 Block 표현
    // 추가 코드
    return a * b;                    // Block 사용 시 return 필요
};

 

2.5 IIFE : Immediately Invoked Function Expression

• 선언함과 동시에 함수 호출

 

// 4. IIFE: Immediately Invoked Function Expression
// - 선언함과 동시에 함수 호출

// 일반 방식
function hello() {
    console.log('Normal');
}
hello();

// IIFE 방식
// 함수 전체를 ()로 묶고 마지막에 ()를 추가
(function helloIIFE() {
    console.log('IIFE');
})();

 

3. Quiz

// Quiz

// function calculate(command, a, b) 작성
// command : add, substract, divide, multiplay, remainder

스크롤하여 답변 확인

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

const add = (a, b) => a + b;
const substarct = (a, b) => a - b;
const divide = (a, b) => a / b;
const multiply = (a, b) => a * b;
const remainder = (a, b) => a % b;

const calculate = (command, a, b) => command(a, b);

console.log(`calculate(add, 2, 2) = ${calculate(add, 2, 2)}`);
console.log(`calculate(substarct, 2, 2) = ${calculate(substarct, 2, 2)}`);
console.log(`calculate(divide, 2, 2) = ${calculate(divide, 2, 2)}`);
console.log(`calculate(multiply, 2, 2) = ${calculate(multiply, 2, 2)}`);
console.log(`calculate(remainder, 2, 2) = ${calculate(remainder, 2, 2)}`);