JavaScript

[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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인