자바스크립트의 배열
'배열' 이라는 번역어보다 loop로 이해하니 좀 더 빠르게 숙지할 수 있었다.
for : 가장 기본적인 loop. 배열의 각 요소에 대해 반복문을 수행한다.
for (let i = 0; // i 라는 변수를 0으로 초기화. i는 arr의 index. 반복문의 시작점 설정 //
i < arr.length; // 반복문의 조건. arr.length는 arr의 요소 개수. //
i++) { // 반복문이 끝날 때마다 i의 값이 1씩 증가. 다음 배열로 이동. //
console.log(arr[i]); // arr[i]는 배열 arr의 i번째 요소를 참조. //
}
forEach : 배열의 각 요소에 지정된 함수를 실행한다. (콜백 함수를 인자로 받는다.)
arr.forEach(function(element)) {
console.log(element);
});
map : 배열의 모든 요소에 새로운 배열을 생성한다.
const newArr = arr.map(function(element)) { // function(element)는 map에 전달되는 콜백함수. //
return element * 2; // 콜백함수 내부에서 실행되는 코드. 반환된 값은 새로운 배열로 저장된다. //
});
some : 배열의 요소 중 하나라도 조건을 만족하면 true를 반환한다.
const hasNegative = arr.some(function(element)) {
return element < 0; // 현재 요소 element가 0보다 작으면 true, 아니면 false //
});
every : 배열의 모든 요소가 조건을 만족하면 true를 반환한다.
const allPositive = arr.every(function(element) {
return element > 0;
});
filter : 주어진 함수의 조건을 만족하는 모든 요소를 포함하는 새로운 배열을 반환한다.
const postitiveNumbers = arr.filter(function(element)) {
return element > 0;
});
reduce : 배열의 모든 요소에 대해 콜백 함수를 실행하고, 하나의 결과값을 반환한다. (주로 배열의 요소를 합치거나 변형할 때 사용한다)
const sum = arr.reduce(function(accumulator, currentValue)) {
return accumulator + currentValue;
}, 0); // 초기값 0부터 시작하도록 설정 //
'개념 정리' 카테고리의 다른 글
반응형 작업과 mediaquery 최소화 (0) | 2024.01.21 |
---|---|
CSS 애니메이션 최적화 (0) | 2024.01.21 |
CSS 3D 활용 (0) | 2024.01.21 |
Font의 Preload (0) | 2024.01.12 |
시멘틱 태그와 웹 표준 (0) | 2023.12.26 |