자바스크립트의 화살표 함수는 = () => 기호를 사용한다. 의미는 함수명 = (인자값) => { 코드 } 의 형태로 사용한다. 화살표 함수 외에 비슷한 표현식도 있기에 난해할 수 있지만 자바스크립트 특유의 유연함은 개발자로 하여금 독이 될 수 있는 부분일 수 있다. 하지만, 이 자유분방함 때문에 개발단계에서 꽤나 간결한 코드를 쉽게 만들 수 있다. 물론, 가독성도 좋아진다.
자바스크립트 화살표 함수 뜻과 의미
= () => arrow function
자바스크립트는 공부할 것이 많은 언어 같기도 하다.
프로그래밍 언어 중 가장 하찮게 보이기도 하지만 대단해 보일 떄도 있다.
라이브러리도 다양하고, 써먹을 곳도 많아진 것도 사실이다.
이런 느낌이 드는 것은 화살표 함수 때문이기도 하다.
자바스크립트가 꾸준히 업그레이드 되면서 안전성과 안정성이 점차 보장되고 개발단계에서 편한 이점을 주는 것도 사실이지만 이런 추가적인 기능들은 가끔 난해하게 만들 때가 있다.
화살표 함수는 = () => 으로 표현하고 익숙해지면 함수를 빠르게 작성하고 사용할 수 있다.
다만, 익숙해 지는 것이 어렵다.
화살표 함수 의미
화살표 함수의 형태는 = () => 으로 표현하는데 이렇게 봐서는 무슨 뜻인지 전혀 알 수가 없다.
간단한 형태의 코드를 보자.
아래는 2개의 인수를 받아 합한 후 값을 리턴하는 간단한 코드이다.
var fnAdd = (num1, num2) => { return num1 + num2 };
console.log( fnAdd(10, 20) );이게 함수인지 와닿지 않는다. 하지만 함수는 맞다.
표현식이 많이 달라졌을 뿐이고 의미는 위의 코드를 본래의 함수처럼 구성하면 그 의미를 잘 알 수 있다.
function fnAdd(num1, num2) {
return num1 + num2
};
console.log( fnAdd(10, 20) );
// ----------
var fnAdd = (num1, num2) => { return num1 + num2 };
console.log( fnAdd(10, 20) );위에서 표현한 2개의 함수를 비교해 보자. 함수를 작성한 다를 뿐 같은 의미이다.
사용법을 간단히 풀이하면 다음과 같다.
function 함수명( 파라미터, 파라미터 ) {
// 코드 작성
return 리턴값;
};
// ----------
var 함수명 = ( 파라미터, 파라미터 ) => {
// 작성할 코드
return 리턴값;
};이런 형식의 코드는 간단하게 표현하면 굳이 이걸 왜 사용하고 왜 알아야 하는지 모르지만 코드의 길이가 길어지고 함수의 사용빈도가 많아지며 반복적이고 중복적인 객체적 코드를 작성할 경우에 코드가 명시적으로 짧고 명료하게 되는 장점을 가진다.
전체코드 및 결과화면
프로그램을 공부할 때 사칙연산은 항상 샘플코드로 작성하기 알맞다.
여러개의 함수를 만들고 출력까지 할 수 있고, 객체화시키면서 다양한 실험을 할 수 있는 것이 사칙연산이고, 코드가 그렇게 어려운 것은 아니다.
기본적인 사칙연산 코드를 먼저 만들고 화살표 함수를 이용한 코드를 만들어 본다.
아래는 화살표 함수를 이용한 사칙연산에 대한 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수 = () => </title>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
/* without resources */
});
$(window).on('load', function() {
/* with resources */
var fnAdd = (num1, num2) => { return num1 + num2 };
var fnSub = (num1, num2) => { return num1 - num2 };
var fnMulti = (num1, num2) => { return num1 * num2 };
var fnDiv = (num1, num2) => { return num1 % num2 };
var fnRem = (num1, num2) => { return num1 + num2 };
console.log( fnAdd(10, 20) );
console.log( fnSub(10, 20) );
console.log( fnMulti(10, 20) );
console.log( fnDiv(10, 20) );
console.log( fnRem(10, 20) );
});
</script>
</html>화살표함수가 오히려 일반적인 코드처럼 보이는 현상이 생겼다.
코드도 짧고 간결해 졌다.
자바스크립트의 다른 표현식을 사용해도 비슷하게 작성할 수도 있다.
어떻게 사용하는지는 개발자 본인의 선택에 달려있을 것이다.
만약, 여러줄의 코드를 작성한다고 해도 큰 문제는 없을 것이다.
다만, 외부에서 실행하느냐 내부에서 실행하느냐 또는 같은 함수 내의 인식되는 스코프 범위에서 사용할지는 상황에 따라 다를 것이다.
위의 코드에 대한 결과화면은 아래와 같다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 document 객체의 innerHTML innerText 차이 (0) | 2023.02.03 |
|---|---|
| 자바스크립트 화살표 함수 사용법 3가지 인자값과 리턴값 (0) | 2023.01.28 |
| 자바스크립트 파일 정보 읽기 input type file (0) | 2023.01.17 |
| 자바 스프링 url 파라미터 json 객체로 변환하기 (0) | 2023.01.10 |
| 자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기 jquery serialize 메서드 사용 (0) | 2023.01.09 |
댓글