함수

함수

프로그램의 기본 빌딩 블록

subprogram이라고도 불리며 여러번 재사용이 가능하다

작업을 수행하거나 값을 계산하는데 쓰인다.

 

1.함수 선언 & 함수 호출

함수 선언

function name(parameter1,parameter2) {body... return;}
하나의 함수는 한가지의 일만 하도록 만들어야 한다
naming방식은  doSomething,command,verb형태로 해야한다
ex)createCardAndPoint ->가독성을 위해 createCard,createPoint로 나눠줄 필요가 있음
함수는 js에서 object로 취급.

function printHello() {
  console.log('Hello');
}
printHello();//Hello만 계속 출력

function log(message){
  console.log(message);
}
//출력 될 값을 직접 설정 가능하므로 효용성이 올라간다
log('Hello@');
log(1234;);

여기서 message라는 인자는 string을 입력하라는 것인지 number을 입력하라는 것인지 모호하다.

당장은 num값을 string으로 자동으로 변환하여 주기 때문에 문제가 발생하진 않았지만 

type이 중요한 경우 문제에 직면할 수 있다.

이런 이유로 나오게 된 것이 typescript이고 아래와 같이 사용한다.

function log(message:string):number{
  console.log(message);
  return 0;
}
//message:string->parameter의 type 설정
//:number->return 값의 type 설정
//return 0->만약 여기서 숫자가 아닌 다른 값이 들어가면 오류가 발생

 

함수 호출

//doSomething이라는 함수 선언
function doSomething(add1){
  console.log(add1);  //ƒ add(a,b){
                      //const sum = a+b;
                      //return sum;
                      //}
  const result = add(2,3);
  console.log(result);//5
}

//add라는 함수 선언
function add(a,b){
  const sum = a+b;
  return sum;
}

//함수 호출
doSomething(add);
//doSomething이라는 함수안에 add라는 함수가 들어있는 함수 호출
//(add1)대신에 add라는 함수가 들어가게 한다.
////주의할점은 doSomething(add);는 add의 날 것을 호출하지만
//doSomething(add());을 해버린다면 add의 {}안의 것들을 실행시킨 후의 add를 호출한다
//따라서 만약 add()를 호출한다면 위의 doSomething의  console.log(add1);에서는
//아직 a,b가 정해지기 전이므로 NaN이 나오게 된다.

 

2.매개변수(parameters)

parameter가 premitive 타입일 경우 값으로 전달되고
parameter가 object일 경우에는 reference가 전달된다

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

전에도 살펴봤듯이 type이 const인 객체일지라도 

참조값 자체의 변경이 불가능 할 뿐,

안에 있는 변수의 값을 변경하는 것은 가능하므로 

A에 들어있는 name이 coder로 변경되는 것을 볼수 있다.

 

3.default 매개변수(added in ES6)

function showMessage(message,from){
  console.log(`${message} by ${from}`);
}
showMessage('Hi!');//Hi! by undefined
//from의 값이 지정 되지않아 undefined가 나온다

//default값 지정
function showMessage(message,from ='unknown'){//from의 값이 지정되지 않았을때 출력시킬 값을 입력한다
  console.log(`${message} by ${from}`);
}
showMessage('Hi!');//Hi! by unknown

 

4.rest(나머지) 매개변수(added in ES6)

매개변수 이름앞에 세개의점 ...을 붙여 사용한다.

인자들을 배열로 전달받게 된다.

