학습 목표
- 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
length속성을 이용하여 배열의 길이를 조회할 수 있다.- 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
- 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
- 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
split(),join(),slice(),splice(),Array.isArray(),push(),unshift(),pop(),shift(),indexOf(),includes()
1. 배열 기초
- 배열은 순서가 있는 값이다.
- 순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매긴다.
- 순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매긴다.
배열을 만드는 방법
- 대괄호(
[])를 이용해서 배열을 만든다. - 각각의 요소(element)는 쉼표(
,)로 구분해준다.let myNumber = [14, 25, 36, 47, 58];
- 이렇게 말해요 😃 : "myNumber라는 배열의 3번째 인덱스 값은 47입니다."
인덱스 조회
- 값은 인덱스를 이용해 접근한다.
- myNumber라는 배열의 3번째 인덱스를 조회하려면?
myNumber[3];
- 존재하지 않는 인덱스 번호를 조회하면?
myNumber[5];
- 값이 undefined로 나온다.
- myNumber라는 배열의 3번째 인덱스를 조회하려면?
배열의 값을 변경하는 방법
- 바꾸고 싶은 배열의 n번째 인덱스의 값을 바꿔준다.
- myNumber라는 배열의 3번째 인덱스 값을 70으로 변경하고 싶다면?
myNumber[3] = 70;
배열의 차원
- 배열은 여러개의 차원을 가질 수 있다.
- 배열이 2차원이라면?
let myNumber = [[10, 20], [30, 40], [50, 60]];
- myNumber의 0번째 인덱스의 값은?
- 배열 myNumber의 값 20을 출력하려면?
myNumber[0][1];
- 인덱스를 중첩해서 접근이 가능하다.
- 배열이 2차원이라면?
배열의 길이
length속성을 이용하여 배열의 길이를 알아낼 수 있다.let myNumber = [14, 25, 36, 47, 58]; myNumber.length; // 5
2. 배열의 반복
- 배열은 반복문을 사용하기에 매우 좋은 자료이다.
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
배열의 길이와 인덱스를 활용하여 배열 내부에 있는 모든 요소를 순회할 수 있다.
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // 0, 1, 2, 3, 4, 5, 6, 7, 8 }function arrToString(arr) { let result = 0; for (let i = 0; i < arr.length; i++) { if (i % 2 === 0) { result = result + arr[i]; } } return result; } console.log(arrToString(arr)) // 20
for of문
-
모든 요소를 순회할 때는
for of문을 사용하면 더 간결하고 편리하다.for (let el of arr) { console.log(el) // 0, 1, 2, 3, 4, 5, 6, 7, 8 }function arrToString(arr) { let result = 0; for (let el of arr) { if (el % 2 === 0) { result = result + el; } } return result; } console.log(arrToString(arr)) // 20
3. 배열 메서드
Array.isArray() : 특정 값이 배열인지 아닌지 판별
-
구문
Array.isArray(obj)- 반환값 : 객체가 Array라면 true, 아니라면 false를 반환한다.
-
예시
Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false
원본 배열이 변경되는 메서드
push(): 하나 이상의 요소를 배열의 가장 마지막에 추가
-
구문
arr.push(element1[, ...[, elementN]])- 반환 값 : 변경된 배열의 총 길이를 반환한다.
-
예시
let sports = ['축구', '야구']; sports.push('미식축구', '수영'); //4 console.log(sports); // ['축구', '야구', '미식축구', '수영']- 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어난다.
pop(): 배열의 가장 마지막 요소를 제거
-
구문
arr.pop()- 반환 값 : 제거된 요소를 반환한다.
-
예시
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; myFish.pop(); // 'sturgeon' console.log(myFish); // ['angel', 'clown', 'mandarin' ]
unshift(): 하나 이상의 요소를 배열의 가장 앞쪽에 추가
-
구문
arr.unshift([...elementN])- 반환 값 : 변경된 배열의 총 길이를 반환한다.
-
예시
let arr = [1, 2, 3]; arr.unshift(4, 5); // 5 console.log(arr); // [4, 5, 1, 2, 3]- 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어난다.
shift(): 배열의 첫 요소를 제거
-
구문
arr.shift()- 반환 값 : 제거된 요소를 반환한다.
-
예시
let sports = ['축구', '야구', '미식축구', '수영']; sports.shift(); //'축구' console.log(sports); // ['야구', '미식축구', '수영']
reverse(): 배열 요소를 역순으로 정렬
-
구문
a.reverse()- 반환 값 : 순서가 반전된 배열
-
예시
let arr = [1, 2, 3, 4, 5]; arr.reverse(); alert( arr ); // 5,4,3,2,1
splice(): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
-
구문
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])- 반환 값 : 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.
-
예시
- 하나도 제거하지 않고, 2번 인덱스에 '농구' 추가
let sports = ['축구', '야구', '농구', '미식축구', '수영']; sports.splice(2, 0, '배구'); // [] console.log(sports); // ['축구', '야구', '배구', '농구', '미식축구', '수영']- 3번 인덱스에서 한 개 요소 제거
let sports = ['축구', '야구', '농구', '미식축구', '수영']; sports.splice(3, 1); // ['미식축구'] console.log(sports); // ['축구', '야구', '농구', '수영']- 2번 인덱스에서 한 개 요소 제거하고 '골프' 추가
let sports = ['축구', '야구', '농구', '미식축구', '수영']; sports.splice(2, 1, '골프'); // ['농구'] console.log(sports); // ['축구', '야구', '골프', '미식축구', '수영']- 3번 인덱스를 포함해서 이후의 모든 요소 제거
let sports = ['축구', '야구', '농구', '미식축구', '수영']; sports.splice(3); // ['미식축구', '수영'] console.log(sports); // ['축구', '야구', '농구']
원본 배열이 변경되지 않는 메서드
join(): 배열의 모든 요소를 연결해 하나의 문자열 반환
-
구문
arr.join([separator])- 반환 값 : 배열의 모든 요소들을 연결한 하나의 문자열을 반환한다.
-
예시
let color = ['빨강', '노랑', '파랑', '보라']; let myColor1 = color.join(); let myColor2 = color.join(', '); let myColor3 = color.join(' + '); let myColor4 = color.join(''); console.log(myColor1); // 빨강,노랑,파랑,보라 console.log(myColor2); // 빨강, 노랑, 파랑, 보라 console.log(myColor3); // 빨강 + 노랑 + 파랑 + 보라 console.log(myColor4); // 빨강노랑파랑보라
slice(): 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환
-
구문
arr.slice([begin[, end]])- 반환 값 : 추출한 요소를 포함한 새로운 배열
-
예시
let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; let citrus = fruits.slice(1, 3); console.log(fruits); // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] console.log(citrus); // ['Orange', 'Lemon']
indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환
-
구문
arr.indexOf(searchElement[, fromIndex])- 반환 값 : 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.
- fromIndex : 검색을 시작할 위치, 기본값은 0
-
예시
let array = [10, 20, 30, 40, 50, 40, 20, 60]; console.log(array.indexOf(10)); // 0 console.log(array.indexOf(30)); // 2 console.log(array.indexOf(70)); // -1 console.log(array.indexOf(30, -6)); // 2 console.log(array.indexOf(40, 5)); // 5 console.log(array.indexOf(60, -1)); // 7
includes(): 배열이 특정 요소를 포함하고 있는지 판별
-
구문
arr.includes(valueToFind[, fromIndex])- 문자나 문자열을 비교할 때, 대소문자를 구분한다.
- fromIndex : 검색을 시작할 위치, 기본값은 0
- 반환 값 : Boolean 형태로 반환한다.
-
예시
console.log([1, 2, 3].includes(2)); // true console.log([1, 2, 3].includes(4)); // false console.log([1, 2, 3].includes(3, 3)); // false console.log([1, 2, 3].includes(3, -1)); // true console.log([1, 2, NaN].includes(NaN)); // true
concat(): 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
-
구문
array.concat([value1[, value2[, ...[, valueN]]]])- 반환 값 : 추가된 새로운 배열을 반환한다.
-
예시
const alpha = ['a', 'b', 'c']; const numeric = [1, 2, 3]; console.log(alpha.concat(numeric)); // ['a', 'b', 'c', 1, 2, 3] console.log(alpha); // ['a', 'b', 'c']
