티스토리 뷰
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다.
배열의 기초
시작하기 전에 자바스크립트 배열의 기본적인 사항들을 확인해봅시다.
- 배열은 객체와 달리 순서가 있는 데이터 집합이며 0부터 시작하는 숫자형 인덱스를 사용합니다.
- 한 배열의 요소가 같은 타입일 필요가 없습니다. 다른 배열의 객체도 요소로 사용할 수 있습니다.
- 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다.
- 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며 빈자리는 undefined로 채워집니다.
- 드물게 사용하지만 Array 생성자를 사용해서 배열을 만들 수도 있습니다.
배열 요소 조작
배열 조작 메서드의 일부는 배열 자체를 수정하며 다른 일부는 새 배열을 반환합니다. 밑에서 설명할 메서드 뒤에 괄호로 (수정) 혹은 (반환)을 붙여 구분합니다.
배열의 처음이나 끝에 요소 하나를 추가하거나 제거할 때
push, pop (수정) : 배열의 끝에 요소를 추가하거나 제거합니다.
shift, unshift (수정) : 배열의 처음에 요소를 제거하거나 추가합니다.(shift가 제거)
배열의 끝에 여러 요소 추가할 때
concat (반환) : 매개변수로 여러 요소나, 배열을 넘기면 원래 배열에 추가한 사본을 반환합니다.
배열의 일부를 가져올 때
slice (반환) : 첫번째 매개변수는 어디서부터, 두번째 매개변수는 어디까지 가져올지(바로 앞 인덱스까지) 지정하여 반환합니다. 두번째 매개변수를 생략하면 배열의 마지막까지 반환합니다. 음수 인덱스를 사용하면 배열의 끝에서부터 요소를 셉니다.
임의에 위치에 요소를 추가하거나 제거할 때
splice (수정) : 첫번째 매개변수는 수정을 시작할 인덱스이고, 두번째 매개변수는 제거할 요소 숫자입니다. 아무 요소도 제거하지 않을 때는 0을 넘깁니다. 나머지 매개변수는 배열에 추가될 요소입니다.
배열 안에서 요소를 교체할 때
copyWithin(ES6)(수정) : 배열 요소를 복사해서 다른 위치에 붙여넣고 기존의 요소를 덮어 씁니다. 음수 인덱스를 사용하면 배열의 끝에서부터 셉니다.
특정 값으로 배열을 채울 때
fill (수정) : 정해진 값으로 배열을 채웁니다. 배열의 일부만 채울 때는 시작 인덱스와 끝 인덱스를 매개변수로 줍니다.
배열을 정렬할 때
reverse (수정) : 배열의 순서를 반대로 바꿉니다.
sort (수정) : 배열의 요소 순서를 정렬합니다.
배열을 검색할 때
indexOf, lastIndexOf (반환) : 일치(===)하는 첫번째 요소의 인덱스를 반환합니다. 두 메서드의 차이는 검색하는 위치의 방향의 차이입니다. 일치하는 것을 찾지 못하면 -1을 반환합니다.
findIndex(반환) : 보조함수를 써서 검색 조건을 지정합니다. 조건에 맞는 첫번째 인덱스를 반환합니다
find(반환) : 보조함수를 써서 검색조건을 지정합니다. 인덱스가 아닌 요소를 반환합니다. 조건에 맞는 요소가 없다면 undefined를 반환합니다.
some (반환) : 조건에 맞는 요소를 찾으면 검색을 멈추고 true를 반환합니다.
every (반환) : 모든 요소가 조건에 맞다면 true를 반환합니다.
삭제되거나 정의되지 않은 요소들
삭제되거나 정의되지 않은 요소들에서 콜백함수를 호출하지 않습니다.
const arr = [1,2,3,4,5];
delete arr[2];
arr.map(x => 0); // [0,0,undefined,0,0]
//map 함수는 콜백함수를 매개변수로 받아 리턴값으로 이루어진 새로운 배열을 반환하는 함수입니다.
//map을 비롯한 filter, reduce 함수는 타 언어에서도 유용하게 쓰이는 함수라 따로 작성하지 않았습니다.
//자주 사용하는 기능들이니 처음 공부하시는 분들이라면 알아보시는 것을 추천드립니다.
문자열 병합
Array.prototype.join (프로토타입의 경우 차후에 정리할 예정입니다. 없다고 생각하고 봐도 이해하는 것에는 영향이 없습니다.)
은 매개변수로 구분자 하나를 받고 요소들을 하나로 합친 문자열을 반환합니다. 문자열 요소를 합칠 때 정의되지 않은 요소, 삭제된 요소, null, undefined는 모두 빈 문자열로 취급합니다.
'Running JS 요약' 카테고리의 다른 글
JS - 맵과 셋 / 예외와 에러 처리 (0) | 2021.01.18 |
---|---|
JS - 객체와 객체지향 프로그래밍 (0) | 2021.01.11 |
JS - 스코프 (0) | 2021.01.05 |
JS - 함수 (0) | 2021.01.04 |
JS - 제어문, 그리고 표현식과 연산자 (0) | 2021.01.03 |