배열 기본
객체
•
종류: 배열, 함수, 배열이나 함수가 아닌 객체
배열
•
값들을 하나로 묶을 수 있음
const fruits = ['사과', '오렌지', '배', '딸기'];
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 오렌지
console.log(fruits[2]); // 배
console.log(fruits[3]); // 딸기
JavaScript
복사
•
자릿수 == 인덱스(index)
•
배열 안에 문자열 뿐 아니라 다른 배열이나 변수를 넣을 수 있음
const arrayOfArray = [[1, 2, 3], [4, 5]];
arrayOfArray[0]; // [1, 2, 3]
const a = 10;
const b = 20;
const variableArray = [a, b, 30];
variableArray[1]; // 20 (b의 값)
const everything = ['사과', 1, undefined, true, '배열', null];
const empty = [];
JavaScript
복사
•
요소(element) : 배열 내부에 든 값
◦
everything : 6개
◦
empty : 0개
◦
.length 를 사용하면 개수를 알 수 있음
빈 값도 요소 개수에 포함된다
const emptyValue = [null, undefined, false, '', NaN];
console.log(emptyValue.length); // 5
JavaScript
복사
•
빈 값도 유효한 값이기 때문에 요소 개수를 셀 때 포함됨
배열 마지막 요소 뒤에 새로운 요소 넣기
const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
console.log(target); // ["가", "나", "다", "라", "마", "바"]
JavaScript
복사
•
배열의 마지막 인덱스는 (배열의 길이 - 1) 이다.
⇒ 따라서 다음 요소를 추가하려면 배열.length 에 값을 넣으면 된다.
배열의 첫 번째 인덱스에 값을 추가하고 싶다면?
배열[0] = 값 이라고 생각할 수 있지만, 원하는 결과가 나오지 않는다.
const target = ['나', '다', '라', '마'];
target[0] = '가';
console.log(target); // ["가", "다", "라", "마"]
JavaScript
복사
⇒ unshift를 사용한다!
const target = ['나', '다', '라', '마'];
target.unshift('가');
console.log(target); // ["가", "나", "다", "라", "마"]
JavaScript
복사
마지막 인덱스에 값을 추가하는 방법도 있다.
⇒ push를 사용한다!
const target = ['가', '나', '다', '라', '마'];
target.push('바');
console.log(target); // ["가", "나", "다", "라", "마", "바"]
JavaScript
복사
const는 상수인데 왜 배열 수정이 가능한가요?
⇒ 엄밀히 말해서 const는 상수는 아니다.
새로운 값을 대입(=)하지 못한다고 기억하기!
객체의 내부의 속성이나 배열의 요소는 수정할 수 있다.
배열 메서드(수정, 조회)
배열에서 요소 수정하기
const target = ['가', '나', '다', '라', '마'];
target[3] = '카';
console.log(target); // ['가', '나', '다', '카', '마']
JavaScript
복사
배열에서 요소 제거하기
•
마지막 요소를 제거할 때는 pop 사용
const target = ['가', '나', '다', '라', '마'];
target.pop();
console.log(target); // ['가', '나', '다', '라']
JavaScript
복사
•
첫 번째 요소를 제거할 때는 shift 사용
const target = ['가', '나', '다', '라', '마'];
target.shift();
console.log(target); // ['나', '다', '라', '마']
JavaScript
복사
•
중간 요소를 제거할 때는 splice 사용
⇒ splice(인덱스, 제거할 요소 개수)
const target = ['가', '나', '다', '라', '마'];
target.splice(1, 1);
console.log(target); // ['가', '다', '라', '마']
const target = ['가', '나', '다', '라', '마'];
target.splice(2, 2);
console.log(target); // ['가', '나', '마']
JavaScript
복사
•
숫자를 하나만 넣을 경우
⇒ 해당 인덱스부터 끝까지 모든 요소를 제거
const target = ['가', '나', '다', '라', '마'];
target.splice(1);
console.log(target); // ['가']
JavaScript
복사
•
제거한 자리에 새로운 요소 채워 넣기
⇒splice(인덱스, 제거 요소 개수, 새로 채워 넣을 요소)
const target = ['가', '나', '다', '라', '마'];
target.splice(1, 3, '타', '파');
console.log(target); // ['가', '타', '파', '마']
JavaScript
복사
배열에서 요소 찾기
•
일종의 검색 기능 (해당 요소가 배열에 존재하는지 검색)
⇒ includes 사용
const target = ['가', '나', '다', '라', '마'];
const result = target.includes('다');
const result2 = target.includes('카');
console.log(result); // true
console.log(result2); // false
JavaScript
복사
•
검색하고 싶은 값이 몇 번째 인덱스에 위치하는지
⇒ indexOf, lastIndexOf 사용
◦
lastIndexOf: 뒤에서부터 검색
◦
값이 존재하지 않을경우 -1 반환
const target = ['라', '나', '다', '라', '마'];
const result = target.indexOf('다');
const result2 = target.lastIndexOf('라');
const result3 = target.indexOf('가');
console.log(result); // 2
console.log(result2); // 3
console.log(result3); // -1
JavaScript
복사
배열 반복하기
•
반복문으로 배열 출력하기
const target = ['가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) {
console.log(target[i]);
i++;
}
JavaScript
복사
배열 메서드 응용하기
다음 배열에서 ‘라’를 모두 제거
const arr = ['가', '라', '다', '라', '마', '라'];
// 1. '라' 위치 찾기
arr.indexOf('라'); // 1
// 2. 지우기
arr.splice(1, 1);
// 3. 반복
arr.indexOf('라'); // 2
arr.splice(2, 1);
arr.indexOf('라'); // 3
arr.splice(3, 1);
arr.indexOf('라'); // -1
JavaScript
복사
위 내용을 토대로 반복문을 만들어보자
⇒ arr.indexOf(’라’)의 값이 -1이 나올때까지 반복
const arr = ['가', '라', '다', '라', '마', '라'];
while (arr.indexOf('라') > -1) {
arr.splice(arr.indexOf('라'), 1)
}
JavaScript
복사
