javascript 함수[function] (직접적실행, 간접적실행, 익명함수, 화살표함수)

함수는 객체에 포함될 수 있다. ex)

const a = {
	fName : function() fName {
    	console.log('hello');
        }

위와 같이 객체에 존재하는 함수를 메소드라고 부른다.

 

함수는 직접적으로 간접적으로 실행할 수 있다.

직접 : 선언된 함수의 이름 뒤 괄호를 사용하여 호출하는 방식으로 해당 함수를 바로 실행

간접 : 함수의 이름만 사용하여 호출하는 방식으로 이벤트리스너와 같이 특정 시점에 함수를 실행시킬 수 있음

 

익명함수: 변수에 함수를 할당하는 것 

// 변수에 함수를 할당
const hello = function() {
console.log('hello');
};
          
// 메소드의 인자로 쓰일 경우 익명함수로 직접 작성가능
btn.addEventListener('click', function() {
console.log('hello');
})

위와 같이 사용가능하고

익명함수는 변수에 함수를 할당하는 것이기 때문에 이벤트리스터에도 인자로 바로 작성 가능하다

예를 들어 위처럼 hello 에 익명함수를 할당하여 hello변수를 인자로 넣거나 바로 hello 대신 해당 익명함수를 넣거나 결국 같기 때문

 

또 익명함수는 처음 스크립트를 읽을 때 호이스팅은 되지만 변수 안의 함수는 정의되지 않기때문에

정의된 이후에만 사용이 가능하다.

즉 기존 함수들은 내가 사용하려는 코드 밑에서 정의가 되어도 처음 실행 시 전체 함수를 다 읽어 정의를 해놓기 때문에

문제가 되지 않으나 익명함수는 오류가 발생한다.

 

익명함수도 이름을 지정할수는 있는데

위 이벤트리스너에서 작성한 익명함수 내의 코드에서 에러가 발생할 경우

브라우저는 콘솔에 에러가 발생한 함수명을 알려주지 않는다.

찍어주는 에러 발생라인이 실제 소스상의 위치와 다른 경우도 있을 수 있어

이런 경우에 난감할 수 있는데 이때 해당 익명함수에 function aa() {} 와 같이 이름을 지정해주게 되면

위치를 좀 더 수월하게 알 수 있다는점도 고려 가능.

 

또 직접적실행에서 말한것과 같이 함수명 뒤에 괄호를 붙여 실행하는 방식을 활용하여

전역변수 관리에 용이한 즉시실행함수표현식(IIFE)에 활용

 

화살표함수는 함수 선언 시 코드를 간결하게 줄일 수 있다.

// 기본 형식
const a = () => {
	return true;
    }

// 인자가 하나일 경우 소괄호 생략 가능
const a = param => {
	return true;
    }
    
// 반환형식이 표현식 하나일 경우 중괄호 생략, return 생략
const a = param =>
	param == 'param' ? true : false;