배열과 메서드 2

배열 변형하는 메서드

 

1. map(사용 빈도가 아주 높은 메서드 중 하나)

: 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 새로운 배열로 반환해준다

 

➡️ let result = arr.map(function(item, index, array) { … });

 

// 각 요소의 길이를 출력

let lengths = [ “bbosong”, “namsoon”, “kiki” ].map(item => item.length);

 

console.log(lengths); // 7, 7, 4

 

1. sort(fn)

: 배열의 요소를 정렬해주는데 배열 자체가 변경된다(재정렬)

 

// 요소가 문자열로 취급되어 재정렬(기본)

let arr = [1, 2, 15];

 

arr.sort();

console.log(arr); // 1, 15, 2

// 문자열로 취급되기 때문에 15는 앞글자 1이 2보다 작으므로 큰 순으로 1, 15, 2로 반환된 것이다

 

// sort() 안에 함수를 넣을 땐 반드시 인수 두 개와 반환값이 존재해야 한다

// 이때 사용하는 함수는 정렬 기준을 정의해주는 정렬 함수(ordering function)

let compareNumberic = (a, b) => {

if(a > b) {

console.log(1);

} else if(a == b) {

console.log(0);

} else if(a < b) {

console.log(-1);

}

}

 

// 여기서 반환값 숫자들은 배열의 index를 나타내는 것인가?

// 내부 정렬 동작 원리를 알 필요가 없다는 것은 결국 함수와 조건식만 잘 세우면 된다는 말인가?

// 재정렬 = 새로운 배열 ?

 

let arr = [ 1, 2, 15]

 

arr.sort(compareNumberic);

console.log(arr); // 1, 2, 15

 

*문자열에선 localeCompare을 사용하라 : 유니코드 기준으로 글자를 비교하는 알고리즘이다

 

왜 사용해야 할까? 발음 구별 기호 언어에 대응하기 위해서

 

let countries = ['Österreich', 'Andorra', 'Vietnam'];

 

console.log( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (제대로 정렬되었네요!)

 

1. reverse

: 배열의 요소를 역순으로 정렬시켜주는 메서드

 

let arr = [  1, 2 ,3 ];

arr.reverse();

 

console.log(arr); // 3, 2, 1 

 

1. split

: 구분자(delimiter) delim을 기준으로 문자열을 쪼개주는 메서드

 

// 여러 수신자를 구분하여 메세지 전달하기

// 쉼표와 공백 문자열이 구분자

let names = ‘Bilbo, Gandalf, Nazgul’;

 

let arr = names.split(‘, ‘);

 

for (let name of arr) {

console.log(`${name}에게 보내는 메세지`);

}

 

// 두번째 인수는 index를 받아 길이를 제한해 요소를 무시할 수 있게 해준다(자주 사용되진 않는다)

 

// 문자열을 글자 단위로 분리

let str = “test”

console.log(str.split(‘’)); // t, e, s, t

 

1. join

: split과 반대 역할을 하는 메서드로 인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어 준다

 

let arr = [‘Bilbo’, ‘Gandalf’, ‘Nazgul’];

 

let oneStr = arr.join(‘;‘);

console.log(str); // Bilbo;Gandalf;Nazgul

 

1. reduce & reduceRight

: 배열을 기반으로 값 하나를 도출할 때 사용한다

 

➡️ let value = arr.reduce(function(accumulator, item, index, array) {

}, [initial]);

 

*적용 결과는 다음 함수 호출 시 사용된다

 

• accumulator : 이전 함수 호출 결과(= 다음 함수 호출 시 첫번째 인수)
• initial : 함수 최초 호출 시 사용되는 초기값(option 이지만 항상 명시하라)
• item : 현재 배열 요소
• index : 요소의 위치
• array : 배열

 

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

 

let result = arr.reduce((sum, current) => sum + current, 0)

console.log(result); // 15

 

1)초기값 0이 sum에 할당, 요소 1이 할당 되어 sum = 1

2)sum 1과 요소 2가 할당되어 sum = 3

3)sum 3과 요소 3가 할당되어 sum = 6

4)sum 6과 요소 4가 할당되어 sum = 10

5)sum 10과 요소 5가 할당되어 sum = 15

 

이것이 바로 ! 이전 함수 호출 결과가 곧 다음 함수의 첫번째 인수가 되는 것이다

 

reduceRight는 말그대로 reduce와 같은 기능이지만 배열의 오른쪽부터 연산을 수행한다는 것이 다른점이다 

 

Array.isArray로 배열 여부 알아내기

 

console.log(typeof {} === typeof []); // true, 둘다 객체이므로

 

Array.isArray : 배열인지 아닌지 감별해내는 메서드

console.log(Array.isArray({})); // false

console.log(Array.isArray([])); // true

 

배열 메서드와 ‘thisArg’

• sort를 제외한 대부분의 메서드에는 thisArg 라는 매개변수를 옵션으로 받을 수 있다
• thisArg는 선택적으로 사용할 수 있는 마지막 인수이다

 

활용도)

arr.find(function, thisArg) 

arr.fiter(function, thisArg)

arr.map(function, thisArg)

 

• thisArg는 function의 this가 된다

 

let army = {

minAge: 18,

maxAge: 27,

canJoin(user) {

return user.age >= this.minAge && user.age < this.maxAge;

}

};

 

 

let users = [

{age: 16},

{age: 20},

{age: 23},

{age: 30},

];

 

let soldiers = user.filter(army.canJoin, army);

 

console.log(soldiers.length); // 2

console.log(soldiers[0].age); // 20

console.log(soldiers[1].age); // 23

 

대체로 users.filter(user => army.canJoin(user)) 사용해도 되지만 thisArg 가 더 쉬운 방법이긴 하다… (대체 방법도 쉬운거 같은데…)