JavaScript - 배열 함수 및 유용한 내부 기능

foreach

const animals = [‘dog’, ‘cat’, ‘rabbit’, ‘duck’];
animals.forEach((animal, i, arr) => {
	console.log(`${i}번에 ${animal}이 있다.`);
	console.log(arr); // [‘dog’, ‘cat’, ‘rabbit’, ‘duck’]
});

첫 번째 파라미터는 배열의 요소.

두번째 파라미터는 요소의 인덱스.

세번째 파라미터는 반복중인 배열 자체가 전달된다.

map

const animalsLevel = animals.map((animal, i) => `레벨${i}-${animal}`);

foreach와 map의 차이점

• foreach는리턴값이 없기때문에 변수에 담으면 항상 undefined이다.
• 단순한 반복작업이 필요할 때 사용하면 좋다.

 

• map은 새로운 배열을 만드는 함수이기때문에 항상 변수에 담아야한다.
• 반복작업을 통해서 새로운 배열이 필요할 때에 사용하면 좋다.

foreach와 map의 최대 반복 횟수

• 최대 반복횟수는 처음 시작할 때 배열의 개수만큼이다.
• 반복중인 요소에 새로운 요소를 추가시켜도 횟수가 늘어나지 않는다.
• 하지만 반복중인요소의 개수가 줄어든다면 횟수도 줄어든다.

---

filter

const devices = [
	{name: ‘galaxyNote’, brand: ‘samsung’},
	{name: ‘macbookPro’, brand: ‘apple’},
	{name: ‘iPad’, brand: ‘apple’},
	{name: ‘galaxyWatch’, brand: ‘samsung’},
	{name: ‘gram, brand: ‘LG’},
]
const apples = devices.filter((el) => el.brand === ‘apple’);

• map과 비슷하게 생겼지만, map은 새로운 값을 만들어서 배열에 넣고,
• filter는 ture/false로 구분되는 조건문을 내용에 적으면 true가 되는 조건의 요소들만 새로운 변수에 담는다.
• 리턴값이 항상 배열이기 때문에 필터에 1개만 남아도 배열을 리턴한다.
• 만약 1개의 값만을 찾고 싶다면 find를 사용하면된다.

find

const apples = devices.find((el) => el.brand === ‘apple’);

• 해당 값을 찾는 순간 방복이 종료되어 1개만 출력한다.
• 해당 값이 없으면 undefined를 출력한다.

---

some

• 조건을 만족하는 요소가 1개 이상 있는지 확인한다.
• 배열의 요소를 하나씩 검사하는데, ture가 하나 나오면 반복을 종료하고 true를 리턴한다.

every

• 모든 요소가 조건을 만족하는지 확인한다.
• 배열의 요소를 하나씩 검사하다가 false가 하나 나오면 반복을 종료하고 false를 리턴한다.
• 따라서 "조건을 만족하지 않는 요소가 1개 이상 있는지 확인한다." 라고 해도 좋겠다.

const numbers = [1, 3, 5, 7, 9];
const someReturn = numbers.some((el)=> el > 5);
const everyReturn = numbers.every((el)=> el > 5);

