자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있다. 이번에는 자바스크립트의 배열과 배열 메소드에 대해서 알아봅시다.
1. 배열 생성
1-1. 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"];
배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분
1-2. 배열의 크기 지정
new Array()를 사용하여 배열의 크기를 지정할 수 있다.
let numbers = new Array(5);
위의 예제에서는 크기가 5인 배열이 생성되지만, 모든 요소는 undefined로 초기화된다.
let numbers = new Array(5).fill(0); // [0, 0, 0, 0, 0]배열의 크기를 지정하면서 값을 채우려면 Array.fill() 메소드를 사용할 수 있다.
2. 배열 요소 접근
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"
배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣는다. 위의 예제에서는 배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력.
3. 배열 메소드
3-1. push() 메소드
배열의 끝에 요소를 추가한다.
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]
3-2. pop() 메소드
배열의 마지막 요소를 삭제하고, 그 값을 반환한다.
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]
3-3. shift() 메소드
배열의 첫 번째 요소를 삭제하고, 그 값을 반환한다.
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]
3-4. unshift() 메소드
배열의 맨 앞에 요소를 추가한다.
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]
3-5. splice() 메소드
배열의 특정 위치에 요소를 삭제하거나, 추가할 수 있다.
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits); // ["사과", "포도", "오렌지"]
위의 예제에서는 splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가한다.
3-6. slice() 메소드
배열의 일부분을 잘라내어 새로운 배열을 만든다.
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits); // ["바나나"]위의 예제에서는 slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만든다.
3-7. concat() 메소드
두 개 이상의 배열을 합쳐서 새로운 배열을 만 든다.
let fruits = ["사과", "바나나"];
let moreFruits = ["오렌지", "딸기"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["사과","바나나","오렌지", "딸기"]
3-8. forEach() 메소드
배열의 각 요소에 대해 콜백 함수를 실행한다.
let fruits = ["사과","바나나","오렌지"];
numbers.forEach(function(fruits) {
console.log(fruits);
});
// 사과
// 바나나
// 오렌지위의 예제에서는 forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력한다.
3-9. map() 메소드
map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환한다.
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
위의 예제에서는 map() 메소드를 사용하여 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만듭니다.
map() 함수
배열을 처리해서 새로운 배열로 반환하기 위한 함수입니다.
arr.map(function(currentValue,index, arr) {
// 변환(mapping)할 로직: 변환된 결과를 반환해야 함.
}[, thisArg]);
- currentValue: 현재 처리 중인 배열의 요소입니다.
- index (선택적): 현재 처리 중인 배열 요소의 인덱스입니다.
- arr (선택적): **map**이 호출된 배열입니다.
- thisArg (선택적): **function**에서 **this**로 사용될 값입니다.
3-10. filter() 메소드
filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 배열의 요소 중 조건을 만족하는 요소들로만 새로운 배열을 만든다.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
위의 예제에서는 filter() 메소드를 사용하여 배열 numbers에서 짝수만 추출한 새로운 배열을 만다.
3-11. reduce() 메소드
배열의 모든 요소를 합쳐서 하나의 값을 만든다.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum);
3-12. find() 메소드
find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 배열에서 조건을 만족하는 첫 번째 요소를 찾아서 반환한다.
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
return number > 3;
});
console.log(foundNumber); // 4
위의 예제에서는 find() 메소드를 사용하여 배열 numbers에서 3보다 큰 첫 번째 요소를 찾습니다.
3-13. some(), every() 메소드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인한다.
- some(): 배열의 요소 중 하나라도 조건을 만족하면 true를 반환한다.
- every(): 배열의 모든 요소가 조건을 만족하면 true를 반환한다.
let numbers = [1, 2, 3, 4];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
let allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true
3-14. sort() 메소드
배열의 요소를 정렬한다. 기본적으로 sort()는 문자열을 유니코드 순서로 정렬한다. 숫자 정렬을 위해서는 비교 함수를 사용해야 한다.
let fruits = ["사과", "바나나", "오렌지"];
fruits.sort();
console.log(fruits); // ["바나나", "사과", "오렌지"]
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. reverse() 메소드
배열의 순서를 반대로 뒤집는다
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
4. 배열 순회 방법
1. for 루프
가장 기본적인 반복문으로, 배열의 인덱스를 사용해 순서대로 요소를 처리할 때 사용한다.
배열의 인덱스를 직접 제어하면서 순회해야 할 때 사용
let fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // 'apple', 'banana', 'orange'
}2. forEach
배열의 각 요소에 대해 콜백 함수를 실행하는 메소드
배열의 각 요소에 대해 동일한 작업을 수행하고 싶을 때 사용
단순히 배열의 각 요소에 대해 함수를 실행할 뿐, 새로운 배열을 생성하거나 결과를 반환하지 않음
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// 'apple', 'banana', 'orange'3. for...of
배열의 각 요소에 직접 접근하여 배열의 값을 순서대로 순회할 때 사용
let fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
console.log(fruit); // 'apple', 'banana', 'orange'
}이 방법 Iterable 객체(=반복할 수 있는 객체) (배열, 문자열, Map, Set 등)에서도 사용된다
4. map
map은 배열의 각 요소를 동일하게 변형하여 새로운 배열을 만들 때 사용
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]5. filter
배열에서 특정 조건을 만족하는 요소들만 선택하고 싶을 때 사용
let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]6. reduce
배열의 요소를 이용해 하나의 값을 계산하고 싶을 때 사용
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
7. every와 some
배열의 모든 요소가 또는 일부 요소가 조건을 만족하는지 확인하고 싶을 때 사용
let numbers = [1, 2, 3, 4];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
let allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true
8. sort와 reverse
배열을 정렬한 후, 그 순서를 뒤집는 등의 작업을 할 때 사용
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b).reverse();
console.log(numbers); // [5, 4, 3, 2, 1]