🚀 What You Will Learn

---

1. 배열이 필요한 이유를 설명할 수 있다.
2. 배열의 인덱스를 활용하여 원하는 요소에 접근할 수 있다.
3. 다차원 배열에서 원하는 값에 접근할 수 있다.
4. 자주 사용하는 배열 메서드의 종류를 알고 사용할 수 있다.
5. 반복문과 배열을 활용해서 배열의 값을 조작할 수 있다.

☑️ Study Keyword

• 배열이 필요한 이유와 선언하는 방법
• 배열의 값을 추가, 수정, 삭제하는 방법
• 반복문이 필요한 이유와 사용하는 방법
• 배열과 반복문을 함께 자주 사용하는 이유
• 배열의 메서드 5가지와 사용 방법

slice

slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다.
원본 배열을 변형시키지 않습니다.
그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다.

slice(시작점, 끝)

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 ]

splice

예를 들어, [1,2,3,4,5] 라는 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려고 합니다.

그럴 땐 다음과 같이 메서드를 활용하시면 됩니다.

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

Filter

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

만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환합니다.

filter() 메서드도 map() 메서드와 마찬가지로 크게 filter(callbackFunction, thisAgr) 2개의 인자를 가집니다.

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

아래의 코드를 보면서 이해해봅시다.

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

Filter 2

Assignment

courses 라는 배열이 있습니다.
level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.결과는 아래와 같아야 합니다.

[
 { level: 'hard', subject: 'Mathmatic' },
 { level: 'hard', subject: 'Science' }
]

문제풀이 :

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 result = courses.filter(value => value.level === 'hard')
 return result;
}
console.log (filtered())