웹페이지

JAVASCRIPT STEP 40 - Arrow, Stream

2023. 4. 27. 09:22
728x90

★ 화살표 함수, Arrow Function

  • 자바의 람다 > 익명 객체의 추상 메소드를 표기하는 문법
  • 자바스크립트의 화살표 함수 > 익명 함수를 표기하는 문법
  • 화살표 함수 내의 this는 무조건 window를 참조한다.(**** 조심!!)
  • 화살표 함수를 이벤트에 사용할 때 주의!!!
  • 화살표 함수 = 익명 함수
//3. 화살표 함수 = 익명 함수
const f3 = () => {
    console.log('f3');
};

f3();

 

■  기존 사용 형식

  • 1. 함수 선언문
function f1() {
    console.log('f1');
};

f1();
  • 2. 함수 표현식(리터럴) = 익명 함수
//2. 함수 표현식(리터럴) = 익명 함수
const f2 = function() {
    console.log(f2);
};

f2();

 

■ 화살표 함수를 이용한 다양한 ex)

  • 실행문 1줄 > 블럭 생략
// 실행문 1줄 > 블럭 생략 
const f4 = () => console.log('f4');
  • 매개변수
const f5 = (num) => console.log(num);
const f6 = num => console.log(num);
const f7 = (a,b) => console.log(a+b);
  • 반환값
const f8 = () => { return 100; };
const f9 = () => 200;
  • 버튼을 이용한
document.getElementById('btn1').onclick = () => {
    alert('화살표 함수');
};
  • 이벤트 호출한 주체 > 버튼
//1. event.target ***
//2. event.srcElement
//3. this
//익명 함수를 썼을 경우에는 모두 자신을 가르킴.
alert(event.target);		//button
alert(event.srcElement);	//button
alert(this);			//button

//화살표 함수를 썼을 때
document.getElementById('btn1').onclick = () => {
    alert('화살표 함수');
    alert(event.target);		//button
    alert(event.srcElement);		//button
    alert(this);			//window > 조심해야함..
};
  • 타이머를 사용할 경우
setTimeout(() => {
    alert(this);
}, 3000);

 

★ 스트림, Stream

  • 콜백 메소드, 콜백 함수 > CallBack > 시스템(환경)에 의해서 호출되는 메소드
list.forEach(function(num) {
    console.log(num);
});

list.forEach(num => console.log(num));

list.forEach((item, index) => console.log(item, index));
  • map() : 앞의 요소를 가공해서 다른 요소로 반환
//map()
//- 앞의 요소를 가공해서 다른 요소로 반환
list.map(num => 100).forEach(item => console.log(item));

list.map(num=>num%2 == 0 ? '짝수' : '홀수').forEach(item => console.log(item));

names.map(name => {
    return {
        name : name,
        age : 20,
        address : '서울시'
    };
}).forEach(obj => console.log(obj));
  • filter() : 조건에 부합되는 요소만 반환
//filter()
//- 조건에 부합되는 요소만 반환

list.filter(num => num > 5).forEach(num => console.log(num));
  • sort() : 정렬
console.log(list.sort((a,b) => a-b));
  • find : 요소 검색
const mlist = ['홍길동', '아무개', '하하하', '호호호', '후후후'];

//요구사항] '하'씨가 있습니까?
//1. 기존 사용 하였던 상황
for(let i=0; i<mlist.length; i++) {
    if(mlist[i].startsWith('하')){
        console.log(mlist[i]);
        break;
    }
}
//2. find를 이용한 상황
console.log(mlist.find(name => name.startsWith('하')));

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 42 - Template, Event  (0) 2023.04.27
JAVASCRIPT STEP 41 - CLOSURE  (0) 2023.04.27
JAVASCRIPT STEP 39 - DOM 예제  (0) 2023.04.27
JAVASCRIPT STEP 38 - ManiPulation  (0) 2023.04.26
JAVASCRIPT STEP 37 - EVENT(Dom ver)  (0) 2023.04.26
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 42 - Template, Event
  • JAVASCRIPT STEP 41 - CLOSURE
  • JAVASCRIPT STEP 39 - DOM 예제
  • JAVASCRIPT STEP 38 - ManiPulation
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • DBA
  • 자바
  • 앱개발자
  • 데이터베이스
  • JavaScript
  • it
  • DB
  • 알고리즘
  • 백엔드
  • 개발블로그
  • 프론트엔드
  • ajax
  • 개발자
  • jquery
  • 웹페이지
  • jsp
  • IT자격증공부
  • 웹개발
  • html
  • IT개발자
  • 코딩테스트
  • React
  • IT자격증
  • 정보보안전문가
  • 정보처리기사
  • css
  • 백준
  • 정보처리기사필기
  • java
  • 웹개발자

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 40 - Arrow, Stream
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.