목차
Arrow Function 예제 - 덧셈 함수 Arrow Function 정의 Arrow Function 구문 Arrow Function 특징1 - 간략한 표현 Arrow Function 특징2 - this 키워드 지정 객체 고정 Arrow Function 예제 - map() 함수의 매개변수로 사용된 경우 Arrow Function 예제 - jQuery에서 화살표함수 사용 경우 Arrow Function 예제 - 배열 순서 랜덤 적용
Arrow Function 예제 - 덧셈 함수
<script>
var sum;
sum = (a,b) => {
return a+b;
}
c = sum(1,2);
document.write(c);
</script>
결과보기
Arrow Function 정의
1.
함수를 더 짧게 표현 가능 .
2.
this 키워드가 화살표함수 정의하는 객체로 고정. .
그런 점에서, 화살표함수엔 this가 없다고 볼 수 있음.
cf.일반함수 경우엔 함수를 호출한 객체를 가리킴.
3.
화살표함수는 항상 익명함수임.
즉, 함수명이 없음.
4.
메서드함수 아닌 곳에 가장 적합.
따라서, 생성자로는 사용 불가함.
5.
ES6 때 도입되었으며,
Edge 12 이상 주요 최신 브라우저 모두 지원.
[Arrow Function 관련 주소]
엘리 님 Arrow function 강의
https://youtu.be/e_lU39U-5bQ
모질라 Arrow function 강의
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
코드종 님 - 화살표 함수에 없는 것 : 함수명, this, arguments
https://youtu.be/4zjKltnIBug
Arrow Function 구문
[구문의미]
a, b, ... : 매개변수 statements : 여러 실행구문 1statement : 1개 실행구문 return : 함수 결과값 반환 명령어 [기본구문]
1.
(a, b, ... ) => { return statements }
2.
실행구문이 달랑 return 구문 1개인 경우, 빨간색 중괄호 및 return 키워드 생략 가능.
(a, b, ... ) => { return 1statement ; }
3.
매개변수가 1개인 경우, 빨간색 소괄호 생략 가능.
( a) => { statements }
4.
매개변수 없는 경우, 파란색 소괄호 필수.
() => { statements }
[고급구문]
5.
함수 실행구문이 객체인 경우, 객체 표현을 소괄호로 감쌈.
(a, b, ...) => ( {name: value})
6.
rest 매개변수 및 매개변수 기본값 지정 지원.
(a, b, ...rest
(a = A , b, …, z = Z ) => { statements }
7.
비 구조화된 매개변수 목록 지원.
var f = ([a, b] = [1, 2], {x: c} = {x: a + b} ) => a + b + c;
f(); // 6
Arrow Function 특징1 - 간략한 표현
[일반함수]
<p id="hz"></p>
<script>
var homzzang;
homzzang = function() {
return "홈짱닷컴 Homzzang.com";
}
document.getElementById("hz").innerHTML = homzzang();
</script>
[화살표함수1] 실행구문 1개면 빨간색 부분도 생략 가능. [※ 화살표 함수2 참고]
<p id="hz"></p>
<script>
var homzzang;
homzzang = () => {
return "홈짱닷컴 Homzzang.com";
}
document.getElementById("hz").innerHTML = homzzang();
</script>
결과보기
[화살표함수2] - 함수 실행구문이 달랑 1개면, 위 빨간색 코드 제거해 더 간략히 표현 가능.
<p id="hz"></p>
<script>
var homzzang;
homzzang = () => "홈짱닷컴 Homzzang.com";
document.getElementById("hz").innerHTML = homzzang();
</script>
결과보기
[화살표함수3] - 매개변수 존재 시, 매개변수 감싸는 () 생략 가능. [※ 화살표 함수4 참고]
<p id="hz"></p>
<script>
var homzzang;
homzzang = ( host) => "홈짱닷컴 " + host;
document.getElementById("hz").innerHTML = homzzang("Homzzang.com");
</script>
결과보기
[화살표함수4] - 매개변수 존재해서, 매개변수 감싸는 () 생략 가능.
<p id="hz"></p>
<script>
var homzzang;
homzzang = host => "홈짱닷컴 " + host;
document.getElementById("hz").innerHTML = homzzang("Homzzang.com");
</script>
결과보기
Arrow Function 특징2 - this 키워드 지정 객체 고정
[일반함수] - this 키워드는 함수 호출한 객체를 가리킴. (즉, 호출한 객체에 따라 달라짐.)
<button id="btn">클릭</button>
<p id="hz"></p>
<script>
var homzzang;
homzzang = function() {
document.getElementById("hz").innerHTML += this ;
}
// window 객체가 함수 호출.
window.addEventListener("load", homzzang);
// 결과값: [object Window]
// button 객체가 함수 호출.
document.getElementById("btn").addEventListener("click", homzzang);
// 결과값: [object HTMLButtonElement] ★
</script>
결과보기
[화살표함수] - 항상 화살표 함수를 정의한 객체 가리킴. (즉, 함수 정의한 객체로 고정됨.)
<button id="btn">클릭</button>
<p id="hz"></p>
<script>
var homzzang;
homzzang = () => {
document.getElementById("hz").innerHTML += this ;
}
// window 객체가 함수 호출.
window.addEventListener("load", homzzang);
// 결과값: [object Window]
// button 객체가 함수 호출.
document.getElementById("btn").addEventListener("click", homzzang);
// 결과값: [object Window] ★
</script>
결과보기
※ JS 함수 https://homzzang.com/b/js-14
※ 다른 예: https://homzzang.com/b/react-4
Arrow Function 예제 - map() 함수의 매개변수로 사용된 경우
<script>
const hz = [
'HTML',
'CSS',
'JS',
'홈짱닷컴',
'Homzzang.com'
];
var x = hz .map (a => a .length );
console.log(x);
</script>
결과보기
결과값: Array [4, 3, 2, 4, 12]
※ a : 매개변수. (따라서, 아무 글자나 입력하면 됨.)
※ 파란색 구문의 원래 표현: var x = hz.map(( a) => {return a.length} );
Arrow Function 예제 - jQuery에서 화살표함수 사용 경우
<script src="http://code.jquery.com/jquery-latest.js"></script>
<input type="text" name="wr_1" value="회원" id="wr_1" class="frm_input" size="30">
<script>
$(()=> {
$("#wr_1").on("focus ", ()=> {
$("#wr_1").val("관리자");
});
});
</script>
결과보기
PS. 주의: this 키워드 사용 시, 값이 안 바뀜. (이유: this는 Window 객체이기 때문.)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<input type="text" name="wr_1" value="회원" id="wr_1" class="frm_input" size="30">
<script>
$(()=>{
$("#wr_1").on("focus", ()=>{
this .val("관리자");
});
});
</script>
결과보기
관련글 (200609) https://sir.kr/qa/363029
Arrow Function 예제 - 배열 순서 랜덤 적용
※ JS엔 shuffle() 함수 존재 X (∴ 아래 사용자정의함수 필요.)
function shuffle(array ) {
array .sort (() => Math.random() - 0.5);
}
var nums = [1, 2, 3];
shuffle(nums);
console.log (nums);
결과보기
강한남v 님 (220217) https://sir.kr/qa/449765
