JAVASCRIPT STEP 40 - Arrow, Stream

★ 화살표 함수, 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('하')));