[Array] 배열 다루기 (Concat/ Join/ Filter/ Find/ Map&forEach, Reduce, Slice)

스스로 배열에 대한 기본학습이 부족한 듯 하여, 추가적인 학습을 하고 기록을 시작함. 2021.03.18

1. concat

const items = [1,2];  // output [1,2]
const newItems = items.concat(3,[4],[[5]]);  // output [1,2,3,4,[5]]

concat	요약
사용시기	새 배열에 Element 추가
원본 조작 여부	X
Return	O
특징	parameter 1번 분해
주의사항	배열을 추가하려면, [[element]] 형태로 감싸야 함.

1. Concat은 원본을 조작하지 않는다.
2. Return 있음.
3. 입력되는 parameter를 1번 분해한다. (*코드에서 [4] item이 배열이 아니라, element로 저장되는 것을 보면 알 수 있다.

 

2. join

const names = ['Shane', 'Alan', 'Osbourne'];

// 보통의 방식
console.log(names[0] + ' ' + names[1] + ' ' + names[2]);

// join 방식
console.log(names.join(' ')); // Shane Alan Osbourne
console.log(names.join('-')); // Shane-Alan-Osbourne
console.log(names.join('')); // ShaneAlanOsbourne

// 디폴트 separator: comma(,)
console.log(names.join()); // Shane,Alan,Osbourne

// 이런 방식을 가장 많이 쓰긴 할 듯...?
console.log(names.join(', ')); // Shane, Alan, Osbourne

// 다른 메서드와 함께 사용한 예제
const name = 'shane osbourne';
const upper = name.split(' ')
 .map(x => x.charAt(0).toUpperCase() + x.slice(1))
 .join(' ');
console.log(upper); // Shane Osbourne

Join	요약
사용시기	문자열을 합칠 때
원본 조작 여부	O
Return	X
특징	parameter 1번 분해
주의사항	배열 요소 값이 null 이거나 undefined 일 경우, 빈 문자열을 return. 특별한 주의사항 발견 시, 추가 기록하겠음.

1. 원본을 조작한다.
2. 다른 함수와 조합해서 사용하면 유용하다.

 

3. filter

filter 메소드는 이름 그대로 element를 필터링 것이 목적임.

// 정수 배열에서 5의 배수인 정수만 모으기
const arr = [4, 15, 377, 395, 400, 1024, 3000];
const arr2 = arr.filter((n) => {
    return n % 5 == 0;
});
console.log(arr2); // [15, 395, 400, 3000]

콜백 함수의 리턴은 boolean.
리턴이 true인 요소만 모아서 새로운 배열을 만듭니다. 생략하면? 리턴은 undefined이므로 false가 됩니다.

만족하는 요소가 없을 경우, 빈 배열 반환.  <-- 빈 배열을 반환하는 것이 큰 의미를 갖는다. 에러가 발생되지 않도록 하니까..

// 5의 배수만 구해서 각 요소를 2배
const arr = [4, 377, 1024]; // 5의 배수가 없음.
const arr2 = arr.filter((n) => {
    return n % 5 == 0;
}).map((n) => { // filter로부터 빈 배열 리턴
    return n * 2;
});
console.log(arr2); // [].  map의 콜백 함수는 결국 한 번도 호출되지 않았으나 에러 없음.

Filter	요약
사용시기	특정 조건의 Element를 필터링한 배열이 필요할 때
원본 조작 여부	X
Return	O (retrun == true인 value를 모은 새로운 배열, 모두 false일 경우 빈 배열을 리턴)
특징	error가 발생하지 않는다.
주의사항	글쎄... 과연 있을까?

 

4. find

find 메소드는 filter와는 다르게 1개의 element만 리턴한다.

const arr1 = [4, 15, 377, 395, 400, 1024, 3000];
const arr2 = arr1.find(n => {
  return n % 5 === 0;
});
console.log("arr2", arr2); // 15
console.log("arr2 type", typeof arr2); // number

const arr1 = [4, 15, 377, 395, 400, 1024, 3000];
let count = 0;
const arr2 = arr1.find(n => {
  count++;
  return n % 5 === 0;
});
console.log(count); // 2

function은 return 값이 발생할 때까지 2회 실행하며, 반환은 1개만 되는 것을 알 수 있다. 반환은 Element와 동일하게 리턴된다. 
배열로 반환되지 않기 때문에 특별한 특이사항은 없다.

Find	요약
사용시기	1. 특정한 element (item)을 찾아야 할 때
원본 조작 여부	X
Return	O (찾아낸 element의 값이 0일 때)
특징	typeof Number로 리턴된다. (조건에 맞는 element 없을 경우 undefined 로 리턴)
주의사항	목적과 같다. 1개의 element를 찾을 때 애용하자.

 

5. Map & forEach

map은 배열을 리턴해준다.
forEach는 리턴하지 않는다. 함께 기록해두는 게 좋을 것 같아서 남겨둔다. 둘다 키워드는 "빙글빙글"이다. 내부 element를 하나씩 돌면서 무언가 연산이 필요할 때 쓰는 문법들이다. (a[0] ~ a[length-1] 각 값을 제어)

const a = [1,2,3,4,5];

const b = a.forEach((v, i) => {
	console.log(v); // undefined
	return v+1;
    });

const c = a.map((v, i) => { 
	console.log(v); // [2,3,4,5,6]
	return v+1;
    });
    

6. reduce

리듀스는 알고보면 굉장히 재미있고, 효율적인 개념을 갖고 있는 함수이다. 그래서 처음에 이해하려면 4가지 인자를 정확히 이해해두는 게 좋다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, initialValue);

콜백은 총 배열의 length-1 번 만큼 호출된다.

callback (특정 상황에 호출)	accumulator (누적계산되어진 것)	currentValue (현재 값)	currentIndex (현재 인덱스)	array (사용하는 배열)	return value
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째	1	2	2	[0, 1, 2, 3, 4]	3
3번째	3	3	3	[0, 1, 2, 3, 4]	6
4번째	6	4	4	[0, 1, 2, 3, 4]	10 (reduce의 return value)

*initialValue가 있으면, 처음 한번은 initialValue와 array의 첫번째 value를 더한다.

7. slice

• 복제(clone) 할 때 사용
• 인자를 두개 받는다. 시작 index(포함) 와 끝 index(비포함)

var items = [1, 2, 3, 4, 5];
var copy = items.slice();copy[0] = 100;
console.log(items); // [1, 2, 3, 4, 5]
console.log(copy); // [100, 2, 3, 4, 5]
var copy2 = items.slice(2, 3); // [3]
var copy3 = items.slice(2); // [3, 4, 5]
var copy4 = items.slice(-2); // [4, 5]
var copy5 = items.slice(1, -1); // [2, 3, 4]

• shallow copy vs. deep copy (얕은 복사 = 참조값 복사(like pointer), 깊은 복사(clone))
• 문자열, 숫자와 같이 primitive type 이 아닌 배열을 포함하는 Object 의 경우, 값을 복사하게 되면, 참조 값만을 복사하게 되어 같은 참조를 가진 두 개의 변수가 생성됨(한 변수의 데이터를 수정하면, 다른 하나도 같이 수정이 됨)
• 따라서 모든 값을 복사하는 것을 clone 이라고 하고, deep copy 라고 함(배열의 경우, slice 를 활용해서 구현이 가능) 물론, 배열 안에 있는 요소가 또 참조 타입의 객체라면 동일한 현상은 발생.

 

출처 :
bblog.tistory.com/300

bit.ly/3cg5KSR
blog.kazikai.net/?p=16