[Javascript] Skill up

화살표 함수 (Arrow Function)

: 기존의 방식은 function 함수명(인자) { ... 코드 ... } 형태인 반면 '=>' 기호를 사용하여 함수를 정의하는 새로운 방법

 

// 기존의 함수 선언 방법
function Eat(food){
 	return food * 0.9;
}

// 화살표 함수를 이용한 방법 1
const Eat1 = function (food) {
	return food * 0.9
}

// 화살표 함수를 이용한 방법 2
const Eat2 = food => {
	return food * 0.9
}

// 화살표 함수를 이용한 방법 3
const Eat3 = food => food * 0.9;

 

 

 

Array 내장 함수 

- Sort

: 사용자가 정의한 기준으로 배열 각 요소들의 순서를 재정렬 하는 것, 기본적으로 오름차순으로 정렬함

 

문자형 데이터를 정렬할 경우

 

let products = ["Banana", "Carrot", "Diamond", "Apple", "Egg"];
products.sort() // --> ["Apple", "Banana", "Carrot", "Diamond", "Egg"] 순으로 정렬됨

 

 

숫자형 데이터를 정렬할 경우

 

let numbers = [5,96,20,73,48,11]
numbers.sort() // --> [11, 20, 48, 5, 73, 96] 순으로 정렬됨

 

위와 같은 결과값이 나오는데 자바스크립트는 기본적으로 각 요소를 문자로 인식해서 오름차순 정렬하기 때문에 코드를 아래와 같이 작성해야 함

 

let numbers = [5,96,20,73,48,11]
numbers.sort(function(a, b){ return a - b });

 

위에서 작성된 코드는 아래와 같은 순서로 정렬이 됨

 

 

1. numbers 배열의 첫번째 값과 두번째 값을 비교함 5 - 96 = -91 인 음수값이므로 두 요소의 위치를 변경하지 않음
   변경 전 : [5, 96, 20, 73, 48, 11]
   변경 후 : [5, 96, 20, 73, 48, 11]
2. numbers 배열의 다음 위치인 두번째 값과 세번째 값을 비교함, 96 - 20 = 76 인 양수값이므로 두 요소의 위치를 변경함
   변경 전 : [5, 96, 20, 73, 48, 11]
   변경 후 : [5, 20, 96, 73, 48, 11]
3. 세번째 값과 네번째 값 비교, 96 - 73 = 23 인 양수값이므로 두 요소의 위치를 변경함
   변경 전 : [5, 20, 96, 73, 48, 11]
   변경 후 : [5, 20, 73, 96, 48, 11]
4. 네번째 값과 다섯번째 값 비교, 96 - 48 = 48 인 양수값이므로 두 요소의 위치를 변경함
   변경 전 : [5, 20, 73, 96, 48, 11]
   변경 후 : [5, 20, 73, 48, 96, 11]
5. 다섯번째 값과 여섯번째 값 비교, 96 - 11 = 85 인 양수값이므로 두 요소의 위치를 변경함
   변경 전 : [5, 20, 73, 48, 96, 11]
   변경 후 : [5, 20, 73, 48, 11, 96]
6. 배열 내 모든 값을 순회했다면 다시 1번으로 넘어가 더 이상 요소 간 위치변경이 없을 때 까지 진행함
7. 정렬이 끝나게 되면 최종적으로 [5, 11, 20, 48, 73, 96] 이라는 결과를 얻게됨

 

배열 내의 요소를 단순히 역순으로 정렬하고자 한다면 reverse() 함수를 사용하면 됨

 

let numbers = [5, 11, 20, 48, 73, 96]
numbers.reverse(); // --> [96, 73, 48, 20, 11, 5] 순으로 정렬

 

 

- filter()

: 배열에서 특정 조건을 만족하는 값들만 추려내 새로운 배열을 반환하며, 원본 데이터의 변경은 하지 않고 새로운 배열을 만들어 반환함

 

let numbers = [5, 11, 20, 48, 73, 96]

let newNumbers = numbers.filter(function(num){
    return num > 30;
});  // --> newNumbers 에 [48, 73, 96] 의 새로운 배열을 받는다

 

 

 

Spread Operator

: 배열, 문자열과 같이 *iteration 한 형태의 데이터 집합을 분해하여 사용할 수 있게함, 사탕이 든 바구니에서 사탕만 취하는 것과 비슷함

 

※ iteration 한 형태란 단일 값으로만 이뤄진 변수가 아닌 변수 내에 둘 이상의 값을 가지는 것들을 말함

예시)

var test1 = 20         --> X

var test2 = [10, 20]  --> O

var test3 = ['a', 'b']  --> O

 

let arr1 = [4, 5, 6];
let arr2 = [1, 2, 3];
let arr3 = [...arr2, ...arr1]; // --> arr3 는 [1, 2, 3, 4, 5, 6] 값을 가지게 됨
let arr4 = [arr2 + arr1];      // --> arr4 는 [[1,2,3], [4,5,6]] 값을 가지게 됨