map함수의 각각의 배열 요소를 뜻하는 element

 

공식문서:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

 

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

 

map 함수에서 사용되는 콜백 함수의 매개변수 element는 배열의 각 요소를 나타냅니다. 즉, arr 배열의 각 요소에 대해 콜백 함수가 실행될 때, element 변수는 현재 처리 중인 요소의 값을 가지게 됩니다.

따라서 주어진 코드에서 element는 각각 3, 4, 5, 6이 되며, 콜백 함수는 각 요소를 3으로 곱한 값을 반환하여 새로운 배열 modifiedArr를 생성합니다. 최종적으로 modifiedArr은 [9, 12, 15, 18]가 됩니다.

 

콜백함수: 

콜백 함수(callback function)란 다른 함수에 전달되어 실행되는 함수를 의미합니다

 

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element * 3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

 

 

 

 

여기서 익명 함수인 function(element) {...} 가 arr.map 함수의 인자로 전달된 콜백 함수입니다. map 함수는 배열의 각 요소에 대해 콜백 함수를 호출하고, 콜백 함수가 반환하는 값을 모아 새로운 배열을 생성합니다.

콜백 함수에서 element는 현재 처리 중인 배열의 각 요소를 나타냅니다. 각 요소에 대해 element * 3을 계산하여 반환하고 있으므로, 최종적으로 modifiedArr은 [9, 12, 15, 18]가 됩니다.

즉, map 함수의 역할은 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 콜백 함수가 반환하는 값을 새로운 배열에 모아 반환하는 것입니다. 이때 전달된 함수가 콜백 함수로 동작하게 됩니다.

 

아하 이거를 모르니까 당연히 이해를 못하지.

 

인덱스 idx는 .map 함수의 콜백 함수 내에서 자동으로 제공되는 매개변수 중 하나입니다. .map 함수는 배열을 순회하며 각 요소에 대해 주어진 콜백 함수를 실행하고, 이때 각 요소의 값과 함께 해당 요소의 인덱스를 제공합니다.

 

(list, idx) => {

            return (

                <li key={idx} className="port-list">

                    <Link to={`/projects/${list.name}`}>

                        <div>

                            {list.project === "Toy" && (

                                <div className="toy">

                                    <img src="./images/toy.png" alt="" />

                                </div>

                            )}

                            <div className="info-wrap">

                                <div className="txt-wrap">

                                    <div className="name">{list.name}</div>

                                    <span className="time">{list.period}</span>

                                    <p>

                                        <span className="label">Description</span>

                                        {list.description}

                                    </p>

                                </div>

                                <div className="tech">

                                    <span className="label">Tech Stack</span>

                                    <ul>

                                        {list.tech.map((list, idx) => (

                                            <li key={idx}>{list}</li>

                                        ))}

                                    </ul>

                                </div>

                            </div>

                        </div>

                        <div className="logoWrap">

                            <div className="logo">

                                <img src={`./images/logo/${list.logo}.png`} alt="" />

                            </div>

                        </div>

                    </Link>

                </li>

            );

        }

 

다른 예시

인덱스 idx는 .map 함수의 콜백 함수 내에서 자동으로 제공되는 매개변수 중 하나입니다. .map 함수는 배열을 순회하며 각 요소에 대해 주어진 콜백 함수를 실행하고, 이때 각 요소의 값과 함께 해당 요소의 인덱스를 제공합니다.

 

아래 부분에서 map 함수를 사용할 때, (list, idx) => { ... } 형태의 화살표 함수가 콜백 함수입니다. 이 함수는 배열 data.portfolioList의 각 요소를 대상으로 실행됩니다. 여기서 idx는 각 요소의 인덱스를 나타냅니다.

 

const portfolioList = data.portfolioList.map((list, idx) => {
  // ...
});

 

map 함수의 콜백 함수에서는 list는 배열의 각 요소(포트폴리오 항목)를 나타내고, idx는 해당 요소의 인덱스를 나타냅니다. 이렇게 idx를 활용하여 각 포트폴리오 항목에 대한 고유한 키를 생성하고 있습니다.

간단한 예시로 아래와 같이 배열을 순회하면서 요소와 인덱스를 출력하는 코드를 보여드리겠습니다:

 