function printAll(...args){//...을 입력후 변수명을 입력하면 array형태로 전달되게 된다
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printAll('dream','coding','ellie')//배열 안에는 이 3개의 값들이 들어가고 for문에 따른 결과값이 출력된다.
//반복횟수가 배열의 길이만큼이므로 dream, coding, ellie가 3번 반복된다.

 

5.지역 scope

안에서는 밖을 볼 수 있고,밖에서는 안을 볼 수 없다.

let globalMessage = 'global'; //전역변수
function printMessage() {
  let message = 'hello'
  console.log(message);//hello / 지역변수-안의 것은 안에서만 사용 가능하다.
  console.log(globalMessage); //global / 안에서는 밖을 볼 수 있다.
}
printMessage();
console.log(message);//에러 / 밖에서는 안을 볼 수 없다

부모 자식간에도 마찬가지이다.

let globalMessage = 'global'; 
//부모 함수
function printMessage() {
  let message = 'hello'
  console.log(message);
  console.log(globalMessage); 
  //자식 함수
  function printAnother(){
    console.log(message);// hello(자식은 부모의 변수 사용 가능)
    let childMessage = 'hello';
  }
  console.log(childMessage);
  //에러(자식은 부모의 변수를 사용 가능하나,반대로 부모는 자식의 변수를 사용할 수 없다.)
}
printMessage();

 

6.Return

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

모든 함수는 return값을 가지고 있다.
다만,return값을 설정해 주지 않을 시에는 return값에 undefined가 자동적으로 들어가 있을 뿐이다.

 

7.Early return, early exit

안좋은 예

function upgradeUser(user) {
  if(user.point>10){
    //logic
  }
}
//조건을 충족했을 때를 가정하고 함수 안에 logic을 작성하면
//가독성이 떨어진다

좋은 예

function upgradeUser(user){
  if(user.point <= 10){
    return;
  }
  //logic
}
//따라서 조건이 아닌 경우를 산정하여 return;(undefined)를 줘서 배제시킨 후
//블럭 바깥에 logic을 작성하는 것이 옳다

 

8.일급함수(자바스크립트의 특징)

함수는 다른 변수처럼 취급된다
변수에 값으로 할당 가능
다른 함수에 인수로 전달할 수 있음
다른 함수에서 반환될 수 있음

 

9.function expression

 

hoisting

//함수는 선언하기 이전이라도 호출이 가능하다(호이스팅)
//ex)
sum(2,3);//함수선언보다 앞에 있지만 정상적으로 실행된다.
         //js가 function 선언을 맨위에 있는 것으로 인식하기 때문(이를 hoisting이라고함)
function sum(a,b) {
  return a + b;
}

익명함수

const print = function(){//이렇게 이름없는 함수를 anonymous function(익명 함수)라고 칭한다
console.log('print');
};
print();//print (익명함수 호출)
const printAgain = print;
printAgain();//print(익명함수 재호출)

10.콜백 함수

함수 안에서 사용되는 함수로 그 속에서 일종의 루틴 또는 동작을 완성하기 위해 호출된다. 

어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 일반 함수를 말한다.
그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다.일반적인 자바스크립트 함수일 뿐이다.
=>한마디로 콜백함수는 수동태처럼 자기 의지가 없다. 함수가 콜백함수을 밖으로 불러내야지만 나온다.
출처: https://devbirdfeet.tistory.com/62 

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

//named function
const printNo = function print() {
  console.log('no');
  print();
};
randomQuiz('wrong',printYes,printNo);//no
randomQuiz('love you',printYes,printNo)//yes

11.Arrow function

//항상 익명함수이다.
const simplePrint = function() {
  console.log('simplePrint!');
};
//이거를
const simplePrint = () =>console.log('simplePrint!');
//이렇게 쉽게 표현 가능하게함

//그리고
const add = function (a,b){
  return a+b;
};
//이거를
const add = (a,b) => a+b;
//이렇게 간단하게 표현가능

//조금더 식이 길어질때는 block이 필요하기도 한데 이때는 return을 설정해주어야 한다
const simpleMultiply=(a,b)=>{
  return a*b;
};

 

12.IIFE:즉시 호출되는 함수 표현식

function hello() {
  console.log('IIFE');
}
hello();
//이거를

(function hello() {
  console.log('IIFE');
})();
//이렇게하면 바로 실행가능

 

+quiz

//function calculate(command,a,b)
//command:add,substract,divide,multiply,reminder
//parameter에 따라서 값을 계산하는 계산기를 작성하시오

let a=1;
let b=2;
function calculate(command,a,b){
  if (command ==='add'){add();}
  else if (command ==='substract'){substract();}
  else if(command === 'divide'){devide();}
  else if(command === 'multiply'){multiply();}
  else if(command === 'reminder'){reminder();}
};
const add=()=>console.log(a+b);
const substract=()=>console.log(a-b);
const devide=()=>console.log(a/b);
const multiply=()=>console.log(a*b);
const reminder=()=>console.log(a%b);

calculate('add',a,b);