Achievement Goals(학습목표)
배열 기초
배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
index, element, length
arr[0], push, pop,
배열에서 특정 인덱스(index)의 요소(element)를 조회 및 변경할 수 있다.
배열 내에 배열이 있는 이중 배열의 요소의 조회 및 변경을 할 수 있다.
배열의 반복
배열의 반복 기초를 이해할 수 있다.
for 문과 배열을 이용해 반복적으로 코드를 실행시킬 수 있다.
기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for 문을 만들 수 있다.
반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다.
이중 포문이 무엇인지 이해하고 활용할 수 있다.
배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
문자열과 배열의 형태 변환을 돕는 메소드를 알고 있다.
띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꿀 수 있다. str.split(" ").join(" ")
위의 배열을 다시 문자열로 바꿀 수 있다
배열 기초 메소드
배열 요소(element)의 조회, 추가, 삭제, 복사, 분리 하는 법을 이해할 수 있다.
unshift, shift, slice, length
자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray
배열의 요소(element)를 추가 및 삭제할 수 있다. push, pop
자바스크립트의 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes
배열 (Array) : 순서가 있는 값
순서는 인덱스(index)라고 부르며 1이아닌 0부터 번호를 매긴다.
해당 순서에있는 값을 요소(element)라고 부른다.
배열 작성법
let myNumber = [11, 12, 13, 14, 15];
대괄호(square bracket)을 이용해 배열을 만들고, 각각의 요소(element)는 쉼표(comma)로 구분해 줄 수 있다.
예) "myNumber라는 배열의 2번째 인덱스 값은 13입니다"
값은 인덱스를 이용하여 접근할 수있다.
예) myNumber[2]; // 13이 출력된다.
해당 값을 변경하려면 ??
예) myNumber[2] = 200; // 배열의2번째 인덱스 요소가 200으로 바뀐다.
myNumber ; // [11, 12, 200, 14, 15] ; 가 출력된다.
1. 배열의 길이 알아내기 (.length)
배열의 길이를 알아내려면 .length를 이용하면 된다
let myNumber = [11, 12, 13, 14, 15];
myNumber.length; // 5가 출력된다.
2. 배열에 요소를 추가하기 (.push)
배열의 맨 끝에 요소 추가하기
let myNumber = [11, 12, 13, 14, 15];
myNumber.push(96);
myNumber; // [11, 12, 13, 14, 15, 96];
3. 배열의 요소를 삭제하기(.pop)
배열의 마지막 요소를 삭제하기
let myNumber = [11, 12, 13, 14, 15];
myNumber.push();
myNumber; // [11, 12, 13, 14,];
4. 그렇다면 배열의 앞에 요소를 추가하거나 삭제할때는 ?
myNumber.shift() // 맨 앞에 요소 삭제
myNumber.unshift() //맨 앞에 요소 추가 배열의 반복
배열과 반복을 조합해서 쓰는 방법이 많다.
배열 myNum의 n번째 인덱스를 출력하라 // console.log(myNum[n])
라는 문제를 만났을 때는 배열+반복문을 조합하여
조건
숫자(n)은 0부터 시작한다 // let n = 0;
숫자(n)은 배열의 길이보다 작을 때까지 반복한다. // n < myNum.length;
숫자(n)은 1씩 증가한다. // n++
최종 코드 표현은 ?
let myNum = [70, 71, 72, 73];
for(let n = 0 ; n < myNumber.length; n++) {
console.log(myNum[n]);
}
그렇다면 배열안에있는 모든 요소를 더한 값을 찾으려면 ?
예) let myNum = [1, 2, 3, 4, 5];
let sum = 0;
for (let n = 0; n < myNum.length; n++){
sum = sum + myNum[i] ;
// 0+1 sum + myNum[0]
// 1+2 sum + myNum[1]
// 3+3 sum + myNum[2]
// 6+4 sum + myNum[3]
// 10+5 sum + myNum[4]
// 이렇게 반복문이 돌아갈 때 마다 누적값에 그다음 인덱스 요소를 더해준다.
} // 최종 sum 은 15가 출력된다.
0을 할당해주지않으면 undefined가 나온다.
undefined + 10 // NaN이 나온다.
더해주는 식을 쓸때는 0 초기값을 꼭 만드는게 좋다.
배열인지 아닌지 확인하기 (배열 판별하는 법)
예) let words = ['a', 'b', 'c', 'd'] ;
만약 typeof words를 콘솔창에 치면 어떤 타입이 나올까?
정답 : "object" 가 나오게 된다. // 객체와 배열 모두 타입을 찾으면 'object'가 나온다그래서 객체인지 배열인지 정확하게 알 수 없기 때문에
배열인지 확인하려면 Array.isAarray를 사용해야한다.
Array.isAarray(확인하고싶은객체)를 이용해 정확하게 배열인지 알 수 있다.
// true or false로 출력된다.
배열 요소 포함 여부 확인하기
요소 찾을 때 / .indexOf()
예) let words = ['a', 'b', 'c']
어떤 단어가 포함이되어있는지 없는지 알고싶을 때?
word.indexOf('b') // 1이 출력, 배열의 요소가 들어있는 인덱스가 출력된다.
// 특정한 단어가 없으면 -1이 출력된다.
그래서 word.indexOf('b') !== -1 // true가 출력되고
word.indexOf('d') !== -1 // false가 출력된다. 대소문자가 구별되어 요소가 다르다고 판별되니 이 부분을 잘 체크해야한다!
hasElement(배열, 찾으려는엘리먼트) // true or false
function hasElement (arr, element) {
return arr.indexOf(element) !== -1 ;
} // true or false로 값이 출력된다.
또는
word.includes() // 존재여부 확인 할수있는 내장되어있는 함수로도 true 또는 false로 찾을 수 있다.
// 약점! IE에서는 호환이 되지않으니 되도록 indexOf를 사용하는게 좋다.