const fruits = ['apple', 'banana', 'orange'];

fruits.map((fruit, idx) => {
  console.log(`Index: ${idx}, Fruit: ${fruit}`);
});

 

위 코드의 출력은 다음과 같습니다:

 

Index: 0, Fruit: apple
Index: 1, Fruit: banana
Index: 2, Fruit: orange

 

즉, .map 함수를 사용할 때, 콜백 함수의 매개변수로서 요소와 인덱스를 활용할 수 있습니다.

 

map 함수의 콜백 함수에서 사용하는 매개변수의 이름은 개발자가 마음대로 변경할 수 있습니다. 따라서 idx를 다른 이름으로 변경하여 사용할 수 있습니다. 예를 들어, 아래와 같이 idx를 index로 변경하여 코드를 작성할 수 있습니다:

 

const fruits = ['apple', 'banana', 'orange'];

fruits.map((element, index) => {
  console.log(`Index: ${index}, Fruit: ${element}`);
});

 

 

 

---

예시

이 부분 출처:

https://powerdev.tistory.com/65

[JavaScript] array map함수

 

 

const array = [1, 2, 3, 4, 5];   const result = array.map(function(current, index, array){     console.log(current);     console.log(index);     console.log(array);     return current*2; });   console.log(result);

 

 

 

결과

---

 

 

반환 값 current * 2으로 인해 새로운 배열 [2, 4, 6, 8, 10]이 만들어졌습니다.

 

 

map 주의점인데 뭔말인지 모르겠음

 

https://tang25.tistory.com/3

자바스크립트(JavaScript) - map() 배열의 내장함수 #1 [엄탱 개발일지]

 

 

이게 무슨 말이야 map함수의 주의할 점이라는데

 

const array = [0,1,2,3];

 

const changeArray = array.map((num, i, arr)=>

{ arr.push(10); return num*2; })

console.log(array); console.log(changeArray)

 

여기서 원래 기대값이 [0,2,4,6,20,20,20,20] 이 아니라 왜 [0,2,4,6] 이렇게 되는거야?

 

 

 

설명에서 또한 처리할 요소는 callback함수가 호출 되기전, 즉 map 함수가 시작되는 동시에 [0, 1, 2, 3]으로 정해져 있고 그 이후의 값들은 callback 함수가 호출되지 않습니다.

 

이렇게 되서..즉 map과 시작하는 동시에 [0,1,2,3]으로 정해져 있어서 push(10)해도.. 적용이 안된다는 말 맞지?

 

 

네, 맞습니다. map 함수는 배열의 각 요소에 대해 콜백 함수를 순차적으로 호출하며, 이때 초기 배열의 내용이 변경되지 않습니다. 따라서 map 함수의 시작 시점에는 이미 기존 배열의 값 [0, 1, 2, 3]이 확정되어 있습니다. 따라서 push(10)은 기존 배열에는 영향을 미치지 않습니다.

 

이러한 특성으로 인해 map 함수는 원본 배열을 변경하지 않고, 각 요소에 대한 새로운 배열을 생성합니다. 따라서 map 함수의 콜백 함수 내에서 수행된 arr.push(10);는 새로운 배열에만 영향을 미치고, 기존 배열은 변경되지 않습니다.

 

종합하면, map 함수는 시작 시점에 이미 초기 배열이 결정되어 있기 때문에 arr.push(10);이 적용되지 않는 것이 맞습니다.

 

이후의 값들은 map 함수의 각 요소에 대한 콜백 함수 호출을 통해 새로운 배열이 형성됩니다.

 

 

 

유레카

 

아 map함수 안에 콜백함수는 초기배열에 영향을 주지 못한다는 말이구나 맞지?


맞습니다. map 함수 내부의 콜백 함수에서 수행하는 작업은 초기 배열에 영향을 주지 않습니다. map 함수는 원본 배열의 각 요소에 대해 순차적으로 콜백 함수를 호출하고, 콜백 함수에서 반환하는 값으로 새로운 배열을 생성합니다. 이때 초기 배열은 변경되지 않습니다. 그래서 map 함수 내에서 수행된 작업은 새로운 배열에만 영향을 미치게 됩니다