반복문 챕터에서 대량의 정보를 처리하는 법을 학습했다면, 이번 챕터에서는 대량의 정보를 보관하고 관리하는 법에 대해서 학습한다. 이번 챕터가 끝나면 언제, 어떻게 배열을 사용하는지 이해하고, 활용할 수 있다. 특히, 배열을 선언하고 배열의 요소를 추가하거나 변경, 삭제하는 방법을 확실하게 학습해야 한다.
✅ Achievement Goals
배열 기초
- 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
- index, element, length
- arr[0], push, pop
- 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
- 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
- 이중 배열의 요소를 조회하거나 변경할 수 있다.
배열의 반복
- 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다.
- 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
- 기본적인 for 문
for (let i = 0; i < 5; i++)을 응용하여 다양한 for문을 만들 수 있다.- 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다.
- 이중 반복문이 무엇인지 이해하고 활용할 수 있다.
- 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
- 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
- 띄어쓰기
(" ")로 문자열을 구분하여, 배열로 변경할 수 있다.str.split(" ").join(" ")- 문자열을 요소로 가지는 배열을 띄어쓰기
(" ")로 구분한 문자열로 변경할 수 있다.배열 기초 메소드
- 배열 요소(element)를 조회할 수 있다.
bracket notation- 배열을 복사, 분리하는 법을 이해할 수 있다.
slice, splice- 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다.
Array.isArray- 배열의 요소(element)를 추가 및 삭제할 수 있다.
push, unshift, pop, shift- 배열의 길이를 구할 수 있다.
length- 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다.
indexOf, includes
배열은 순서가 있는 값
순서 = index 라고 부른다. 그리고 0부터 번호를 매긴다.
값 = 요소(element)라고 부른다.
//대괄호를 이용해서 배열을 만든다.
//myNumber라는 배열의 3번째 인덱스값은 999다. (용어 기억하기)
let myNumber = [123, 456, 789 ,999];
myNumber[3]; // 999 (인덱스 조회)
myNumber[3] = 1; // (인덱스 값 변경) 999 => 1
myNumber; // [123, 456, 789 ,1]
//배열의 길이
let myNumber = [123, 456, 789 ,1]
mynumber.length; // 4
//요소(element) 추가
let myNumber = [123, 456, 789 ,1]
mynumber.push(999) // [[123, 456, 789 ,1 , 999]
//요소(element) 삭제
let myNumber = [123, 456, 789 ,1]
mynumber.pop(1); // [123, 456, 789]배열과 반복문
let myNumber = [123, 456, 789 ,1]
//배열 myNumber의 n번째 인덱스를 출력하라.
//조건:
//숫자 n은 0부터 시작
//숫자 n을 배열의 길이보다 작을 때까지 반복
let n = 0; // 초기화
n < myNumber.length; // 조건식
n++; // 증감문
//반복문 적용
let myNumber = [123, 456, 789 ,1]
let sum = 0;
for(let n = 0; n < myNumber.length; n++) {
sum = sum + myNumber[n];
}
// sum 값을 0으로 설정하는 이유는
// 0으로 설정하지 않으면 undefined값이 출력된다.
// 만약 미설정 시
// sum = undefined + 123 = NaN이라는 값이 출력.
// 때문에 sum = 0; 이라는 값을 반드시 할당해야 한다.배열의 확인
let fruits = ['apple', 'banana', 'melon'];
typeof '문자열' // string
typeof 123 // number
typeof fruits // object
typeof [1, 2, 3] // object
Array.isArray(fruits) // true
Array.isArray([1, 2, 3])배열 요소 추가 및 삭제
push, pop // shift, unshift
뒷쪽
push, pop
let arr = ['kim', 'jaewan'];
arr.push
앞쪽
arr.shift()
console.table(arr)
arr.unshift(good)
console.table(arr)
배열 요소 포함 여부 확인
요소(element)의 순서(index) 찾기
let words = ['I', 'AM', 'IRONMAN'];
word.indexOf('AM') // 1
words.indexOf('없는 단어') // -1
words.indexOf('다른 것')
<Boolean>
words.indexOf('IRONMAN') !== -1 // true
words.indexOf('없는 것') !== -1
false
<index 내 element 찾기>
// 특정한 배열의 어떤 찾고자 하는 element가
// 있는지 없는지를 boolean값으로 반환해준다
// function hasElement (index, element)
function hasElement(arr, element) {
return arr.indexOf(element) !== -1
hasElement(words, 'IRONMAN') // true
hasElement(words, '없음') // false
words.includes('IRONMAN') // true
words.includes('없음') // false
// indexOf가 더 범용성이 좋음
// includes는 IE에서 사용불가배열의 활용
배열 만들기 (create an Array)
let fruits = ['Apple', 'Banana']
console.log(fruits.length)
// 2배열 메서드 (array methods)
Array.isArray()객체가 Array라면
true를 반환하고, 아니라면false를 반환합니
.concat다수의 배열을 합치고, 병합된 배열을 반환
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [7,8,9]; var array = arr1.concat(arr2, arr3); console.log(array); // 1,2,3,4,5,6,7,8,9
.push배열 뒷부분에 값을 삽입
let arr = [ 1, 2, 3, 4 ]; arr.push( 5 ); console.log( arr ); // [ 1, 2, 3, 4, 5 ]
.pop배열 뒷부분의 값을 삭제
let arr = [ 1, 2, 3, 4 ]; arr.pop(); console.log( arr ); // [ 1, 2, 3 ]
.unshift배열 앞부분에 값을 삽입
let arr = [ 1, 2, 3, 4 ]; arr.unshift( 0 ); console.log( arr ); // [ 0, 1, 2, 3, 4 ]
.shift배열 앞부분의 값을 삭제
let arr = [ 1, 2, 3, 4 ]; arr.shift(); console.log( arr ); // [ 2, 3, 4 ]
.splice배열의 특정위치에 요소를 추가하거나 삭제
.splice(index, 제거할 element 개수, 배열에 추가될 element )
let arr = [ 1, 2, 3, 4, 5, 6, 7 ]; arr.splice( 3, 2 ); console.log( arr ); // [ 1, 2, 3, 6, 7 ] // 3번째 인덱스에서부터 2개 제거 let arr = [ 1, 2, 3, 4, 5, 6, 7 ]; arr.splice( 2, 1, "a", "b"); console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ] // 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가
.slice배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환
.slice(startIndex 이상, endIndex 미만) -> arr.slice() 공백을 입력하면 전체 배열을 가져온다.
var arr = [ 1, 2, 3, 4, 5, 6, 7 ]; var newArr = arr.slice( 3, 6 ); console.log( 'slice', newArr ); // [ 4, 5, 6 ]
.toString배열을 문자열로 바꾸어 반환한다
var arr =[ 1, 2, 3, 4 ]; console.log( arr.toString() ); // 1, 2, 3, 4
.valueOftoString과 비슷, 그러나 배열을 반환
var arr =[ 1, 2, 3, 4 ]; console.log( arr.valueOf() ); // [ 1, 2, 3, 4 ]
.map배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; var isEven = function( value ) { return value % 2 === 0; }; var newArr = arr.map( isEven ); console.log( newArr ); // [ false, true, false, true, false, true, false, true, false, true ]
.indexOf배열에서 지정한 값과 같은 요소의 첫 인덱스를 반환없으면 -1을 반환
fruits.push('망고') // ["딸기", "바나나", "망고"] let pos = fruits.indexOf("바나나") // 1
Array.from(str)
mutable immutable
https://doesitmutate.xyz/
