JS 함수 기본 (PurpleCode Study)

김지원·2020년 10월 27일

JavaScript

목록 보기

3/21

함수 표현식과 함수 선언문

함수 선언문 : 함수 선언문이 정의되기 전에 호출할 수 있다.

function sum(a, b) {
  return a + b;
}

함수 표현식 : 실행 흐름이 함수에 도달했을 때 해당 함수를 사용할 수 있다.

let sum = function(a, b) {
  return a + b;
};

정리

함수 선언문으로 코드를 구성하는 것이 좋다.
함수 선언문을 사용할 경우 함수가 선언되기 전에 호출할 수 있어서 코드를 좀더 편하게 구성할 수 있으며 가독성 또한 높아진다.

const score = 90;

const PassOrFail = (score >= 80)
    ?
    function(){
        console.log(`${score}점은 합격입니다.`);
    }
    : function (){
        console.log(`${score}점은 불합격입니다.`);
    };

    PassOrFail();//정상적으로 호출

그러나 위와 같이 조건에 따라 함수의 내용이 달라질 경우 함수 표현식을 사용하는게 좋다.

가변인수

함수 호출 시 함수의 인수는 arguments에 담겨 전달됩니다.

function avg() {
    let sum = 0;
  
    for (let i = 0; i < arguments.length; i++) {
      sum += arguments[i];
    }
  
    return sum/arguments.length;
  }
  
  const result = avg(1, 2, 3);
  
  console.log(result); 
//2

ERROR :(

function avg(){
 arguments.reduce((prev,curr,index,arguments)=>{
    if(index === arguments.length-1){
        return (prev+curr)/arguments.length;
    }
    else{
        return prev+curr;
    }
});
};

console.log(avg(1, 2, 3));

rest라는 값 확산 문법

function avg(...args) {
    let sum = 0;
  
    for (let i = 0; i < args.length; i++) {
      sum += args[i];
    }
  
    return sum/args.length;
  }
  
  const result = avg(1, 2, 3);
  
  console.log(result);

rest + reduce 이용해서 평균 구하기!

const avg =(...arguments)=> arguments.reduce((prev,curr,index)=>{
    if(index === arguments.length-1){
        return (prev+curr)/arguments.length;
    }
    else{
        return prev+curr;
    }
});

console.log(avg(1, 2, 3)); 
console.log(avg(1, 2)); 
console.log(avg(1, 2, 3, 4, 5));
/*
2
1.5
3
*/

고차 함수

함수를 결과로 반환하거나, 함수를 인자로 전달받는 함수를 의미한다.

// 함수를 return 하는 함수
function countLength (str) {
    const count=()=>{
        return str.length;
    };

    return count;
};

const hello = countLength("hello");
const hi = countLength('hi');

console.log(hello());//5
console.log(hi());//2

// 함수를 인자로 받아 대신 실행하는 함수
function countLength(val, func){
    return func(val);
}

function count(str){
    return str.length;
}

console.log(countLength('hello', count));//5

콜백 함수

함수를 인자로 다른 함수에 넘겨주고 해당함수 안에서 인자로 받은 함수를 호출하는 것을 콜백함수라고 부른다.

//1초뒤 first 출력 2초뒤 second 출력
function callbackExample(f) {
  setTimeout(()=>{
      f('first');
      setTimeout(()=>{
          f('second');
      },2000)
  },1000 )
  }
  
  callbackExample(function(str){
      console.log(str);
  });

화살표 함수

const add = (a,b) => a+b;
console.log(add(1, 2)); //3

화살표 함수와 일반 함수의 차이점

일반 함수는 자신만의 데이터를 가질 수 있고 화살표 함수는 그렇지 못한다.(this를 가지지 않음, 그렇기 때문에 new와 함께 호출이 불가능함)
화살표 함수에는 가변 인수를 받을 때 argument가 없다.

클로저

변수를 은닉하여 지속성을 보장
독립적인 변수를 가리키는 함수 또는 만들어진 환경을 기억하는 것
사이드 이펙트 제어 목적으로 사용
private 변수 생성하는 목적으로 사용

function makeCounter() {
  let count = 0;
  return f;
  function f() {
    return count++;
  }
}

let counter = makeCounter();

console.log(counter());//0
console.log(counter());//1
console.log(counter());//2

function makePerson(num) {
	let age = num;
    
    return{
    	getAge(){
        	return age;
            },
            setAge(x) {
            age = x>1 && x<130 ? x: age;
            }
        }
     }
    
     let p = makePerson(10);
     console.log(p.getAge());//10

     p.age=500;
     console.log(p.getAge());//10
     
     p.setAge(24);
     console.log(p.getAge());//24