람다식(화살표함수)

화살표함수

• function키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있음

문법

함수 정의

const multiply = ( x, y ) => x * y;
multiply(2, 3);   //결과 6

const arrow = ( x, y ) => {...}; // 매개변수 여러개인 경우
const arrow = x => {...}; // 매개변수 한개인 경우
const arrow = () => {...}; // 매개변수 없는 경우

함수 몸체 정의

• 하나의 문으로 구성되면 중괄호는 생략 가능
• 내부 문이 값으로 평가될 수 있는 표현식은 암묵적으로 반환

//람다식 표현방법
const power = x => x**2
power(2);  //결과 4

//함수 표현방법
const power = function( x ) { return x**2};
power(2); //결과 4

//객체 리터럴을 반환하는 경우
const create = (id, content) => ({id,content});
create(1, 'JS'); //결과 : {id: 1, content: "JS"}

//위와 같은 표현
const create = (id, content) => {return {id, content}; };

const power에서 power는 함수 이름을 가르키며, 일반 함수 표현 방법에 나오는 방식은 익명 함수 표현식이다.

• 화살표 함수는 콜백 함수로서 정의할 떄 유용하며, 일반 함수의 기능을 간략화 했고, this를 편리하게 설계되었다.

  This는 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

화살표 함수와 일반 함수의 차이

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor

• 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없으며, 프로토타입도 생성하지 않는다.

중복된 매개변수 이름을 선언할 수 없음

Array.prototype.filter

• 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출
• 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환
• 원본배열은 변경되지 않음.

const number = [1, 2, 3, 4, 5];
const odds = number.filter(item => item % 2);
console.log(odds); // 결과 : [1, 3, 5]

const number2 = [3, 5, 6, 7, 8];
let allNumber = number.concat(number2); // number, number를 결합

console.log(allNumber); //[1,2,3,4,5,3,5,6,7,8]

function filtered(el, i, a){
  console.log(`요소: ${el}, 인덱스:${i}`);
  if(a.indexOf(el) === i) { //요소와 인덱스가 맞으면 반환
    return a;
  }
}

let result = allNumber.filter(filtered);
console.log(result);

let result2 = allNumber.filter((el, i) =>allNumber.indexOf(el) === i); //한줄로 표현
console.log(result2)

Pythontutor
https://pythontutor.com/visualize.html#mode=display