• Q&A
  • 회원가입
  • 로그인

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

842  

화살표함수 예제

 

<script>

var sum;

sum = (a,b) => {

    return a+b;

}

c = sum(1,2);

document.write(c);

</script>

 

결과보기


 

화살표함수 소개

 

1. 

함수를 더 짧게 표현 가능

 

2. 

this 키워드가 화살표함수 정의하는 객체로 고정. 
즉, 함수를 호출한 객체에 바인딩 (=구속) 안 됨
.

그런 점에서, 화살표함수엔 this가 없다고 볼 수 있음.

cf.
일반함수 경우엔 함수를 호출한 객체를 가리킴.
즉, 함수를 호출한 객체에 바인딩 (=구속) 됨.

 

3.

화살표함수는 항상 익명함수임. 

즉, 함수명이 없음.

 

4.

메서드함수 아닌 곳에 가장 적합.

따라서, 생성자로는 사용 불가함.

 

5. 

ES6 때 도입되었으며,

Edge 12 이상 주요 최신 브라우저 모두 지원.

 

 

화살표함수 구문

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

 

 

화살표함수 특징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>

 

결과보기

 

화살표함수 특징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

 

화살표함수 예제 - 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});

 

 

cf. 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

 

PS.

 

엘리 님 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

 



찾아주셔서 감사합니다. Since 2012