[TIL:240305] JS 배열 메소드 모습은 동작이 달라

 

오늘 모던 자바스크립트를 수업을 끝냈다.

처음 한번 다 듣는데.

 

"응? 다시다시.. 아~ 어라? 응???! 아~~"

이러면서 듣고.

두번째 다시 들을 때는

 

" 아~~ 이런거였구나, 응?? 오호~ 다시다시. 응?? "

 

하면서 듣고, 정리를 했다.

 

js를 공부하며, 구문이 작성 유사하지만 다르다

이번에 배열 메소드는..  점 헷갈린다.

사용 하는 용도랑 출력되는 값도 다른데.. 참

 

 

 

 

 

◼ 유사한 모습의 메소드  

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// map 메소드: 반복문 처럼 사용하며, 실행한 값들을 모아 새로운 배열을 반환
const mapMethod = numbers.map(num => num * 2);

// filter 메소드: 조건에 만족하는 값을 찾아 새로운 배열로 반환
const filterMethod = numbers.filter(num => num % 2 === 0);

// find 메소드: 조건에 만족하는 값이 여러개 여도 첫번째(상위)값만을 반환 / 없으면 'undefined'
const findMethod = numbers.find(num => num % 2 === 0);

// some 메소드: 조건에서 하나 라도 맞으면 true / []빈값이면 false(하나도 맞는게 없어서)
const someMethod = numbers.some(num => num % 2 === 0);

// every 메소드: 조건에 모든 값이 맞아야 true / []빈값이면 true(틀린게 하나도 없어서)
const everyMethod = numbers.every(num => num % 2 === 0);

// reduce 메소드: 이전의 값이 누적되는 저장소가 있는 콜백함수를 활용해, 하나의 값으로 만들어 반환
const reduceMethod = numbers.reduce((acc, cur, idx, arr) => acc + cur, 0);

console.log('2단 만들기:', mapMethod);
console.log('짝수만:', filterMethod);
console.log('첫번째 짝수는:', findMethod);
console.log('배열에 짝수 있어?', someMethod);
console.log('모든 수가 짝수야?', everyMethod);
console.log('모든 값 더하기', reduceMethod);

 

결과>

 

 

 

 

 

 

이렇게 색도 넣고, 나란히 다 놓아보니..

정말 유사한 구문이다.

 

따로 하나씩 보아서 헷갈렷는데,

이렇게 모아서 보니 명확해 지는거 같다.

 

 

 

 

 

 

 

◼ 다른 모습의 메소드  

const numbers = [1, 2, 3, 4, 5, 3, 4];
const numbers1 = [1, 2];
const numbers2 = [3, 4];
const numbers3 = [3, 1, 4, 2, 5];

// forEach 메소드: map과 같은 동작을 한다
numbers.forEach((num, idx) => { console.log(`인덱스 ${idx}: ${num}`); });

// slice 메소드: 배열의 일부를 자르는 메소드이며, 첫번째는 시작, 두번째는 끝 위치 적는다
const sliceMethod = numbers.slice(1, 3);

// concat 메소드: 1개 이상 배열을 하나로 합친다. 여러개의 인자을 받을수 있다. (spread 방식과 유사) const
const concatMethod = numbers1.concat(numbers2);

// indexOf 메소드: 조건에 맞는 첫번째 숫자 위치를 찾아준다(여기서는 3의 위치)
const firstIndex = numbers.indexOf(3);

// lastIndexOf 메소드: 조건에 맞는 마지막 숫자 위치를 찾아준다(여기서는 3의 위치)
const lastIndex = numbers.lastIndexOf(3);

// includes 메소드: 배열 안에 조건에 맞는 값이 있으면 true, 아니면 false 반환
const includsMethod = numbers.includes(3);

// join 메소드: 사용하여 배열 요소 결합
const joinMethod = numbers.join(', ');

// reverse 메소드: 배열의 순서 뒤집기
numbers.reverse();

// sort 메소드: 오름차순 정렬
numbers3.sort((a, b) => a - b);
console.log('오름차순 정렬:', numbers3);

// sort 메소드: 내림차순 정렬
numbers3.sort((a, b) => b - a);
console.log('내림차순 정렬:', numbers3);

console.log('추출된 배열:', sliceMethod);
console.log('합쳐진 배열:', concatMethod);
console.log('첫 번째 인덱스:', firstIndex);
console.log('마지막 인덱스:', lastIndex);
console.log('포함 여부:', includsMethod);
console.log('결합된 문자열:', joinMethod);
console.log('반전된 배열:', numbers);

 

결과값>

 

 

 

 

 

◼ Last. 

배열의 메소드 중에 그나마 자주 사용하는 것만 추려봤다.
많이 사용해 본적은 없지만, 본적은 있어서 다행이 낯설지는 않다

구문들이 유사해서 정말 많이 헷갈렸는데...
쭉~ 나열해 한눈에 보니, 유사하지만
함수명에 따라 동작, 값전달와 출력이 전혀 다~~ 다르다는걸 깊이 느낀 시간이다