본문 바로가기
JavaScript/엘리 JavaScript note

Part 5 <Functions 함수>

by 판순퐁 2021. 12. 26.

-subprogram 이라고도 불리며 여러번 사용 가능


-프로그램에서 기초요건


-한 가지의 task나 값을 계산하기 위해 사용

 

 

1. Function declaration
function name(param1, param2) { body... return; }
★one function === one thing
(한가지 일만 하도록!)
-함수의 이름은 동사형태로 짓기
★JS에서 함수는 object이므로 변수 할당, 파라미터 전달, 함수 리턴 등이 가능

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

→ Hello
------------------------------------------------------------------------------------------------------------
function log(message) {
  console.log(message);
 }
 log('Hello@');

→ Hello@

 

2. Parameters
primitive parameters: 값을 넘김
object parameters: 참조주소를 넘김

function changeName(obj) {
 obj.name = 'coder';
 }
 const ellie = {name: 'ellie' };
 changeName(ellie);
 console.log(ellie);
 
→{ name: 'coder' } JS에서 object는 mutable이라

 

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

 

4. Rest parameters (added in ES6)배열형태로 전달
function printAll(...args){
  for(let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printAll('dream', 'coding', 'ellie');
 
간단히 만들고 싶다면 =>

for( const arg of args) {
  console.log(arg);
  }
}
printAll('dream','coding','ellie');

 

5. Local scope
"밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다."
let globalMessage = 'global';


function printMessage( ){
 let message = 'hello';
 console.log(message);
 console.log(globalMessage);
 }
 printMessage();
 console.log(message); → 에러

모든 함수는 return undefined이거나 return이 있다. ( undefined는 생략가능 )

 

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


tip!7. Early return, early exit
나쁜 예)
function upgradeUser(user) {
  if(user.point > 10) {
      //long upgrade logic...
  }
}

좋은 예)
function upgradeUser(user) {
  if ( user. point <= 10) {
     return;
  }
    //long upgrage logic...


지금까지 함수를 어떻게 선언할 수 있는지에 대해 배움   

Function Expression> declare와 차이점은 호이스팅
Expression은 호이스팅 안됨

First-class function이란
1. 다른 변수와 마찬가지로 변수에 할당이 됨
2. function에 전달이 됨
3. return 값으로도 return이 됨

const print = function print() {
  console.log('print');
 };
print(); →변수를 함수 호출하듯이 호출

 

2. 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 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 add = (a,b) => a+b;

처리할 일이 많다면 { } 넣고 return 넣어주면 됨
const simpleMultiply = (a, b) => {
//do something more
return a*b;
};

 

4. IIFE: Immediately Invoked Function Expression
함수 바로 호출됨

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

Q. 답

 

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 'reminder' :
   return a % b;
  default :
   throw Error('unknown command');
    }
}

'JavaScript > 엘리 JavaScript note' 카테고리의 다른 글

Part 8 <Array 개념과 APIs>  (0) 2021.12.26
Part 7 <Object>  (0) 2021.12.26
Part 6 <Class vs Object>  (0) 2021.12.26
Part 4 <연산, 반복문>  (0) 2021.12.25
Part3 <데이터 타입>  (0) 2021.12.25