javascript 배열(Arrays) 기초
배열(Arrays)
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Arrays
배열(Arrays) - Web 개발 학습하기 | MDN
이 모듈의 이 마지막 문서에서, 우리는 배열을 살펴볼 것입니다. 배열이란 하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법입니다. 여기서 우리는 왜 배열이 유용한지 보
developer.mozilla.org
배열
배열은 순서가 있는 값이다. 일반적으로 "리스트같은 객체(list-like objects)"라고 기술되며. 배열은 보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체이다.
let alphabet = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]배열은 대괄호[ ] 를 사용해 배열을 만들고 각각의 원소(element)는 쉼표(comma)로 구분해준다.
배열에서 순서는 index라고 부르며 0부터 번호가 시작된다. 위 알파벳의 인덱스를 표로 나타내면 이러하다
| index | element |
| 0 | a |
| 1 | b |
| 2 | c |
| 3 | d |
| 4 | e |
해당 배열의 인덱스를 조회 하는 방법은
alphabet[3] // ‘d’해당 배열의 길이를 알아내고 싶다면?
alphabet.length // 5
인덱스와 길이는 시작한는 번호가 다르다. 인덱스는 0부터 시작, 길이는 1부터 시작. 즉, 위 alphabet의 index는 4까지 나오고 .length를 통한 길이는 5까지 나온다.
배열의 반복
배열과 반복문을 조합하는 경우 반복문에서 배열의 요소를 한번씩 출력하려면
let myNum = [1, 5, 15, 9]
for(let n = 0; n < myNum.length ; n++){
console.log(myNum[n])
}
반복문에서 n은 0번째로 시작(인덱스가 0부터 시작되므로)하여 n<myNum.length까지 길이 5 전까지(4) 증가++ 되도록 반복하는것이니 n값은 myNum의 인덱스 0, 1, 2, 3 을 나타나게한다.
만약 위에서 나온 배열의 숫자들을 모두 더하고싶다면?
let myNum = [1, 5, 15, 9]
let sum = 0;
for(let n = 0; n < myNum.length ; n++){
sum = sum+myNum[n]
}
console.log(sum)배열 요소를 추가 삭제하는 방법(매서드 push, pop, unshift, shift 사용으로 추가 또는 삭제)
| .push() | 배열 element 뒤쪽에 ( )속의 element 추가 |
| .pop() | 배열 element 뒤쪽에 ( )속의 element 삭제 |
| .unshift() | 배열 element 앞의 ( )속의 element 추가 |
| .shfit() | 배열 element 앞의 ( )속의 element 삭제 |
원본 배열을 직접 변경하는 method : pop, push, shift, unshift, splice …
원본 배열을 직접 변경하지 않는 method : slice, concat, join …
slice(x, y) x는 index 숫자로 적고(0부터시작) y는 y값 앞까지 자르게 됨
배열에 특정 값이 포함되어있는지 확인할 수 있는 방법(indexOf, includes)
| 변수.indexOf(‘’) | 배열 속 몇 번째 index에 해당 값이 위치하는지 알려줌 |
| .IndexOf(‘찾는것’) ! == -1 // true일때는 해당 값이 있다. .IndexOf(‘찾는것’) ! == -1 // false 일때는 해당값이 없다. |
IndexOf를 사용하여 true, false 값을 만들면 해당 값이 있는지 없는지 확인 할 수 있다! (IndexOf에서 -1이 나온다는것은 배열에 해당 값이 없다는 뜻.) |
| let words = [‘a’, ‘b’, ‘c’] function.함수이름(arr, element){ let isPresnt = arr.indexOf(element) !== -1; return isPresent; } |
함수 선언으로 배열안에 해당 엘리먼트 있는지 없는지 true, fasle값으로 찾는 식. 함수이름(words, ‘a’) // true 함수이름(words, ‘zzz’) //fasle |
.indexOf() // indexOf 배열 속 몇 번째 index에 해당 값이 위치하는지 알려줌
let words = [‘a’, ‘b’, ‘c’]
//배열속 문자가 있는지 없는지 indexOf 로 알 수 있는 방법
//indexOf 를 사용하였을때 -1이 나온다면 배열속에서 인덱스 순번이 존재하지 않는다는 뜻.(인덱스는 0부터 시작하므로)
// 즉, 인덱스값이 -1이 아닐경우는 해당 엘리먼트가 존재하는것.
words.IndexOf(‘a’) ! == -1 // true일때는 해당 값이 있다.
words.IndexOf(‘zzz’) ! == -1 // false 일때는 해당값이 없다.
// IndexOf를 사용하여 true, false 값을 만들면 해당 값이 있는지 없는지 확인 할 수 있다!
// (IndexOf에서 -1이 나온다는것은 배열에 해당 값이 없다는 뜻.)
let words = [‘a’, ‘b’, ‘c’]
function.finder(arr, element){
let isPresnt = arr.indexOf(element) !== -1;
return isPresent;
}
// 함수 선언으로 배열안에 해당 엘리먼트 있는지 없는지 true, fasle값으로 찾는 식.
finder(words, ‘a’) // true
finder(words, ‘zzz’)//fasle
indexOf 말고 내장된 메소드 includes로 찾을 수 있지만 단점이 있다.
- 브라우저 호환성이 떨어진다.
- indexOf는 인덱스 정보까지 얻어낼 수 있지만 includes는 존재여부만 확인 가능하다. 고로 indexOf를 아는게 더 중요하다.
.join()