Javascript 공부하기) 배열메소드 2, 구조분해 할당

유튜브 코딩앙마를 보고 작성한 글입니다. 

 

 

Array methods (sort, reduce)

 

arr.sort() : 배열 재정렬. 주의할점은 배열자체가 변경된다. 인수로 정렬로직을 담은 함수를 전달해주면 된다. 

let arr = [27, 8, 5, 13];

arr.sort();
console.log(Arr); //[13,27,5,8]

let arr = [27, 8, 5, 13];

//두 요소를 전달하고, 크기를 비교해서 양수, 0, 음수인지 판단
// a와 b를 비교하고 순서대로 나열해주는것이다. 
function fn(a, b) {
	return a-b;
}

arr.sort(fn);
console.log(Arr); //[5, 8, 13, 27]

위와같은 함수를 직접 사용하기 보다는 Lodash같은 라이브러리를 이용한다. 

_.sortBy(arr); 로 사용한다. 숫자든 문자든 객체든 사용해줄 수 있다. 

 

arr.reduce() : 인수로 함수를 받는다. 

let arr = [1,2,3,4,5];

const result = arr.reduce((prev, cur) => {
	return prev + cur;
}, 0}; //0은 초기값, 0대신 100을 넣으면 100과 배열이 합이 도출된다. 

console.log(result); //15 값이 돌면서 더해지고 나옴

또 다른 예시

let userList = [
 {name : "Mike", age: 30},
 {name : "Tom", age: 10},
 {name : "Jane", age: 27},
 {name : "Sue", age: 26},
 {name : "Harry", age: 43},
 {name : "Steve", age: 60}
];

let result = userList.reduce((prev, cur) => {
 if (cur.age > 19){
	prev.push(cur.name);
}
 return prev;
}, []);

console.log(result); //19세 이상의 사람들이 나온다.

 

arr.reduceRight(); 는 reduce와 동일하나, 배열 우측부터 연산을 한다는 차이점이 있다. 

 

 

 

구조분해 할당 (Destructuring assignment)

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다. 

 

배열구조분해는 아래와 같다. 

let [x, y] = [1, 2];
console.log(x); //1
console.log(y); //2

만일 해당하는 값이 없다면, undefined가 들어간다. 따라서 기본값을 준다면 에러를 미리 방지 할 수 있다. 

 

배열구조분해 : 일부 반환값 무시

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1); //'Mike'
console.log(user2); //'Jane'

 

배열구조분해 : 바꿔치기

let a = 1;
let b = 2;

[a, b] = [b, a];
//c를 따로 만들 필요가 없다.

 

객체 구조 분해 : 객체안의 순서를 바꾸어도 동일하게 동작한다.  

let user = {name: 'Mike', age: 30};

let{name, age} = user;
//let{age, name} = user;

console.log(name); //'Mike'
console.log(age); //30

 

또한 새로운 변수 이름으로 할당 할 수 있다. 

let user = {name: 'Mike', age: 30}
//let {name, age} = user;
let {name: userName, age: userAge} = user;

console.log(userName); //'Mike'
console.log(userName); //30

 

배열과 마찬가지로 기본값을 줄 수 있다. (객체로부터 받은값이 undefined 일때만 기본값이 사용된다. )