[JS/Basic/함수] 자바스크립트 함수

JavaScript는 다양한 함수 선언방법이 있다.  Arrow Function, 함수 선언식 ,익명함수 등등 .. 본인은 Arrow Function을 주로 사용하지만, JavaScript가 오래된 언어인만큼 여러가지 방법으로 작성된 함수를 "이해"하는정도는 되야하기 때문에, 다 알아야합니다 :( 

---

함수(Function)

프로그래밍에서 함수를 설명하는 책을 보면 대부분 수학시간에 배운 함수를 이용해서 설명합니다. 그 설명이 틀린 것은 아닙니다. 맞습니다. 하지만, 저에게는 와닿지 않아서 보통 다르게 설명을 합니다.

• 프로그램을 작성하다가 "반복적인 로직을 줄이기 위해 만든 방법"이 프로그래밍에서 함수입니다. (모듈화의 개념이 먼저에요!!)
• 프로그램을 작성하다보면, 똑같은 논리를 여기저기 갖다 쓰는 경우가 많습니다. 예를들어, 쿠팡사이트에서 로켓배송,로켓프레시 등 어떤항목을 가던 "로그인"기능은 동작을 합니다. 그렇다면, 모든 HTML 파일에 다 로그인 기능을 구현해놓은 걸까요? 당연히 No 입니다. 
• 태초의 프로그래머들이 프로그램 코드 내에서, 똑같은 논리가 계속 쓰이는게 너무 힘들고 비효율적이라 생각해서, 생각해낸 방법이 "반복되는 Logic은 한 곳에서 정의해서 , Call하는 형식으로 만들자" 였습니다. 이 방법에 가장 적합한 형태가 현실세계에 구현되어있는게 "Function(함수)" 였고, 그 개념을 갖다 쓴겁니다.

함수 선언(Function Declaration)

• 함수 만드는 기본적인 방법입니다. "함수를 만드는 방법 == 함수선언" 이라고 생각하셔도 무방합니다.
• 함수이름 , 매개변수(parameter),함수로직(block,body등으로 불립니다),retrun(결과값) 으로 구성됩니다.
• return은 함수의 종료를 나타냅니다. return 이하의 로직들은 무시가 됩니다.
• return에 아무것도 정의가 되어있지 않다면, undefined가 반환됩니다. 

function name(parameter){
	//Logic
    return ;
}

• 자바스크립트에서는 변수에도 함수를 담을 수 있습니다. 함수를 변수에 담아서 활용하는걸 함수 표현식(Function Expression)이라고 합니다.  선언식과 표현식은 미묘한 차이가 있는데, 나중에 다루겠습니다. (궁금하시다면 호이스팅,실행컨텍스트에 대해서 찾아보시면 됩니다!)
• 함수형 프로그래밍에서 Expression을 많이 사용하게 됩니다. 함수를 "값"으로 취급해서, 1급객체로 다루니까요!

const adder = function (x,y){
	return x+y
}

함수의 선언2 - Arrow Function

• JavaScript ES6 표준화에서 제시된 새로운 함수 선언방법입니다.
• 기본적으로 표현식으로 쓰고, 주로 익명함수로 AddEventListener ,onclick 등의 비동기함수와 함께 많이 썻던거 같아요. 
• 몇가지 제약사항이 있지만 , 대부분의 일반적인 함수를 대체할 수 있습니다(MDN을참고해주세요!)
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• 함수를 리턴하는 함수(고차함수)를 생성할 때, 직관적으로 쓸 수 있습니다. 코드의 가독성(직관력)이 더 좋아집니다! 

const newFunc= (parameter) => {
	return ;
}
//Example
const add = (a,b) => a+b;
// equals
// const add = (a,b) => {return a+b;}

const number5 = add(3,2)

const calculator = (func,a,b) => func(a,b)

caculator(add,3,2)

함수의 호출 (Function Call)

• 함수를 정의했다면, Code 상에서 실행해야합니다. 이 과정을 함수를 "호출"한다, Calling 한다라고 말합니다.
• 함수를 실행할 때, 정의된 형태에 맞게 호출해야하는데, 이때 쓰는 용어가 쪼끔 다릅니다. 함수정의에서 매개변수는 Parameter,함수 실행할 때의 매개변수는 Arguments라고 합니다. (사실 둘 다 매개변수라고 말하면 됩니다만, 외국 문헌을 볼 때, 헷갈리는 경우가 많아서 참고하시면 좋습니다 !)

const adder = (a,b) => a+b;
// 변수  = 함수이름(인자) , result = functionName(Arguments) 
let res= adder(3,2);

자바스크립트에서 함수와 함수의 호출

• 자바스크립트에서 함수는 1급 객체이기 때문에,  함수를 "값"처럼 다룰 수 있습니다.
• 따라서, 함수를 Parameter,Arguments로 쓸 수 있기 때문에, 함수를 "호출"할지, "정의된 함수"를 넘길지 헷갈리는 경우가 많습니다. 아래의 코드를 보죠!.

const $sayHello = document.querySelector("#loginBtn");

const sayHello = () =>{
	console.log("hello!")
}
$sayHello.addEventListener('click',sayHello)

• 보통, addEventListener 뒤에 할 동작을 정해주는 곳을 Callback 함수부분이라고 합니다. callback 함수에는 "함수"가 들어가야합니다.  함수를 call하게 되면, "return 값"이 반환되기 때문에, undefined가 됩니다. 즉, addEventListener('click',undefined) 인거죠! 이 코드는 에러가 납니다.

위와같은 실수를 React에서도 많이하게 되는데, 주의가 필요합니다! 특히, Redux에서 Reducer 부분을 작성할 때는 순수함수로 작성해야하는데, 함수를 call할지, 함수를 부를지 정말 헷갈립니다.

 

참고자료 : 제로초님의 인간JS 엔진

https://www.youtube.com/watch?v=-79WfViYw3k&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3