JS-4일차(function)

김혜성·2021년 7월 10일
0

프론트엔드

목록 보기
7/17

함수를 집중적으로 다루었다
가장 새로운거라면 단연코 arrow function!!
C언어에서는 포인터로 접근하는 걸 ->로 했었는데
JS에서는 =>으로 함수를 표현할 수가 있다? ㄷㄷ

Function

  • fundamental building block in the program
  • subprogram can be used multiple times
  • performs a task or calculates a value

Function declaration

  • function name(param1, param2){body... return;}
    이렇게 선언한다(보통)
  • one function === one thing - 한가지 기능만 하도록 구현하자!
    근데 이건 Clean Code 책 내용에 나온다지만 완전 strict할 필욘 또 없다고 한다...
  • naming: do sth, command, verb
  • function is object in JS - 함수명 뒤에 .을 입력하면 관련 obj 메소드들이 쭈욱 뜬다!(object인 이유)
function printHello() {
    console.log('What\'s up');
}
printHello();

function log(msg) {
    console.log(msg);
}
log('What\'s up');

TypeScript에서는 아래와 같이 쓴다(참고)

//in TypeScript
function log(msg: string): number {
    console.log(msg);
    return 0;
}

Parameters

  • premitive parameters: passed by value
  • object parameters: passed by reference
function changeName(obj) {
    obj.name = 'coder';
}
const comet = { name: 'comet' };
changeName(comet);
console.log(comet);

Default parameters

  • added in ES 6
  • msg만 값 주고 from 안주면 from은 default로 undefined가 찍힌다
function showMsg(msg, from) {
    console.log(`${msg} by ${from}`);
}
showMsg('Hi!');

Rest parameters

  • added in ES 6
  • ...args : array가 parameter로 전달됨
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', 'comet');

Local scope

  • local, global variable
  • "밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다"
let globalMsg = 'global'; // global
function printMsg() {
    let msg = 'hello';  // local
    console.log(msg);
    console.log(globalMsg);
    function printAnother() {
        console.log(msg);
        let childMsg = 'hello';
    }
    //console.log(childMsg); // error!! local variable outside --> meaningless
}

printMsg();

Return a value

  • 반환x는 return undefined가 생략된 것
function sum(a, b) {
    return a + b;
}
const result = sum(1, 2);
console.log(result);

Early return, early exit

  • 가능한 빨리 return 또는 exit하도록...
  • 여기가 살짝 이해가 안됐는데, 각 로직, 상황에 따라서 함수에서 따져주고 처리할 경우를 if문 등으로 통해 구분하기도 하는데, 이 때 가능하면 함수의 body 코드들을 적용하지 않을 부분을 조건문으로 우선적으로 걸러서 빨리 return 시키자는 내용이다!
// 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 variable
  • can be assigned as a value to variable
  • can be passed as an argument to other functions
  • can be returned by another function

Function expression

  • a function declaration can be called earlier than it is defined. (hoisted - 함수 선언 이전에 호출해도 된다)
  • a function expression is created when the execution reaches it
  • const에 선언과 동시에 넣는 게 expression임. 얜 hoist가 안댐.
const print = function () { // anonymous function(함수 명이 읎다)
    console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

Callback function using function expression

인수 전달시 함수도 전달될 수 있다! 다른 함수의 인수로 전달되는 함수를 콜백함수라고 합니다!

function randomQuiz(answer, printYes, printNo) {
    if (answer == 'love you') {
        printYes();
    }
    else {
        printNo();
    }
}
const printYes = function () {
    console.log('yes!');
};
const printNo = function () {
    console.log('No!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

Arrow function

새거다 새거!

  • always anonymous function - 이름없는 그런 함수
    요즘 똥개도 이름들이 있는데 참 서럽네
const simpleBrint = function () {
    console.log('siimplePrint!');
};

const simplePrint = () => console.log('simplePrnt!');
const add = (a, b) => a + b;
const complecated_add = (a,b) => {
    //complicated logic
    // arrow function이어도 길어서 중괄호 쓰게되면 return 붙여줘야함
    return a+b;
};

같은 기능을 가지는 함수도 정말 간단하게 표현 가능! 파이썬의 lambda같은 느낌?

IIFE(Immediately Invoked Function Expression)

  • 함수를 선언하고 바로 호출하고 싶을 때 유용!
    괄호만 덧붙여주면 된다
(function hello() {
    console.log('IIFE');
})();
profile
똘멩이

0개의 댓글