자바스크립트의 화살표 함수는 일반적인 함수와 마찬가지로 인자값과 결과값에 따라 만들 수 있다. 동적이고 반복적인 공통된 코드들이 있다면 함수로 만드는 것이 효과적이고 화살표 함수를 이용한다면 코드를 간략화할 수 있으며, 객체지향적으로 코드를 만들 수 있다. 이것은 추후 유지보수 측면에서도 유리하다.
자바스크립트 화살표 함수 사용법 3가지
인자값과 리턴값
프로그래밍 개발에서 필요한 것은 기교도 있겠지만 필요한 코드를 함수로 만들면 반복적인 코딩을 하지 않아도 된다. 편해진다는 것.
이전에 다뤘던 자바스크립트의 화살표 함수도 이런 것들이 가능하고, 반복적인 부분을 함수로 만들면 좋다.
함수를 만드는 방법은 3가지로 다른 프로그래밍 언어와 방식은 같다.
함수는 필요에 따라 인자값이 있을 수도 있고 없을 수도 있다. 리턴값도 마찬가지다.
화살표 함수
자바스크립트에서 화살표 함수를 사용하면 길어지는 코드를 간략화 할 수 있는 효과가 있다.
아주 간단한 함수들은 화살표 함수를 사용하여 다양하게 사용할 수 있다.
코드가 길어진다면 다른 얘기가 되겠지만 객체지향적으로 개발을 하게 된다면 화살표 함수는 꽤나 요긴한 기능이다.
아래는 이전에 다루었던 자바스크립트의 화살표 함수에 대한 내용이다.
자바스크립트 화살표 함수 뜻과 의미 = () => arrow function
자바스크립트의 화살표 함수는 = () => 기호를 사용한다. 의미는 함수명 = (인자값) => { 코드 } 의 형태로 사용한다. 화살표 함수 외에 비슷한 표현식도 있기에 난해할 수 있지만 자바스크립트 특유
lngnat.tistory.com
3가지 상황에 따른 사용법
자바스크립트에서 함수를 만들 때 인자값과 리턴값이 필요할 수도 그렇지 않을 수도 있다.
단순히 호출만 해서 처리를 한다면 함수 자체만 필요하지만 인자값과 같은 파라미터에 대해 동적으로 변화하고 결과값에 따른 처리가 필요하다면 함수에 인자값과 리턴값을 작성하면 된다.
아래는 함수를 사용하는 3가지 형태를 보여준다.
- 인자값 없음, 리턴값 없음
함수명 = () => { 코드 } - 인자값 있음, 리턴값 없음
함수명 = ( 인자값 ) => { 코드 }; - 인자값 있음, 리턴값 없음
함수명 = ( 인자값 ) => { 코드 return 리턴값; };
인자값이 없고 리턴값이 없는 경우
단순히 출력만 하는 자바스크립트 화살표 함수는 다음과 같다.
인자값도 없고, 리턴값도 없으며 단순히 출력만 하는 역할을 한다.
var fnConsoldLog = () => {
console.log(`단순히 메세지를 출력합니다.`);
};
fnConsoldLog();인자값이 있고 리턴값이 없는 경우
단순 출력을 위한 함수보다는 인자값에 따라 결과값에 변화를 주고 싶을 것이다.
인자값을 넣는 갯수는 상관이 없으며 콤마를 사용하여 구분한다.
아래는 2개의 인자값을 받아 출력하는 예제이다.
참고로 출력문은 자바스크립트의 문자열 리터럴 ( javascript string literal ) 를 사용하였다.
var fnConsoldLog = (pTitle, pDocument) => {
console.log(`인자값을 받아 메세지를 출력합니다.`);
console.log(`입력값 : ${pTitle}`);
console.log(`출력값 : ${pDocument}`);
};
fnConsoldLog(`제목`, `내용`);인자값이 있고 리턴값이 있는 경우
아래는 인자값도 있고, 리턴값도 있다.
2개의 인자값을 받고 서로 연결한 문자열을 리턴하여 다시 출력하고 있는 코드이다.
코드를 단순화하기 위해 자바스크립트 문자열 리터럴을 사용하였다.
var fnConsoldLog = (pTitle, pDocument) => {
console.log(`인자값을 받아 값을 리턴합니다.`);
console.log(`입력값 : ${pTitle}, ${pDocument}`);
var returnValue = `${pTitle}-${pDocument}`;
return returnValue;
};
var returnText = fnConsoldLog(`제목`, `내용`);
console.log( `리턴값 : ${returnText}` );전체코드 및 결과화면
위의 내용까지 봤다는 이제는 전체 코드를 살펴보도록 한다.
아래는 위에서 언급된 자바스크립트의 화살표 함수에 대한 전체코드이다.
일반적으로 사용하는 함수의 모양과 크게 다르지 않고 단순히 화살표만 추가된 형태를 볼 수 있다.
모양을 보면 알 수 있듯이 어떻게 사용하느냐에 따라 코드를 단순화 시킬 수도 있고, 객체지향적 개발에서 효과적일 수 있음을 보여준다.
<!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 */
console.log(`----------------------------------------`);
var fnConsoldLog = () => {
console.log(`단순히 메세지를 출력합니다.`);
};
fnConsoldLog();
console.log(`----------------------------------------`);
var fnConsoldLog = (pTitle, pDocument) => {
console.log(`인자값을 받아 메세지를 출력합니다.`);
console.log(`입력값 : ${pTitle}`);
console.log(`출력값 : ${pDocument}`);
};
fnConsoldLog(`제목`, `내용`);
console.log(`----------------------------------------`);
var fnConsoldLog = (pTitle, pDocument) => {
console.log(`인자값을 받아 값을 리턴합니다.`);
console.log(`입력값 : ${pTitle}, ${pDocument}`);
var returnValue = `${pTitle}-${pDocument}`;
return returnValue;
};
var returnText = fnConsoldLog(`제목`, `내용`);
console.log( `리턴값 : ${returnText}` );
});
</script>
</html>위의 코드에 대한 결과화면은 다음과 같다.
'programming > javascript' 카테고리의 다른 글
| 문자열 html 태그 동적 추가 방법 textarea to div 화면 표시 (0) | 2023.02.09 |
|---|---|
| 자바스크립트 document 객체의 innerHTML innerText 차이 (0) | 2023.02.03 |
| 자바스크립트 화살표 함수 뜻과 의미 = () => arrow function (0) | 2023.01.28 |
| 자바스크립트 파일 정보 읽기 input type file (0) | 2023.01.17 |
| 자바 스프링 url 파라미터 json 객체로 변환하기 (0) | 2023.01.10 |
댓글