javascript 배열(Arrays) 기초

배열(Arrays)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Arrays

배열(Arrays) - Web 개발 학습하기 | MDN

 

---

배열

배열은 순서가 있는 값이다.  일반적으로 "리스트같은 객체(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 …

원본 배열을 직접 변경하는 push 예시

 

원본 배열을 직접 변경하지 않는 method : slice, concat, join …

원본 배열을 직접 변경하지 않는 slice(복사 붙여넣기) 예시

slice(x, y) x는 index 숫자로 적고(0부터시작)  y는 y값 앞까지 자르게 됨

slice(-2)=== slice(arr.length -2) 같은것

원본배열 변경하지 않는 concat 예시

---

배열에 특정 값이 포함되어있는지 확인할 수 있는 방법(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로 찾을 수 있지만 단점이 있다.

1. 브라우저 호환성이 떨어진다.
2. indexOf는 인덱스 정보까지 얻어낼 수 있지만 includes는 존재여부만 확인 가능하다. 고로 indexOf를 아는게 더 중요하다.

indexOf 5가 있을 경우 5 찾음, 10을 찾는데 없으니 -1 나옴

---

.join()

 

join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열을 구분자로 연결하여 반환한다.

 

const elements = ['Fire', 'Air', 'Water'];

elements.join()을 하면 Fire,Air,Water 이렇게 comma가 중간에 들어가고

elements.join('')의 경우 comma 없이 단어들이 쭈욱 연결되서 하나의 string으로

elements.join('-')처럼 '-'을 넣어주면단어들 사이에 '-'이 들어간다.