1. 이벤트 버블링
- 이벤트가 자식요소에서 부모요소로 전파되는 현상
- 막기위한 방법으로는 e.stopPropagation()
을 사용
const $table = document.createElement('table');
const rows = [];
let turn = 'o';
const callback = (e) => {
if (e.target.textContent) {
alert('빈칸이 아닙니다.');
return;
}
e.target.textContent = turn;
turn = turn === 'o' ? 'x' : 'o';
};
for (let i = 0; i < 3; i++) {
const $tr = document.createElement('tr');
const cells = [];
for (let i = 0; i < 3; i++) {
const $td = document.createElement('td');
cells.push($td);
// $td.addEventListener('click', callback); // 세번이나 addEventListener를 써야함
$tr.append($td);
}
$table.addEventListener('click', callback); // 이벤트 버블링을 이용해 한번만
$table.append($tr);
rows.push(cells);
}
document.body.append($table);
2. forEach 쓰는 이유
- index가 들어있어서 해당 원소의 위치를 찾을 때 유용
- 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수
- 배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행
- forEach() 함수 자체의 반환 값은 항상 undefined!
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
}); // 1 2 3 4 5
const result = numbers.forEach((number) => {
return number * 2; // 콜백 함수에서 어떤 값을 반환해도 forEach()의 반환 값은 여전히 undefined
});
console.log(result); // undefined
3. forEach() vs map()
사용방법
const numbers = [1, 2, 3, 4, 5];
// forEach() 메서드 사용
const squaredNumbersForEach = [];
numbers.forEach(function(number) {
squaredNumbersForEach.push(number * number);
});
console.log("Using forEach():", squaredNumbersForEach);
// "Using forEach():" [1, 4, 9, 16, 25]
// map() 함수 사용
const squaredNumbersMap = numbers.map(function(number) {
return number * number;
});
console.log("Using map():", squaredNumbersMap);
// "Using map():" [1, 4, 9, 16, 25]
- forEach()
함수는 각 요소에 대해 작업을 수행하면서 배열을 변경하거나 다른 배열에 값을 추가, map()
함수는 변환 작업을 통해 새로운 배열 생성
forEach()
함수의 장점
- map()
함수보다 코드가 간결
- 반환 값이 없기 때문에, 작업 결과를 다른 변수에 저장하거나 활용 필요 x
- 원본 배열을 직접 변경할 수 있으므로, 필요에 따라 배열을 수정 0
forEach()
함수의 단점
- 배열의 각 요소를 다른 값으로 바꾸거나, 특정 작업을 수행하거나, 배열의 각 요소를 필터링하는 데 사용할 수 없습니다.
- 새로운 배열을 반환하지 x
map()
함수의 장점
- 각 배열 요소를 변환하여 새로운 배열을 반환
- 반환된 배열은 원본 배열과 길이가 같고, 각 요소는 변환된 값으로 구성
- 변환 작업을 통해 새로운 배열을 생성하기 때문에 원본 배열은 변경되지 x
map()
함수의 단점
- 새로운 배열을 생성하는 과정에서 메모리를 사용하므로, 큰 크기의 배열에 대해서는 성능 이슈 0
- forEach()
함수보다 코드가 김
** 전반적으로, map() 함수는 배열의 요소를 처리하는 데 더 유용한 함수입니다. 하지만, forEach() 함수는 코드가 간결하여 특정 상황에서는 더 유용한 함수가 될 수 있다.
4. Array.from()
- 유사 배열을 배열로 바꿔줌
5. 배열.flat()
- 2차원 배열을 1차원 배열로 바꿔줌
- 기존 배열 영향 x
const array = [[1,1],[1,1]]
array.flat() // [1, 1, 1, 1]
6. 배열.every()
- 1차원 배열만 가능
- 배열 모두가 true이면 true
- forEach는 return이 있더라도 배열 전체를 순회함, 하지만 every()는 false를 만날경우 바로 종료!
- 훨씬 효율적
const draw = rows.flat().every((cell) => cell.textContent); // cell.textConetent가 없는 경우를 만나면 바로 false 반환하면서 종료
7. 배열.some()
- 배열 중 하나가 true이면 true
- 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트
const array = [1, 2, 3, 4, 5];
// 짝수가 있는지 확인
const even = (element) => element % 2 === 0;
console.log(array.some(even)); // true
'Study > 자바스크립트' 카테고리의 다른 글
[#4] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문> (0) | 2024.07.22 |
---|---|
[#3] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문> (1) | 2024.07.10 |
[#2] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문> (1) | 2024.07.10 |
복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문> (0) | 2024.06.15 |