JavaScript : Array

javascript# 📙 Array : 배열

배열은 특정한 요소들(데이터들)을 일렬로 일정하게 모아놓은 집합으로
배열안에는 요소인, element들로 구성되어 있는데, 예시는 아래와 같다.
let CamilleArray = [19, 50, 'What', false]
배열에 들어갈 수 있는 데이터 타입은 아무거나 들어갈 수 있으며, 심지어 배열안에 다른 배열 또한 들어갈 수 있다.

배열의 또다른 특징은 배열안에는 순서가 있다는 점이고, 0부터 순서(index)를 셀 수 있다. 여기서 19는 0번째의 요소이다.

📌 1. 요소에 접근하기

let fruits = ['Apple', 'Banana','Lemon',100]
let first = fruits[0]
console.log(first);
< Apple

fruit 옆에 [0] 순서번호를 입력하여 해당 배열의 해당 요소에 접근 할 수 있다.

📌 2. 요소 수정하기

응용1

let fruits = ['Apple', 'Banana','Lemon',100]
let first = fruits[0]

fruits[0] = 'Strawberry';
console.log(fruits[0]);
< Strawberry

응용2

let fruits = ['Apple', 'Banana','Lemon',100]
let first = fruits[0]

fruits[0] = 'Strawberry';
fruits[2] = 300;
console.log(fruits);

<['Strawberry', 'Banana', 300, 100]

📌 3. 배열 길이 구하기

let fruits = ['Apple', 'Banana','Lemon',100]
console.log(fruits.length)
< 4

여기서 배열의 길이가 4지만 인덱스(순서)는 3인 이유는 배열의 시작을 0부터 세기 때문이다.
0,1,2,3 총 배열의 길이는 4이지만 인덱스의 끝은 3이라고 볼 수 있다.
🔔 유념해야할 점 ! 길이가 4인 배열은 인덱스의 가장 끝은 3이다.

📌 4. 배열 추가 및 삭제 하기

✔ 배열 추가하기

기본형 : 배열명.push(추가할내용)

let fruits = ['Apple', 'Banana','Lemon',100]
fruits.push('Kiwi');
console.log(fruits)
<['Apple', 'Banana','Lemon',100, 'Kiwi']

✔ 배열 삭제하기

pop - 배열 끝에서 부터 삭제

1.
let fruits = ['Apple', 'Banana','Lemon',100]
fruits.pop();
<['Apple', 'Banana', 'Lemon']
2.
let fruits = ['Apple', 'Banana','Lemon',100]
fruits.pop();
fruits.pop();
<['Apple', 'Banana']

shift -배열의 가장 처음 부터 삭제

let fruits = ['Apple', 'Banana','Lemon',100]
fruits.shift();
<['Banana', 'Lemon', 100]

위의 그림에서는

splice - (배열의 index의 시작점,삭제할 요소의 개수,추가하고 싶은 요소)구체적인 순서로 삭제

(인자 3개가 들어갈 수있지만, splice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있다.)

응용1

let num = [1,2,3,4,5];
num.splice(2,1,10);

console.log(num); // [ 1, 2, 10, 4, 5 ]

응용2

let fruits = ['Apple', 'Banana','Lemon',100]
fruits.splice(1,2);
<['Banana', 'Lemon']

slice - (배열의 index의 시작점, 배열의 index의 끝점)

첫번째 인자 : 배열의 index의 시작점
두번째 인자 : 배열의 index의 끝점
예를 들어, [1,2,3,4,5] 라는 배열이 있을 때, 숫자 2~4까지만 남기고 싶을 떼

let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]
let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]

시작점인 index가 1인 요소부터 끝점인 index가 4인 요소까지를 포함해 2,3,4를 담은 배열을 리턴한다.
slice 메서드를 사용한 이후에 원본 배열인 nums를 콘솔창에서 확인해보면 변함없는 것을 확인할 수 있는데, slice를 사용할 때는 꼭 새로운 변수명을 할당해주어야 한다.

🔔 음수가 들어가는 경우!!

let nums = [1,2,3,4,5]
let nums_new = nums.slice(-2)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 4, 5 ]

음수가 들어갈 경우 끝에서부터 해당하는 숫자 만큼의 요소를 배열에 담아 리턴하게 된다.

filter : filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환한다.

만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환한다.
filter() 메서드도 map() 메서드와 마찬가지로 크게 filter(callbackFunction, thisAgr) 2개의 인자를 가진다.

callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적이다.

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filtered () {
  let result = fruits.filter(fruits => fruits.includes('ap'));
  return result;
}
console.log(filtered());

let courses = [
{level:'easy', subject: "English" }, 
{level:'hard', subject: "Mathmatic" }, 
{level:'medium', subject: "Literature" }, 
{level:'hard', subject: "Science" }, 
{level:'medium', subject: "Socialogy" }
];

function filtered(){
  let hardWord = courses.filter(courses => courses.level ==='hard');
  return hardWord;
}
console.log(filtered());

value > 10 이라는 조건에 맞는 요소들로만 이루어진 새로운 배열을 만들었다.

let numbers = [10, 4, 32, 17, 5, 2];

// 첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법) 
let result = numbers.filter((value)=> value > 10);

console.log(result);      // [ 32, 17 ]

// 두번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법) 
function isBiggerThanTen (value) {
    return value > 10;
}

let result = numbers.filter(isBiggerThanTen);

console.log(result);      // [ 32, 17 ]

📌 5. 배열 안 배열

let camille = ['Ca','Miile',[1,2,3,4,5],true,false]
console.log(camille[2]);
< [1, 2, 3, 4, 5]

여기서, 배열안에 있는 배열 자체가 2번째 요소로 출력된다.

✔ 배열안에 배열에 접근하기

let camille = ['Ca','Miile',[1,2,3,4,5],true,false]
console.log(camille[2][0]);
<1

중첩된 배열 ! 여기서 배열안의 호출된 요소는 대괄호는 없이 1하나가 나온다.

📌 6. 배열의 길이를 활용한 규칙 생성

let camille = ['Ca','Miile',[1,2,3,4,5],true,false]
console.log(camille[camille.length-1]);
<false

🔔 camille.length-1 배열의 길이가 엄청 길거나 하면, 마지막 숫자를 얻기에 어려울 수 있다.
따라서 규칙을 활용해 식을 만들어 적용하면 가장 마지막 요소를 언제든 프린트하게 할 수 있다. 배열의 총길이 -1 하면 마지막 요소의 인덱스 넘버에 접근 할 수 있다.
결과적으로,
camille이라는 배열에 가장 마지막 요소는console.log(camille[camille.length-1]) 로 도출해 낼 수 있다.