- 학습일 : 2024.01.31
- 참고 URL
학습 내용
- 요소를 더하거나 지우기
push(...items)– 맨 끝에 요소 추가하기pop()– 맨 끝 요소 추출하기shift()– 첫 요소 추출하기unshift(...items)– 맨 앞에 요소 추가하기splice(pos, deleteCount, ...items)–pos부터deleteCount개의 요소를 지우고,items추가하기slice(start, end)–start부터end바로 앞까지의 요소를 복사해 새로운 배열을 만듦concat(...items)– 배열의 모든 요소를 복사하고items를 추가해 새로운 배열을 만든 후 이를 반환함.items가 배열이면 이 배열의 인수를 기존 배열에 더해줌
- 원하는 요소 찾기
indexOf/lastIndexOf(item, pos)–pos부터 원하는item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면1을 반환함includes(value)– 배열에value가 있으면true를, 그렇지 않으면false를 반환함find/filter(func)–func의 반환 값을true로 만드는 첫 번째/전체 요소를 반환함findIndex는find와 유사함. 다만 요소 대신 인덱스를 반환함
- 배열 전체 순회하기
forEach(func)– 모든 요소에func을 호출함. 결과는 반환되지 않음
- 배열 변형하기
map(func)– 모든 요소에func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦sort(func)– 배열을 정렬하고 정렬된 배열을 반환함reverse()– 배열을 뒤집어 반환함split/join– 문자열을 배열로, 배열을 문자열로 변환함reduce(func, initial)– 요소를 차례로 돌면서func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨
- 기타
Array.isArray(arr)–arr이 배열인지 여부를 판단함
sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의하시기 바랍니다.
지금까지 배운 메서드만으로 배열과 관련된 작업 99%를 해결할 수 있습니다. 이 외의 배열 메서드도 있긴 한데 잠시 언급하고 넘어가겠습니다.
- arr.some(fn)과 arr.every(fn)는 배열을 확인합니다. 두 메서드는
map과 유사하게 모든 요소를 대상으로 함수를 호출합니다.some은 함수의 반환 값을true로 만드는 요소가 하나라도 있는지 여부를 확인하고every는 모든 요소가 함수의 반환 값을true로 만드는지 여부를 확인합니다. 두 메서드 모두 조건을 충족하면true를, 그렇지 않으면false를 반환합니다.
- arr.fill(value, start, end)은
start부터end까지value를 채워 넣습니다. - arr.copyWithin(target, start, end)은
start부터end까지 요소를 복사하고, 복사한 요소를target에 붙여넣습니다. 기존 요소가 있다면 덮어씁니다.
학습 코드
let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거
console.log( arr ); // ["I", "JavaScript"]
// ****************************************************
let arr2 = ["I", "study", "JavaScript", "right", "now"];
// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr2.splice(0, 3, "Let's", "dance");
console.log( arr2 ) // now ["Let's", "dance", "right", "now"]
// ****************************************************
let arr3 = ["t", "e", "s", "t"];
console.log( arr3.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))
console.log( arr3.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)
// ****************************************************
let arr4 = [1, 2];
// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
console.log( arr4.concat([3, 4]) ); // 1,2,3,4
// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
console.log( arr4.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
console.log( arr4.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6
// ****************************************************
// for each element call console.log
["Bilbo", "Gandalf", "Nazgul"].forEach(console.log);
/* 출력 결과
[ 1, 2, 3, 4, 5, 6 ]
Bilbo 0 [ 'Bilbo', 'Gandalf', 'Nazgul' ]
Gandalf 1 [ 'Bilbo', 'Gandalf', 'Nazgul' ]
Nazgul 2 [ 'Bilbo', 'Gandalf', 'Nazgul' ]
*/
// ****************************************************
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
console.log(lengths); // 5,7,6
// ****************************************************
// 정렬1
let arr6 = [ 1, 2, 15 ];
arr6.sort(function(a, b) { return a - b; });
console.log(arr6); // 1, 2, 15
// 정렬2[정렬1과 동일하지만, 화살표 함수를 사용]
let arr7 = [ 1, 5, 35 ];
arr7.sort( (a, b) => a - b );
console.log(arr7); // 1, 5, 35
// ****************************************************
let arr8 = [1, 2, 3, 4, 5];
arr8.reverse();
console.log( arr8 ); // 5,4,3,2,1느낀점
개인적으로 파이썬과 자바를 많이 안다는 아니지만, 기존에 백엔드 개발자가 되기 위해 자바스크립트보다 파이썬과 자바를 많이 했던 것은 사실이다.
코테도 파이썬과 자바 위주로 공부했었고, 이에 따라 자연스레 배열에 대한 메소드도 많이 공부했었다.
그런데, 오늘 자바스크립트의 배열 메소드를 보니, 파이썬과 자바의 배열 메소드보다 종류도 훨씬 많고 더 쉽게 사용할 수도 있다는 것을 깨닫게 되었다.
그중에서도 인상 깊었던 것은, splice 메소드이다. concat, indexof, filter 등 다양한 메소드도 있지만 이것은 파이썬과 자바에서도 얼추 동일하거나 비슷한 기능이 존재한다.
하지만, splice와 같은 경우는 내가 공부를 못했어서 모르는 것일 수도 있지만, 자바나 파이썬에서는 본 적이 없었다. 그만큼, splice는 나에게 적지 않은 충격(?)을 주었다.
아무튼, 현재 자바스크립트를 강제적(?)으로 메인 언어로 사용하고 있는데, 자바스크립트의 배열에는 자바나 파이썬보다 많은 메소드가 존재하며, 이것을 특정 라이브러리 호출 없이 사용할 수 있다는 것에 감사함을 느끼게 된다.
#Software Engineer #IRISH