Function 함수

2021. 5. 14. 19:39TIL/자바스크립트

728x90

//  Function

//  - fundamental building block in the program

//  - subprogram can be used multiple times

//  - performs a task or calculates a value

 

// 1. Function declaration

// function name(param1, param2) { body... return; }

// one function === one thing

// naming: doSomething, command, verb

// e.g. createCardAndPoint -> createCard, createPoint

// function is object in JS

 

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

function log(message){
    console.log(message);
}
log('Hello!');
log(1234);
// 자바스크립트는 타입을 지정하지않아도 되기때문에 문자, 숫자 상관없이 입력이 가능하다

 

// 2. Parameters

// premitive parameters: passed by value

// object parameters: passed by reference

function changeName(obj) {
    obj.name = 'coder';
}
const bella = { name: 'bella' };
changeName(bella);
console.log(bella);

 

// 3. Default parameters (added in ES6)

function showMessage(message, from = 'unknown')  {
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

 

// 4. Rest parameters (added in 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('dream', 'coding', 'ellie');

 

// 5. Local scope

let globalMessage = 'global'; // global variable
function printMessage(){
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
}
printMessage();

// 안에서는 보이지만 밖에서는 보이지 않는다.
// 자식함수에서는 부모함수에 속한 변수를 부를 수 있지만 부모함수에서는 자식함수에 속한 변수를 부를 수 없다

 

// 6. Return a value 

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

 

// 7. Early return, early exit

// bad

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

// good, 로직이 긴 경우 함수 안에 return을 먼저 선언해주고 그 뒤에 로직을 실행해주는 게 좋다

function upgradeUser(user) {
    if (user.point <= 10){
        return;
    }
    // long upgrade logic...
}

 

// First-class function

// functions are treated like any other varable

// can be assigned as a value to variable

// can be passed as an argument to other functions.

// can be returned by anotherfunction

 

// 1. Function expression

// a function declaration can be called earlier than it is defiend. (hoisted)

// a function expression is created when the execution reaches it.

const print = function () { // anonymous function
    console.log('print');
};
print();
const printAgain = print;
printAgain();
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
// better debugging in debugger's stack traces
// rercursions
const printNo = function print() {
    console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

// Arrow function
// always anonymous
const simplePrint = function () {
    console.log('simplePrint!');
};
// const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
    //do something more
    return a * b;
};

// IIFE: Immediately Invoked Function Expression
(function hello() {
    console.log('IIFE');
})();

 

 

 

// Quiz

// function calculate(command, a, b)

// command: add, substract, divide, multiply, remainer

function calculate(command, a, b) {
    switch (command) {
        case 'add':
            add1(a,b);
            console.log(`a + b : ${add1}`);
            break;
        case 'substract':
            substract(a,b);
            console.log(`a - b : ${substract}`);
            break;
        case 'divide':
            divide(a,b);
            console.log(`a / b : ${divide}`);
            break;
        case 'multiply':
            multiply(a,b);
            console.log(`a * b : ${multiply}`);
            break;
        case 'remainer':
            remainer(a,b);
            console.log(`a % b : ${remainer}`);
            break;
        default:
            console.log('undefined');
            break;
    }
}

function add1(a, b){
    add1 = a + b;
}
function substract(a, b){
    substract = a - b;
}
function divide(a, b){
    divide = a / b;
}
function multiply(a, b){
    multiply = a * b;
}
function remainer(a, b){
    remainer = a % b;
}
calculate('divide', 5, 2);

어렵다..😵

 

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

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ와

이렇게 간단한 코드로 가능한걸 난 뭐한다고 따로 함수를 만들고 난리부르스를 췄던 것인가

갈수록 어려운데 제대로 하고있는건지 모르겠다

'TIL > 자바스크립트' 카테고리의 다른 글

Object  (0) 2021.05.18
class object 객체지향  (0) 2021.05.17
자바스크립트 연산자, if문 for문 switch문  (0) 2021.05.13
변수 var, let, const  (0) 2021.05.12
JavaScript를 html에 연결하는 효율적인 방법  (0) 2021.05.12