배열
- 다수의 문자열 등 복수의 데이터를 다룰 때 사용
| 구문 | 의미 |
| [] | 배열 정의 |
| 배열[인덱스] | 배열 요소 데이터의 값 가져오기 |
[] 안에 데이터를 입력하며, 타입에 상관없이 사용이 가능 함.
배열 내 다른 배열을 저장하거나 객체도 저장 가능 함.
배열의 데이터는 순서대로 0, 1, 2, 3, .... 의 순서대로 가진다.
new Array()를 사용해서 배열을 정의할 수 있다.
10개의 데이터를 넣을 수 있는 배열을 선언하면 데이터가 없는 빈 배열이 생성된다.
해당 배열의 순서에 값을 넣어서 사용하면 된다.
배열 길이 확인 - length
- 배열 데이터 요소의 수를 확인하고 싶을 때
| 속성 | 의미 | 타입 |
| 배열.length | 배열의 길이 반환 | 숫자 |
배열 요소 - forEach
- 배열 데이터 요소의 데이터로 처리하고 싶을 때
| 구문 | 의미 |
| 배열.forEach(콜백함수) | 배열의 요소 데이터 콜백 함수로 실행 |
콜백 함수
| 구문 | 의미 |
| ([요소], [인덱스], [기존배열]) => {} | 요소, 인덱스, 기존 배열을 사용해 처리 |
※ forEach()는 for, for...of의 루프와 달리 map(), filter() 등의 반환값을 기대로 루프 처리 할 수 있는 것이 특징이다.
배열 요소 - for...of
- 배열 데이터 요소의 데이터로 처리하고 싶을 때
- 배열 루프 처리 중 인덱스가 불필요할 떄
| 구문 | 의미 |
| for(const 요소 of 배열){} | for...of 루프 처리 |
const arr1 = ['사과', '바나나', '수박'];
for(const value of arr1){
console.log(value);
}
배열 요소 - for
- 배열 데이터 요소의 데이터로 처리하고 싶을 때
- 배열 루프 처리 중 인덱스가 불필요할 떄
| 구문 | 의미 |
| for(let i=0; i<배열길이; i++){} | for...of 루프 처리 |
const arr1 = ['사과', '바나나', '수박'];
for(let i = 0; i < arr1.length; i++){
console.log(arr1[i]);
}
배열 요소 추가 - unshift, push
- 배열에 요소를 추가하고 싶을 때
- 요소를 배열 처음이나 끝에 추가하고 싶을 때
| 메소드 | 의미 | 반환 |
| 배열.unshift(요소1,요소2,...) | 배열 첫 위치에 요소 추가 | 숫자(전체 개수) |
| 배열.push(요소1, 요소2,...) | 배열 맨 마지막 위치에 요소 추가 | 숫자(전체 개수) |
const arr1 = ['사과', '바나나', '수박'];
arr1.unshift('딸기');
console.log(arr1);
arr1.push('토마토','복숭아');
console.log(arr1);
배열 요소 삭제 - shift, pop
- 배열에 요소를 삭제하고 싶을 때
| 메소드 | 의미 | 반환 |
| 배열.shift() | 배열 첫 위치에 요소 삭제 | 삭제된 요소 |
| 배열.pop() | 배열 맨 마지막 위치에 요소 삭제 | 삭제된 요소 |
const arr = ['사과', '바나나', '수박'];
console.log(arr.shift());
console.log(arr);
console.log(arr.pop());
console.log(arr);
※ 삭제 가능한 요소가 없다면 pop(), shift()의 반환값은 undefined이고 에러는 발생하지 않음
const arr3 = [];
console.log(arr3.shift());
console.log(arr3.pop());
배열 요소 부분 변환 - splice
- 배열내 요소를 다른 요소로 변환하고 싶을 때
| 메소드 | 의미 | 반환 |
| 배열.splice(위치, 추출개수, 요소1, 요소2) | 지정 위치 요소 추출, 요소 추가 | 배열 |
const arr1= ['딸기','사과'];
arr1.splice(1, 0 ,'바나나', '키위');
console.log(arr1);
const arr2 = ['딸기','사과'];
arr2.splice(1, 1 , '키위');
console.log(arr2);
배열 요소 결합 - concat
- 여러 개의 배열을 하나로 결합하고 싶을 때
| 구문 | 의미 |
| 배열1.concat(배열2, 배열3,...) | 배열1에 배열2, 배열3,...을 결합 |
| [...배열1,...배열2,...배열3] | 배열1에 배열2, 배열3을 결합 |
const arr1 = ['사과','딸기'];
const arr2 = ['자동차','오토바이'];
const arr3 = ['고양이','강아지'];
const arr4 = arr1.concat(arr2,arr3);
console.log(arr4);
배열 요소 결합하여 문자열 만들기 - join
- 배열내 데이터를 결합하고 싶을 때
| 메소드 | 의미 | 반환 |
| 배열.join([결합문자]) | 배열 요소를 결합해 문자열 만들기 | 문자열 |
const arr = ["사과", "딸기", "자동차", "오토바이", "고양이"];
console.log(arr.join());
console.log(arr.join("|"));
※ 요소사이의 결합문자를 생략하면 기본값인 콤마(,)가 삽입된다.
length, forEach, for...of, unshift, push, shift, pop, splice, concat, join
댓글