• Home
  • About
    • ming photo

      ming

      studying

    • Learn More
    • Twitter
    • Facebook
    • Instagram
    • Github
    • Steam
  • Archive
    • All Posts
    • All Tags
    • All categories
  • categories
    • HTML+CSS+JavaScript
    • JAVA
    • Algorithm
    • DB
    • JSP
    • 정보처리기사
    • Spring
    • Thymeleaf
    • 기술면접
  • Projects

JS-ellie-Functions

31 Jan 2021

* Functions

function

- function 선언

  • fundamental building block in the progmram : 프로그램을 구성하는 기본적인 빌딩 블록
  • sub-program 이라고 불리며 여러번 재사용이 가능하다 (can be use multiple times)
  • 한가지의 테스크(performs a task) OR 어떠한 값을 계산(calculates a value) 하기 위해 사용한다

1.Function declataion(JS에서의 함수 정리방법) : function name(param1, param2) { body… return;} - 한가지의 함수는 한가지의 일만 하도록 만들어야 한다(one function === one thing) - naming : doSomething, comman, verb - function is object in JS => 변수에 할당 할 수 있고 parm로 전달이 되고 함수를 리턴 할 수 있다

```JavaScript
function printHello(){ // 함수 정의
    console.log('Hello);
}

printHello(); // 함수 호출

=> 계속 Hello밖에 출력이 안돼서 쓸모가 없다

    ```JavaScript
    function log(message){ // parameter(매개변수)로 message를 전달 하게 설정
        console.log(message); // message를 화면에 출력하도록 만든다
    }
    log('Hello'); // Hello가 출력된다
    log(1234); // 1234가 출력된다
    ```
2.parameters 
    - premitive parameters : passed by value => 메모리에 value가 저장되어있기 때문에 value가 전달이 된다
    - object parameters : passed by reference => 메모리에 reference 가 저장되어 있어 reference가 전달된다

    ```JavaScript
    function changeName(obj){ // changeName은 전달된 obj에 name을 무조건 coder로 변경하는 함수이다
        obj.name = 'coder';
    }
    const mingki = { name: 'mingki'}; // mingki라는 const를 정의 한 후 { name: 'mingki'} => mingki라는 obj를 만들어 할당 
    changeName(mingki); // 전달된 obj.name 에서 mingki를 가리키고 있는 내용을 corder로 변경해준다
    console.log(mingki); // corder 가  출력 된다
    ```
3.Default parameters 

    ```JavaScript
    function showMessage(message, from){ // showMessage 는 (message, from) 이라는 2가지의 parameters를 받아오는 함수이다
        console.log('${message} by {from}'); // message 가 누구(from) 로 부터 왔는지 출력한다
    }
    showMessage('Hi!'); // message 만 입력하고 from을 입력하지 않아 " Hi! by undefined "가 출력된다

    ```
4.Rest parameters
```JavaScript
    function printAll(...args){ /// ... 를 작성하게 되면 Rest parameters 라고 불리우며 배열 형태로  전달 된다
        for (let i = 0; i < args.length; i++){
            console.log(args[i]);
        }
    }
    printAll('dream', 'cording', 'ellie'); // printAll를 호출할 때 인자를 3개 전달 한다

5.Local scope => scope : 범위

```JavaScript
let globalMessage = 'global'; // global variable => 전체에서 사용가능
function printMessage(){
    let message = 'hello';
    console.log(message); // local variable => {} 안에서만 사용가능 
    // => hello 출력
    console.log(globalMessage);
    // => global 출력
}
printMessage();
``` 6.Return a value : 값을 return 한다

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

7.Early return, early exit

```JavaScript
// bad
function upgradeUser(user){
    if(user.poing > 10) {
        // long upgrade logic...
    }
}
//good
function upgradeUser(user){
    if(user.poing > 10) { // 조건이 맞지 않을때 빨리 return을 해서 함수를 종료 시킨다
        return;
    }
    // long upgrade logic...
}
```

- function 사용

1.function expression : 함수가 선언 된 후 함수 사용이 가능하다 <-> function declaration : 선언 이 나중에 되어도 함수 사용이 가능하다(hoisted)

```JavaScript
const print = function(){ // 함수를 선언함과 동시에 변수 print에 할당한다 , 이름없는 함수 : anontmous function
    console.log('print');
}
print(); // print 출력
const printAgain = print; // 다른변수에 할당
printAgain(); // print 출력
const sumAgain = sum; 
console.log(sumAgain(1,3)); // 4 출력
2.Callback function using function expression : 상황에 맞는 함수를 호출하도록 전달하는것 

    ```JavaScript
    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); // no! 출력
    randomQuiz('love you', printYes, printNo); // yes! 출력

    ```

** Arrow function : 항상 이름이 없는 함수다

    ```JavaScript
    // 기본 코드
    const simplePrint = function(){
        console.log('simplePrint!');
    };

    // Arrow function을 사용하면
    const simplePrint = () => console.log('simplePrint!');

    // 함수가 길어져 {} 을 사용할 경우 : return을 꼭 사용해야 한다
    const simpleMultiply = (a,b) =>{
        // do someting more
        return a*b;
    };
    ```

** IIFE : 함수를 선언 함과 동시에 바로 호출

```JavaScript
    (function hello(){
        console.log('IIFE');
    })(); 
** Quiz
function calculate(command, a,b) comnmand : add, substract, divide, multiply, remainder
  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 'reainder':
              return a % b;
          defalt:
              throw Error('unkonwn command');

      }
  }
  console.log(calculate('add', 2, 3)); 


Share Tweet +1