[JS] 배열과 배열과 함께 쓰이는 함수들

변수에 들어가는 데이터에는 Numer, String, boolean 타입 등 많은 데이터 타입이 

들어갈 수 있는데 그 중 하나가 배열(Array)이다.

---

배열을 사용하는 이유

만약 본인이 많은 색상을 가지고 있다고 했을 때 

본인이 가지고 있는 색상의 리스트를 보기위해서는 각각의 색상 데이터를 저장했어야 했다.

물론 아래 코드와 같이 데이터를 저장할 수 있겠지만 굉장히 효율적이지 못하다.

let color1 = "black"
let color2 = "red"
let color3 = "yellow"
let color4 = "orange"

이런 비효율적인 문제를 해결하기 위해 배열이 나오게 되었다.

배열은 하나의 변수에 많은 데이터를 묶어서 저장하는 것이다.

---

배열의 사용법

let color = ["black", "white", "red", "blue"]

let 변수명 = ["아이템1", "아이템2", "아이템3", ....] 이렇게 사용할 수 있다.

배열은 [ ] 안에 와야 하며, 각각의 아이템을 넣어 주고 그 사이에 , 넣어 각각의 아이템을 구분해 준다.

위의 배열을 사용하지 않은 코드와 비교했을때 확실이 짧아지고 효율적이어 보인다.

 

배열 안에 있는 아이템들을 한 번에 보고 싶을 때는 console.log(변수명)을 써주면 된다.

let color = ["black", "white", "red", "blue"]

console.log(color)

---

만약 다 보여주는 것이 아니라 black이라는 아이템 하나만 보고 싶을 경우에는

인덱스 번호로 볼 수 있다.

let color = ["black", "white", "red", "blue"]

console.log(color[0])

배열을 정의해 주고난 후 console.log(color[인덱스 번호])을 하게되면 해당 인덱스 번호의 아이템이

출력 되게 된다. 

주의해야할 것은 컴퓨터는 숫자를 0부터 세기 때문에 black은 1번째 배열의 요소가 아니라 0번째 배열의 요소인 것이다.

 

black: 배열의 0번째 인덱스

white: 배열의 1번째 인덱스

red: 배열의 2번째 인덱스

blue: 배열의 3번째 인덱스

 

그렇다면 red를 가져오고 싶을 때는 인덱스 번호가 2이기 때문에

아래와 같이 작성해 주면 된다.

let color = ["black", "white", "red", "blue"]

console.log(color[2])

---

배열 안에 들어있는 아이템의 일부를 바꾸고 싶을 때도 있을 것이다.

그럴 때는 변수명[바꾸고 싶은 아이템의 인덱스 번호] = "바꿀 아이템"

let color = ["black", "white", "red", "blue"]
color[0] ="yellow"
console.log(color)

첫 번째 줄의 변수 color에 배열을 선언하고

두 번째 줄에서 color의 0번 인덱스의 값에 yellow를 넣었다.

그 결과 black 대신 yellow가 들어간 것을 볼 수 있다.

---

배열이랑 함께 쓸 수 있는 함수

1. push() & pop()

push(): 아이템을 배열의 마지막 부분에 추가해주는 함수

pop(): 마지막에 있는 아이템을 빼는 함수

 

push()의 예

let color = ["black", "white", "red", "blue"]
color.push("orange")
console.log(color)

변수 color에 배열을 선언해 주고 

변수명.push("추가할 아이템") 해주면

배열의 마지막 부분에 추가한 아이템이 들어가게 된다.

 

pop()의 예

let color = ["black", "white", "red", "blue"]
color.pop()
console.log(color)

변수 color에 배열을 선언해 주고 

변수명.pop()만 해주면 

맨 뒤에 있는 값인 blue가 삭제되어 나타난다.

---

2. includes()

includes(): 아이템이 있는지 없는지 확인할 때 사용(true, false)

 

includes()의 예

let color = ["black", "white", "red", "blue"]
console.log(color.includes("red"))

변수 color에 배열을 선언해 주고 

console로 출력 결과를 확인 할 때 

color 안에 red가 포함되어 있는지 확인하는 코드

있다면 true를 출력하고 없다면 false를 출력한다.

---

3. indexOf()

indexOf(): 내가 찾는 아이템의 인덱스 번호를 출력

 

indexOf()의 예

let color = ["black", "white", "red", "blue"]
console.log(color.indexOf("red"))

red 아이템의 인덱스 번호를 출력해 준다.