(7) 응응.. 그러니까. 아니 요즘 애들은 뭘 그렇게들 줄여쓴다니..(?) 화살표 함수 훑어보기

오늘도 관련 밈 짤과 함께 아래 내용을 훑어보기로 한다!

후... 위 이미지처럼 화살표함수는.. 줄임말의 끝판왕같은느낌이다....
하지만.. 그.. 이 늙은이(?)는 요즘 애들말은 잘 모르겠단마랴!! (어쩔티비)
(공교롭게도 이 화살표함수 또한 비교적 최근에 ES6에 추가된 .. 애송이다..(보다 내가 더 애송이지만..큼큼))

아무튼 최근 프로그래머스에서 문제를 풀고 다른 분들은 어떻게 풀었는지 보다보면... 이 화살표함수 때문에 도저히 어떻게 푸신건지 알 수가 없는 것이다..

그러나 코드를 작성하는 일은.. 최대한 줄이고 간결하게 하는 것이 나도 좋고 남도 좋고 동료도 좋고 소비자도 좋고 모두에게 돌고돌아 좋은 일이므로...

그래서 알아보기로한다.. 화살표함수...

• 화살표 함수 함수 리터럴의 단축 표현 => 화살표함수 (그러나 함수리터럴과 완전히 같은건아님)

  let cup - function(x){return x*x}; //기존 함수 리터럴
  let cup = (x) => {return x*x}; //화살표 함수 표현식 (싱글블록)
  
  //매개변수 지정 방법
  let cup = () => { ... } // 매개변수가 없으면 괄호 생략 X
  let cup = x => { ... } // 매개변수가 하나면 괄호 생략 O
  let cup = (x, y) => { ... } // 매개변수가 다수면 인수끼리 쉼표로 구분
  
  //함수 몸체 지정 방법
  let cup = x => x*x; //함수 몸통 안 문장이 return뿐이면 중괄호, return 생략 O
  
  let cuup = (x, y) => ({a: x, b: y}); 
  //함수 몸통 안 문장이 return 뿐이라도 반환값이 객체리터럴이면 그룹 연산자인 ()로 묶기
  
  let cuup = () => {return {a: x, b:y};} //아래 표현과 동일.
  let cuup = () => ({a: x, b:y}); //객체반환시 소괄호 사용.
  let cuup = () => {
  							const x = 10;
  							const y = 20;
  							return x * y;
  					}; //멀티블록
  
  let cup = (x => x*x)(3); //9
  //즉시 실행함수로 사용 가능

  ---

  • 화살표함수는 익명함수(must), 콜백함수로(possible) 사용 가능 ⇒ 함수 표현식 이용해서 호출

    //익명함수를 함수표현식으로 호출
    let pow = x => x*x;
    console.log(pow(10)); //100
    ----------------------------
    //화살표함수는 콜백함수로 사용 가능하다.
    let numbers = [1, 2, 3, 4, 5, 6, 7];
    
    let oddNumbers = numbers.filter(isOddNumber);
    function isOddNumber(num) {
    		  return num % 2; 
    }
    console.log(oddNumbers);    // [1, 3, 5, 7]
    
    ===
    
    let oddNumbers = numbers.filter(number => number % 2);
    console.log(oddNumbers);    // [1, 3, 5, 7]