[Basic] JS - 화살표함수 (Arrow Function) ★★★ (= Arrow함수 = 애로우함수|애로우펑션) (예) () => { statements }

1. Arrow Function 예제 - 덧셈 함수
2. Arrow Function 정의
3. Arrow Function 구문
4. Arrow Function 특징1 - 간략한 표현
5. Arrow Function 특징2 - this 키워드 지정 객체 고정
6. Arrow Function 예제 - map() 함수의 매개변수로 사용된 경우
7. Arrow Function 예제 - jQuery에서 화살표함수 사용 경우
8. 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) => { statements }

(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