🔥 #6 javascript(배열)

🔥 배열

여러개의 데이터를 담을 때 100개의 데이터가 있다고 가정하면 이 100개의 데이터 변수를 지정해 줄 것이냐? 아니다, 하나의 변수로 여러개의 데이터를 담을 때 쓰는 것이 바로 배열이다. 배열은 관련 있는 데이터들을 하나로 묶어서 하나의 변수 아래에 저장하는 것이다.

그림과 같이 num이라는 배열명을 지정해주고 아이템을 배열한다. 그 아이템에 번호가 지정되는데 그 번호를 인덱스라고 하고 인덱스는 0부터 시작한다.

🔥 사용법

let fruit = ["banana", "apple", "mango","grape"];

console.log(fruit);
console.log(fruit[0]); // 0번째에 있는 것을 출력한다. banana

fruit이라는 배열명을 지정해주고 그 배열안에 아이템을 지정해 주는 것이다.

console.log는 결과값을 출력하는 것이다. console.log(fruit); 의 결과값은
['banana', 'apple', 'mango', 'grape'] 나온다.
console.log(fruit);의 결과 값은 banana 가 나온다.

여기서 만약 banana를 cherry로 grape를 tomato 바꾸고 싶다면,

fruit[0] = "cherry";
console.log(fruit);

fruit[3] = "tomato";
console.log(fruit);

위와 같이 코드를 작성한다. banana의 인덱스는 0번 인덱스이고 grape는 3번 인덱스이다. 0번 인덱스에 cherry라고 할당해주고 3번 인덱스에 tomato을 할당해주어 출력하면 나오는 결과값은 ['cherry', 'apple', 'mango', 'cherry'] 라고 나오는 것을 알 수 있다.

🔥 배열함수

1. pop 함수
   pop 함수는 마지막에 있는 아이템을 제거하고 그 아이템값을 리턴하는 것이다.

fruit.pop();
console.log(fruit);

위와 같이 코드를 작성 했다. 그럼 결과 값은 ['cherry', 'apple', 'mango'] 가 나오는 것을 볼 수 있다.
마지막에 있는 아이템을 제거한 결과값이다.

2. push 함수
   push 함수는 배열 끝에 아이템을 추가하고, 배열의 최종 길이를 리턴한다.

fruit.push("pineapple");
console.log(fruit);

결과 값은 ['cherry', 'apple', 'mango', 'pineapple'] 이 나오는 것을 볼 수 있다. 배열 끝에 아이템이 추가되어 있는 것을 볼 수 있다.

3. includes 함수
   includes 함수는 배열에 아이템이 포함되어 있으면 true 리턴, 아니면 false 리턴한다.

console.log(fruit.includes("apple"));

위 같은 코드는 furit라는 배열에 apple이 포함되어 있나?를 물어보는 것이다.
결과값은 true 이다. apple이 포함되어 있으니 당연한 결과 이다.

4. indexOf 함수
   indexOf 함수는 배열 안에 수많은 아이템들이 있을 때 일일히 배열의 index를 셀 수 없으니 index번호를 찾아줘! 명령하여 해당 아이템의 인덱스 번호를 리턴한다.

console.log(fruit.indexOf("apple"));

결과 값은 1이다. 배열의 apple은 1번 인덱스 번호로 지정되어 있어 나온 결과이다.

5. slice 함수
   slice 함수는 배열의 아이템을 잘라내는 역할(시작점, 끝점-끝점 미포함)

console.log(fruit.slice(1,3));

결과 값은 ['apple', 'mango'] 이다. 왜 시작점을 1로 끝점을 3으로 인덱스를 줬는데 결과 값이 pineapple이 아니라 mango 냐면 시작점 끝점은 포함하지 않아서 이다.

❌ slice 함수는 console.log(fruit);로 출력못하나요?
slice 함수는 기존의 배열을 건들이지 않고 새로운 배열을 만들어 내는 것이므로 위와 같이 출력을 원하면 새로운 변수를 선언해 그 안에 할당을 해야한다. 예를 들어 이렇게다

let fruit
let sub_fruit = fruit.slice(1,3);
console.log(sub_fruit);

위와 같이 작성하면 된다.

6. splice 함수
   splice 함수는 시작점부터 개수만큼 실제 배열에서 아이템 제거한다.

fruit.splice(2,2); //(시작점, 개수)
console.log(fruit)

결과값은 ['cherry', 'apple'] 이다.
시작점인 인덱스 2에서 2개만큼 제거한 것이다.

🔥 length

배열의 함수는 아니지만 배열의 크기를 리턴해주는 속성

let array = ["apple","banana","mango"]
console.log(array.length)

결과값은 3 이다. 배열에 아이템이 총 3개라서 나온 값이다.