기초공사 (html,css,javascript)
map( ) 본문
DeepDive_27
map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다.
그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
이때 원본 배열은 변경되지 않는다.
forEach와 다른점 :
forEach 메서드와 map메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다.
forEach메서드는 언제나 undefined를 반환하고, map메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 차이가 있다. 즉, forEach메서드는 단순히 반복문을 대체하기 위한 고차함수이고, map메서드는 요소값을 다른값으로 매핑한 새로운 배열을 생성하기 위한 고차함수이다.
자바스크립트 map() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디
map() 함수는 배열을 순회해서 콜백 함수를 사용하여 원하는 조건에 따라 처리한 새로운 배열을 반환하기 위한 함수입니다. 이 함수는 배열 내 각 요소를 변환하는데 사용되며, 변환된 결과를 모
codingeverybody.kr
왜 map과 join을 하는지 궁금했다.
이해할떄까지!!!!
//예시
const items_box = [
{ id: 1, title: "첫 번째 게시글" },
{ id: 2, title: "두 번째 게시글" },
{ id: 3, title: "세 번째 게시글" },
];
console.log(items_box);
const itemsHTML1 = items_box.map((item) => `<li>${item.title}</li>`); // 대괄호로 배열로 표시된다.
const itemsHTML = items_box.map((item) => `<li>${item.title}</li>`).join("\n"); // 문자로 되어야한다.
console.log(itemsHTML1);
console.log(itemsHTML);
//ul로감싸야한다.
const itemsUl = `<ul>${itemsHTML}</ul>`;
console.log(itemsUl);
==>
map함수를 사용하는 이유는 주어진 배열의 각 요소를 새로운 형태로 변환하기 위해서다.
원래의 배열을 변경하지 않고. 각 요소에 특정 작업을 수행한 결과를 새로운 배열로 만들고 싶을 때 map을 사용한다.
이렇게 하면 원래 배열의 데이터를 유지하면서, 변환된 새로운 데이터를 활용할 수 있다.
예를들어. HTML 마크업 생성의 경우, 각 게시글 데이터(객체)를 HTML문자열로 변환해야 할 필요가 있다.
이 과정에서 map함수는 각 객체를 받아 HTML 문자열을 반환하는 역할을 한다.
변환된 문자열들은 새로운 배열에 저장되고, 이 배열은 그 후 join을 통해 하나의 문자열로 합쳐지게 된다.
// 다른 예시
<body>
<div id="container">
<h1>상품 설명12</h1>
<h2>Deep 공부하자</h2>
<p>느리더라도 완주하자</p>
<p>주부로 바쁘지만</p>
<button id="order">추가하기</button>
</div>
<h1>Web Programming</h1>
<ul id="items">
<li><span>✗</span>HTML</li>
<li><span>✗</span>CSS</li>
<li><span>✗</span>Javascript</li>
<li><span>✗</span>React</li>
</ul>
<div id="orderInfo"></div>
<div id="orderInfo2"></div>
</body>//
const products = [
{ id: 1, name: "사과", price: 1000 },
{ id: 2, name: "바나나", price: 500 },
{ id: 3, name: "체리", price: 1500 },
];
// 배열을 html에 넣어야하기 때문에 다른 형태로 만든다.
// 다른형태로 만들기위해서는 다른 형태의 배열로 만들어서 문자로 고친다.
const productHTML = products
.map((product) => `<li><span>✗</span>${product.name}-${product.price}`)
.join("\n");
console.log(productHTML);
// items아래에 넣으려면.노드추가.
/*
const ul_remove = document.querySelector("#items"); //ul
const items = document.querySelectorAll("#items > li"); //li들
*/
//ul_remove.appendChild(productHTML);//---> 왜추가가 안되지. --> 아래처럼 하니 추가가 되지만 삭제는 안된다.
// productHTML.parentNode;
// console.log(productHTML.parentNode);
// 기존 내용에 새로운 HTML 추가---이게맞음
ul_remove.innerHTML += productHTML;
여기에서 의문,
ul_remove.appendChild(productHTML)
부모노드에 문자열로 만들었던 li들 즉 productHTML을 넣으면 들어가야 하는거 아닌가.
==>
appendChild메서드가 DOM요소를 추가하는 메서드이기 떄문이다.
그러나 productHTML은 문자열이며, appendChild 메서드는 문자열을 직접 추가할 수 없다.
문자열을 DOM 요소로 변환한 후 추가해야 한다.
문자열을 DOM요소로 변환하기 위한 한가지 방법은 innerHTML 속성을 사용하는거다.
이속성을 사용하면 기존의 내용을 대체하므로, ul 요소의 innerHTML 에 기존 내용을 유지하면서
새로운 HTML문자열을 추가하는 방식으로 ul_remove.innerHTML += productHTML; 하면된다.
//
그럼 여기에서 난, 또 의문
DOM요소와 문자열은 무슨 차이인가?
DOM 요소:
DOM(Document Object Model) 요소는 HTML 문서의 구조적인 객체로, JavaScript를 통해 동적으로 조작할 수 있습니다.
DOM 요소는 HTML 태그를 표현하고, 속성을 가지며, 이벤트 리스너를 할당할 수 있습니다. 예를 들어, document.createElement('div')는 새로운 <div> 요소를 생성합니다.
DOM 요소는 부모, 형제, 자식과 같은 관계를 통해 문서의 계층 구조를 형성합니다.
브라우저는 DOM 요소를 렌더링하여 사용자에게 시각적으로 표시합니다.
문자열:
문자열은 텍스트 데이터의 연속으로, HTML 마크업이나 다른 텍스트 데이터를 표현할 때 사용됩니다.
문자열 자체는 HTML이나 CSS 코드를 포함할 수 있지만, 단순히 텍스트 형태로 존재하며 브라우저에 의해 직접 렌더링되지 않습니다.
문자열을 DOM에 추가하려면, 해당 문자열을 DOM 요소로 변환하거나, 기존 DOM 요소의 innerHTML 또는 textContent 속성을 통해 삽입해야 합니다.
'academy > JavaScript' 카테고리의 다른 글
| 노드 배열로 작성 및 삭제 - Array / node / parentNode / remove (0) | 2024.04.29 |
|---|---|
| nodelist 와 htmlcollection 차 (0) | 2024.04.25 |
| return과 map( ) (1) | 2024.04.18 |
| 배열예제 (0) | 2024.04.07 |
| return (0) | 2024.04.06 |
