자바스크립트에서 배열의 길이를 확인하는 방법과 길이를 늘리거나 줄이는 등의 크기 변경 방법을 소개합니다.
1. Array.length : 배열 길이 확인
Array.length
는 배열의 길이가 저장됩니다. 배열의 길이는 항상 배열의 마지막 요소의 Index 보다 큰 값이 됩니다.
배열에 요소를 추가하면, 배열의 길이는 늘어납니다.
const arr = ['a', 'b', 'c'];
console.log(arr.length);
arr.push('d');
console.log(arr.length);
console.log(arr);
Output:
3
4
[ 'a', 'b', 'c', 'd' ]
new Array()
로 만든 배열도 길이를 가져오는 방법은 동일합니다.
const arr = new Array('1', '2', '3');
console.log(arr.length);
2. Sparse array의 길이
Sparse array는 요소들의 Index가 연속적이지 않은 배열입니다. 아래 예제에서 배열 요소들의 Index는 0, 2, 3입니다. 길이를 출력해보면 4가됩니다. push를 해서 요소를 추가하면 마지막에 추가되기 때문에 길이는 5가됩니다. 하지만 Index 1에 직접 요소를 입력하면 길이는 증가하지 않게 됩니다.
const arr = [10, , 20, 30];
console.log(arr.length);
arr.push('40')
console.log(arr.length);
console.log(arr);
arr[1] = 15
console.log(arr.length);
console.log(arr);
Output:
4
5
[ 10, <1 empty item>, 20, 30, '40' ]
5
[ 10, 15, 20, 30, '40' ]
3. 배열 길이 변경
아래와 같이 length = number
으로 배열을 길이를 변경할 수 있습니다. 만약 0으로 변경하고 배열을 출력해보면 빈 배열이 출력됩니다.
const arr = [10, 20, 30];
console.log(arr.length);
arr.length = 0;
console.log(arr.length);
console.log(arr);
Output:
3
0
[]
그리고 길이가 3인 배열이 있는데, 길이를 2로 변경하고 배열을 출력해보면 마지막 요소가 삭제된 것을 확인할 수 있습니다.
const arr = [10, 20, 30];
arr.length = 2;
console.log(arr);
Output:
[ 10, 20 ]
반대로 배열 크기보다 더 크게 늘리면, 길이가 증가하고 empty item이 추가됩니다.
const arr = [10, 20, 30];
arr.length = 5;
console.log(arr.length);
console.log(arr[3]);
console.log(arr[4]);
console.log(arr);
Output:
5
undefined
undefined
[ 10, 20, 30, <2 empty items> ]
Loading script...
Related Posts
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수