[JS] sort, map은 화살표를 좋아해

추남도 석류를 좋아했다,,,☆

 

1. 개념

함수식을 간단하게 표현하는 방식으로

생김새에서 그 이름이 유래됨

 

2. 작동 방식

예시: 합 구하기

기존 함수

let standard = function(a, b) {
  return a+b;
};

alert(standard(1, 2)); // 3

화살표 함수

let sum = (a, b) => a + b;

alert(sum(1, 2)); // 3

 

3. 적용 사례

1) sort()

• 개념: 배열을 정렬하는 함수로, 내림차순으로 정렬하기 위해서는 매개변수를 입력해야 함.
         (오름차순은 매개변수 생략)
• 형태: 배열.sort(function(a, b)) {}
• 매개변수 function(a, b)와 a-b값의 의미
  • 배열에 a, b라는 두 값만 존재하지 않는 경우가 많지만 두 개의 변수만 다룬다. 
  • 배열 [4, 5, 3, 11]이 있을 때 모든 값을 동시에 비교하여 정렬하지 않고
    앞에서부터 두 값씩 뽑아서( ex. a =>4  / b =>5 ) 비교하기 때문. 
  • 이 때, a-b 값이 양수, 0, 음수냐에 따라 두 값의 크기를 파악하는 것.

 

기존 함수

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

화살표 함수

var numbers = [4, 2, 5, 1, 3];

numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 2, 3, 4, 5]

 

 

2) map()

• 개념: map()은 배열에 속한 모든 데이터에 괄호 안의 함수를 적용하는 함수
• 내재 함수를 활용할 때는 사용이 쉽다.
  (*parseInt는 까다롭다: https://dororongju.tistory.com/71)
  제곱근 구하는 함수 Math.sqrt의 사례 

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]

• 단, 새로운 함수를 만들 때에 화살표 함수를 유용하게 활용할 수 있다.

기존 함수

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

console.log(nubmers); // [1, 4, 9]
console.log(doubles); // [2, 8, 18]

화살표 함수

var numbers = [1, 4, 9];
var doubles = numbers.map((element) => element *2);


console.log(numbers); // [1, 4, 9]
console.log(doubles); // [2, 8, 18]

 

코드를 쓰기에도 보기에도 유용해서 자주 쓸 것 같다!