console.log(someReturn); // true. 5보다 큰 숫자가 1개이상있으면 true이다.
console.log(everyReturn; // false. 모든 요소가 5보다 커야 true이다.

메서드를 실행할 배열이 빈 배열인 경우, 반복을 실행하지 않고 some은 바로 false를, every는 바로 true를 리턴한다.

---

reduce

acc : accumulator(누산기)
매번 콜백함수가 반복하며 동작할 때 직전에 리턴한 값.
첫번째 콜백함수가 동작할 때에는 initailAccValue가 전달된다.

const numbers = [1, 2, 3, 4];

numbers.reduce((acc, el, i, arr) => {
	return nextAccValue;
}, initialAccValue)



const sumAll = numbers.reduce((acc, el, i) => {
	console.log(`${i}번 index의 요소로 콜백함수가 동작중.`);
	console.log(‘acc : ’, acc);
	console.log(‘el : ‘, el);
	console.log(‘———‘);

	return acc + el;
}, 0);

console.log(sumAll); // 10

• 초기값을 명시해주지 않으면, 배열의 첫번째 인자가 초기값으로 전달된다. (초기값은 더하지 않고 넘어가게된다.)
• 초기값을 전달해주면 초기값부터 배열 요소를 차근차근 더해간다.
• 초기값으로 예상 결과가 달라질 수 있으니 꼭 명시해주기로 하자.

---

sort

• 배열의 요소를 정렬하는 메서드.
• 메서드에 아규먼트를 전달하지 않으면 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다.

const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

위 코드에서 확인할 수 있는 것처럼 numbers가 원하는대로 정렬이 되지 않는다.

아래와 같이 코드를 입력해보자.

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

위와같이 정렬이 되는 이유는 아래와 같다.

• 반환 값 < 0 : a가 b보다 앞에 있어야 한다.
• 반환 값 = 0 : a와 b의 순서를 바꾸지 않는다.
• 반환 값 > 0 : b가 a보다 앞에 있어야 한다.

 

sort함수는 원본배열의 요소를 정렬하게된다.

한 번 정렬을 하면 이 전의 순서로 다시 되돌릴 수 없으니 미리 다른 변수에 복사해 둔 후 사용하는 것이 좋다.

 

---

reverse

• 배열의 순서를 뒤집어주는 메서드
• 원본배열의 요소를 뒤집기때문에 이 메서드도 사용전에 미리 다른 변수에 복사해서 사용하는 것이 좋겠다.

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

---

map, set 데이터 구조

ES2015이후, 객체와 비슷한 구조를 가지는 map, 배열과 비슷한 구조를 가지는 set이 새롭게 등장했다.

 

map

• 이름이 있는 데이터를 저장하는 부분이 객체와 비슷하다.
• 하지만, 객체는 할당연산자를 통해 값을 추가하고 점표기법이나 대괄호표기법으로 접근하는데
• map은 메서드를 통해서 값을 추가하거나 접근할 수 있다.

다음은 map의 메서드들이다.

• map.set(key, value): key를 이용해 value를 추가하는 메소드.
• map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
• map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
• map.delete(key): key에 해당하는 값을 삭제하는 메소드.
• map.clear(): Map 안의 모든 요소를 제거하는 메소드.
• map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

const kong = new Map();

kong.set(‘name, ‘kong’);
kong.set(2015, true);
kong.set(true, ’살아있다.’);

console.log(kong.get(2015)); // ture
console.log(kong.has(‘name’)); // true
console.log(kong.size); // 3

kong.delete(2015);
console.log(kong.get(2015)); //undefined

kong.clear();
console.log(kong.size); // 0

문자열과 심볼값만 key로 사용할 수 있는 일반 객체와는 다르게, Map객체는 메서드를 통해 값을 다루기 때문에 다양한 자료형을 key로 활용할 수 있다.

 

set

• 여러개의 값을 순서대로 저장한다는 점에서 배열과 비슷하다.
• 배열의 메서드는 활용할 수 없고, Map과 비슷하게 Set만의 메서드를 통해서 값을 다루는 특징이 있다.
• Map과 마찬가지로 new 키워드로 Set을 만들 수 있다.
• 하지만 Set은 개별값에 바로 접근하는 방법이 없기때문에 요소들을 모두 출력하려면 반복문을 사용해야한다.

아래는 set의 메서드들이다.

• set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
• set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
• set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
• set.clear(): Set 안의 모든 요소를 제거하는 메소드.
• set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

const family = new Set();

family.add(‘dad’);
family.add(‘me’);
family.add(’sister’);
family.add(‘kong’);

console.log(family.has(‘kong’)); //true
console.log(family.size); // 4

family.delete(‘kong’); // true
console.log(family.size); // 3
family.delete(‘brother’); // false

family.clear();
console.log(family.size); // 0

• set은 앞서말한바와같이 각각의 요소들에 접근이 불가능하기때문에 반복문을 사용해야해서, 잘 사용되지않는다.
• 사용되는 경우는, set은 중복되는 값을 허용하지않기때문에 이러한 값들을 모을 때 이다.
• 최초에 추가된 순서를 유지하고, 중복된 값이 들어오면 무시한다.
• 최초로 set을 생성할 때, 아규먼트로 배열을 전달할 수도 있는데, 이 때 붕복된 값이 있다면 중복을 제거하고 만들기 때문에 set의 활용도가 높다.

const numbers = [1,1,1,2,2,2,2,3,3,3,3,4,4,4,5,5,5,6,6,7,1,2,3,4,5,6,7];
const uniqNumbers = new Set(numbers);
console.log(uniqNumbers); // Set(5) {1, 2, 3, 4, 5, 6, 7}