TIL 20211008

배열과 메서드

요소 추가/제거 메서드

arr.push(..items)
arr.pop()
arr.shift()
arr.unshift(..items)

splice

delete obj.key는 키에 상응하는 값을 지울 뿐..
배열의 길이가 줄어들지 않음

arr.splice(index[, deleteCount, elem1, ..., elemN])

let arr = [ 'I', 'study', 'JavaScript'];
arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거
alert(arr); // ['I', 'JavaScript']

splice메서드의 deleteCount를 0으로 설정하면
요소를 제거하지 않으면서 새로운 요소 추가 할수 있음

let arr = ['I', 'study', 'JavaScript']; 

// 인덱스2부터 0 개의 요소를 삭제 후 'complex'와 'language' 추가
arr.splice(2, 0, 'complex', 'language');

alert(arr); // 'I', 'study', 'complex', 'language', 'JavaScript'

! 음수 인덱스도 사용할 수 있음.

let arr = [ 1, 2, 5 ];

// 인덱스 -1부터 (배열 끝에서부터 첫번째 요소) 0개 삭제, 3과 4 추가
arr.splice(-1, 0, 3, 4);

alert(arr); // 1,2,3,4,5

slice

arr.slice 는

arr.slice([start], [end])

'start'인덱스부터('end'를 제외한) 'end'인덱스까지의 요소를 복사한
새로운 배열을반환..

arr.slice는 문자열 메서드인 str.slice와 유사하게 동작.
arr.slice는 서브문자열substring 대신 서브배열subarray을 반환..

concat

arr.concat은 기존의 배열의 요소를 사용해 새로운 배열을 만들거나 요소를 추가하고자 할 떄...

arr.concat(arg1, arg2...)

let arr = [1, 2];
// arr 모든요소와 [3, 4] 를 한데 모아 새로운 배열 
alert(arr.concat([3, 4])); // 1,2,3,4

// arr 모든 요소와 [3,4] [5,6] 모두 모아 새로운 배열
alert(arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6

// arr의 모든 요소와 [3, 4]와 5와 6 한데 모은 새로운 배열
alert(arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

concat메서드는 제공받은 배열의 요소를 복사해 활용.
객체가 인자로 넘어오면(배열처럼 보이는 유사 배열 객체더라도) 분해되지 않고 통으로 복사되어 더해짐..

forEach 로 반복작업하기

arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게해줌

arr.forEach(function(item, index, array) {
	// 요소에 뭔가 할 수 있음
});

['머리', '어깨', '무릎'].forEach(alert);

배열 탐색하기

indexOf, lastIndexOf와 include

arr.indexOf 와 arr.lastIndexOf, arr.includes는 같은 이름을 가진
문자열 메서드와 문법이 동일.. 연산 대상이 문자열이 아닌 배열의 요소라는 점만 다름.

arr.indexOf(item, from) 는 인덱스 from부터 시작해서 item요소 를 찾음. 요소를 발견하면 해당 인덱스를 반환하고, 아니면 -1을 반환.

arr.lastIndexOf(item, from) 위와 동일하나 끝에서부터 검색..
arr.includes(item, from) 는 인덱스 from부터 시작해 item이 있는지를 검색하는데 해당요소를 발견하면 true를 반환

let arr = [1, 0, false];

alert(arr.indexOf(0)); // 1
alert(arr.indexOF(false)); // 2
alert(arr.indexOf(null)); // -1
alert(arr.includes(1)); // true

위 메서드들은 요소를 찾을 때 완전 항등 연산자 === 을 사용한다는 점,,
요소의 위치 말고 존재 여부확인은 arr.includes 사용고고싱..
includes는 NaN 도 제대로 처리한다는 점에서 indexOf/lastIndexOf 와
약간의 차이가 있음..

const arr = [NaN];
alert(arr.indexOf(NaN)); // -1 
alert(arr.includes(NaN)); // true 

find와 findIndex

let result = arr.find(function(item, index, array) {
	// true가 반환되면 반복이 멈추고 해당요소 반환함
    // 조건에 해당하는 요소가 없으면 undefined반환
});

item - 함수를 호출할 요소
index - 요소의 인덱스
array - 배열의 자기자신

let users = [
	{id: 1, name: 'John'},
    {id: 2, name: 'Jane'},
    {id: 3, name: 'Jack'},
];
let user = users.find(item => item.id == 1);
alert(user.name); // John

filter

조건을 충족하는 요소가 여러개라면 arr.filter(fn)를 사용하면 됨..
filter는 find와 문법이유사하지만, 조건에 맞는 요소 전체를 담은 배열을
반환한다는 점에서 차이가 있음

let users = [
	{id:1, name: 'John'},
	{id:2, name: 'Jane'},
	{id:3, name: 'Jack'},
 ];
 
 // 앞쪽 사용자 두 명을 반환
 let someUsers = users.filter(item => item.id < 3);
 
 alert(someUsers.length); // 2

배열을 변형하는 메서드

배열을 변형시키거나 요소를 재 정렬해주는 메서드..를 알아보자

map

arr.map은 유용성과 사용빈도가 아주 높은 메서드 중 하나...
배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환

let result = arr.map(function(item, index, array) {
// 요소 대신 새로운 값을 반환함..
});

아래는..각 요소(문자열)의 길이를 출력해줌

let lengths= [ 'apple','banana','cherry'].map(item=> item.length);
alert(lengths); // 5,6,6

sort(fn)

arr.sort()는 배열의 요소를 정렬. 배열 자체가변경..

let arr = [ 1, 2, 15 ];

arr.sort(); //  arr 내부가 재정렬
alert(arr); // 1, 15, 2

요소가 문자열로 취급되어 재정렬되기 때문

function compareNumeric(a,b) {
	if(a>b) return 1;
    if(a==b) return 0;
    if(a<b) return -1;
}

let arr = [ 1, 2. 15 ];
arr.sort(compareNumeric);
alert(arr); // 1, 2, 15

reverse

arr.reverse는 arr의 요소를 역순으로 정렬시켜주는 메서드

let arr = [ 1, 2, 3, 4, 5];
arr.reverse();

alert(arr); // 5,4,3,2,1

split 과 join

let names = [ 'john, jane, jack' ];
let arr = names.split(', ');

for(let name of arr) {
	alert(`${name}에게 보내는메시지`); // john에게 보내는 메시지
}

reduce와 reduceRight

forEach, for, for..of를 사용하면 배열 내 요소를 대상으로 반복작업 할수 있음
각 요소를 돌면서 반복작업수행, 결과물을 새로운 배열형태로 얻으려먼 map사용

arr.reduce와 arr.reduceRight도 이런 메서드들과 유사함. but 사용법 복잡.
배열을 기반으로 값 하나를 도출할 때 사용..

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
  }, [initial]);

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

자바스크립트에서 배열은 독립된 자료형으로 취급되지않고 개체헝에 속함
typeof로는 일반객체와배열 구분할 수 없어

alert(typeof {}); // object
alert(typeof []); // object

alert(Array.isArray {}); // false
alert(Array.isArray []); // true

배열 메서드와 'thisArg'

함수를 호출하는 대부분의 배열 메서드(find, filter, map등.. sort는 제외)는 thisArg라는
매개변수를 옵션으로 받을 수 있다