[Modern JS 이론] Function & Arrow Function

다른 모든 프로그래밍 언어에도 있는 function 이라는 기능이 JS 에도 존재합니다.

// call function
nameOfFunction();

// function : named
function nameOfFunction(arguments){
 // 소스코드
}

//function : anonymous
const something=function (arguments){
 //소스코드
}

하지만 Modern JS 에는 Arrow Function 이라는 것이 추가되었습니다.

MDN 관련문서를 참조하여 해당 기능이 어떤 건지 알아보도록 하겠습니다.

[참조문서 : MDN Documents about JS]

Arrow Function 은 항상 Anonymous Function 입니다. (Default 가 아닌 Always 값을 의미)

이러한 Arrow Function 의 장점은 다음과 같습니다.

• Function 표현보다 구문이 짧다.
• 자신의 this, arguments, super 또는 new.target 을 바인딩하지 않습니다.

Arrow Function 의 제약점은 다음과 같습니다.

• 메서드가 함수에는 사용할 수 없습니다.
• = 생성자로서 사용할 수 없습니다.

우리는 간단한 Arrow Function 예시를 하나 봐볼 것입니다.

const array=[
	'A',
    'BB',
    'CCC',
    'DDDD',
];
console.log(array.map(array=>array.length));

/* 소스코드 분석
	console.log();	>	괄호 () 안의 내용을 console 창에 출력
    Object.map();	>	array 을 복사하고 모든 elements 에 대해서 괄호 () 안의 내용을 수행하고 반환
    Object => Ruturn	> 	array 의 각 elemetns에 대해서(=>) 각 elements.length 값을 반환(return)
    expected output	>	Array [1,2,3,4]
*/

해당 JS code 를 테스트하기 위해서 index.html 파일을 만들고 index.js 파일을 임포트하여 테스트를 진행해보셨나요?

expected output 과 동일한 Array [1,2,3,4] 라는 Value 가 나온 것을 확일 할 수 있을 것입니다.

다만 map method 의 특성상 array 가 바뀐 것이 아니라서 Array는 그대로 있다는 점을 아셔야 합니다.

실제로 console 창에 console.log(array) 를 입력하면 그대로의 값이 나오느 것을 확인할 수 있습니다.

 

이 Arrow Function 을 Nomal Function(기존방식)으로 표현하면 얼마나 길어질까요?

const array=[
	'A',
    'BB',
    'CCC',
    'DDDD',
];
let arrayCopy=[
];
something(array);
function something(arguments){
	let lenghtOfArguments=arguments.length;
    while(lenghtOfArguments!==0){
        lenghtOfArguments=lenghtOfArguments-1;
        arrayCopy[lenghtOfArguments]=array[lenghtOfArguments];
        console.log(arrayCopy);
    }
}

/* 절차 분석
	복사할 array 생성
    복사값을 넣을 arrayCopy 생성(let)
    복사할 array를 arguments 로 갖는 function 생성
    해당 function에 array를 arguments로 실행
*/

/* 소스 코드 분석
	let lenghtOfArguments=arguments.length;	> 복사할 arguments의 길이값 저장
    while(lenghtOfArguments!==0) {			> while 문을 arguments 의 길이만큼 반복
    	lenghtOfArguments=lenghtOfArguments-1;					> 1회 반복마다 1 감소
        arrayCopy[lenghtOfArguments]=array[lenghtOfArguments];	> arguments 복사
        console.log(lenghtOfArguments;							> argumentsCopy 출력
    }
    
    
*/

물론 이 방법보다 조금 더 간결한 방식으로 Copy 반복문을 만들 수는 있을 것입니다.

그러나, 개선된 방식으로 소스코드를 작성하더라도 Arrow Function 이 더 효율적임은 부정할 수 없을 것입니다.

이렇듯, Arrow Function 은 그 자체로 진보된 방식으로 우리에게 획기적인 기능을 제공해주지는 않지만,

훨씬 더 간결한, 쓰기 쉽고 읽기 쉬운 Function 표현 경험을 제공해줄 수 있을 것으로 보입니다.

 

 

+

 

하지만 우리는 때때때로 this. 나 super. 등을 이용할 필요가 있습니다.

이러한 경우에는 Nomal Function(Function)을 이용해야 합니다.

그 이유는 Arrow Function 은 기본적으로 Anonymous Function 이기에 상위 하위 인자를 찾을 수 없기 때문입니다.