배열과 배열 메소드
자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있다.
1. 배열 생성
1-1. 기본적인 배열 생성
배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분
예제
배열 fruits를 생성
let fruits = ["사과", "바나나", "오렌지"];1-2. 배열의 크기 지정
new Array()를 사용하여 배열의 크기를 지정 가능
예제
크기가 5인 배열 numbers를 생성
let numbers = new Array(5);2. 배열 요소 접근
배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣는다.
예제
배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"3.배열 메소드
3-1. array.push() 메소드
push() 메소드는 배열의 끝에 요소를 추가
예제
push() 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]3-2. array.pop() 메소드
pop() 메소드는 배열의 마지막 요소를 삭제
예제
pop() 메소드를 사용하여 배열 fruits의 마지막 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]3-3. array.shift() 메소드
shift() 메소드는 배열의 첫 번째 요소를 삭제
예제
shift() 메소드를 사용하여 배열 fruits의 첫 번째 요소를 삭제
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]
3-4. array.unshift() 메소드
unshift() 메소드는 배열의 맨 앞에 요소를 추가
예제
unshift() 메소드를 사용하여 배열 fruits의 맨 앞에 "사과"를 추가
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]3-5. array.splice() 메소드
splice() 메소드는 배열의 **요소를 삭제하거나, 새로운 요소를 추가**
예제
splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가
let fruits = ["사과", "바나나", "오렌지"];
// 배열의 두번 째 요소를 삭제하고, 두 번째 자리에, "포도" 추가해라
fruits.splice(1, 1, "포도");
console.log(fruits); // ["사과", "포도", "오렌지"]3-6. array.slice() 메소드
slice() 메소드는 배열의 일부분을 새로운 배열 만들기
예제
slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열 만들기
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits); // ["바나나"]3-7. array.forEach() 메소드
forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행
즉, 배열의 각 요소에 어떤것을 수행하고 싶을 때 forEach(매개변수) 사용
매개변수 자리에 함수를 넣는 것 : 콜백 함수
예제
forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력
let numbers = [4, 2, 3, 1, 5];
numbers.forEach(function (item) {
console.log("item =>", item);
});
// item => 4
// item => 2
// item => 3
// item => 1
// item => 53-8. array.map() 메소드
map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환
- 항상 원본 배열의 길이만큼이 return 된다. 따라서 return 값 꼭 넣어야 함!
예제
map() 메소드를 사용하여 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만들기
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function (number) {
return number * number; //🌟 map함수는 반드시 리턴 문 가져야함!
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]3-9. array.filter() 메소드
filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 원본 배열의 길이는 상관 없이 그 결과가 true인 요소만 새로운 배열로 반환
예제
filter() 메소드를 사용하여 배열 numbers에서 짝수만 추출한 새로운 배열 만들기
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function (number) {
return number % 2 === 0; // 2의 배수만 필터
});
console.log(evenNumbers); // [2, 4]3-10. array.reduce() 메소드
예제
numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum);
3-11. array.find() 메소드
find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환
예제
find() 메소드를 사용하여 배열 numbers에서 3보다 큰 첫 번째 요소 찾기
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function (number) {
return number > 3;
});
console.log(foundNumber); // 43-12. array.some() 메소드
some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인
예제
some() 메소드를 사용하여 배열 numbers에서 짝수가 있는지 확인
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function (number) {
return number % 2 === 0;
});
console.log(hasEvenNumber); // true3-13. array.every() 메소드
every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인
예제
every() 메소드를 사용하여 배열 numbers의 모든 요소가 짝수인지 확인
let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function (number) {
return number % 2 === 0;
});
console.log(isAllEvenNumbers); // true
3-14. array.sort() 메소드
sort() 메소드는 배열의 요소를 정렬
예제
sort() 메소드를 사용하여 배열 numbers를 오름차순으로 정렬
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function (a, b) {
return a - b;
});
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]3-15. array.reverse() 메소드
reverse() 메소드는 배열의 요소를 역순으로 정렬
예제
reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집기
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
