[js] 자바스크립트 함수 선언과 함수 호출

[js] 자바스크립트 함수 선언과 함수 호출

 

자바스크립트 함수와

함수 호출에 관한 설명입니다.

 

함수 선언

코드 형식1

• es6 함수 문법: 화살표 함수
• 아래 함수에서 { } 는 객체가 아니라 블럭
• 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = () => ({ ... })

const add = () => a+b; //함수 선언
//const add = () => {return a+b} 위의 함수와 같음
//const add = () => ({a+b}) 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함

 

코드 형식2

• 매개변수를 넣어 다양한 함수 활용 가능

function cal(func,a,b) { //함수 선언
	return func(a,b) //명령
}
//conts cal = (func,a,b) => func(a,b) 와 위 함수와 같음

 

함수 호출

• 위에서 함수를 선언한 후 호출을 하지 않으면 아무일도 일어나지 않습니다.
• 이벤트를 사용하는 방식 등으로 함수를 호출하여 사용합니다.
• 함수를 호출하면 선언한 함수를 불러와 return 값이 명령을 실행합니다.
• 호출하는 방법은 함수명()

add(3, 5) //8
cal(add, 3, 5) //8

 

함수 선언과 함수 호출 사용시 많이 하는 실수

• 실무에서 함수명(선언한 함수)을 넣는 자리에 함수호출을 넣는 실수를 많이 합니다. 
• 함수 add 자리에 함수 호출 add()을 넣는 실수

실수 예제1

cal(add(), 3, 5) //틀림
cal(add, 3, 5) //맞음

 

실수 예제2

document.querySelector(‘#nav’).addEventListener(‘click’, add()) //틀림
document.querySelector(‘#nav’).addEventListener(‘click’, add) //맞음

 

헷갈리지 않는 방법

• 함수 호출 자리에 return 값으로 바꿔본다
• return 값이란 const a = () => a+b 일때 a+b
• 고차함수 일 경우 () => 첫번째 화살표 뒤의 값
• add() 의 리턴 값이 a+b를 넣는데, a,b 값을 모르므로 undefind + undefind가 됨
• 함수 호출이 아니라 함수명을 넣어야 한다는 것을 알 수 있음

 

예제1

document.querySelector(‘#nav’).addEventListener(‘click’, add()) 일 경우
document.querySelector(‘#nav’).addEventListener(‘click’, undefined + undefined)로 변환

 

예제2 - 고차함수

const onClick = () => (e) => {console.log(‘hi')}
document.querySelector(‘#nav’).addEventListener(‘click’, onClick())일 경우
document.querySelector(‘#nav’).addEventListener(‘click’, (e) => {console.log(‘hi'))

 

* 위의 예제는 제로초님의 유튜브 강좌의 도움을 받았습니다.