array.map((value, index, array) => {return })
(1) map으로 배열에 있는 값 출력하기
const team = ["A", "B", "C"]
const app = team.map((value, index, Array) => {return value})
console.log(app)
//[ 'A', 'B', 'C' ](2) 배열의 각 값들 3번씩 반복하여 출력하기
const team = ["A", "B", "C"]
const app = team.map((value, index, Array) => {return value.repeat(3)})
console.log(app)
//[ 'AAA', 'BBB', 'CCC' ]repeat를 사용해 배열을 반복하여 출력했다.
repeat(3)은 각 배열을 3번씩 찍어준다는 의미다. repeat(100)으로 하면 각 배열을 100번씩 출력한다.
(3) 배열의 길이만큼 출력하기
const array = ["1","2","3","4","5"]
const array1 = array.map((value) => {return value.length})
console.log(array1)
//[ 1, 1, 1, 1, 1 ]
위에 예제를 돌렸을 때, 1,2,3,4,5 이렇게 값이 나올 줄 알았는데 1,1,1,1,1 이렇게 나왔다.
이해가 안 갔는데 배열을 length로 돌린 거니까 각 배열 요소의 길이만큼 나오는 것이었다.
그렇다면 아래 예제는 어떻게 나오는지 확인해 보자.
const array = ["12","2222","32","422","522"]
const array1 = array.map((value) => {return value.length})
console.log(array1)
//[ 2, 4, 2, 3, 3 ](4) 배열의 배수 구하기
const array = ["1","2","3","4","5"]
const array1 = array.map((value) => {return value * 5})
console.log(array1)
//[ 5, 10, 15, 20, 25 ]{return value 5}는 배열에 5를 곱하여 값을 리턴하라는 뜻이다.
곱하기(), 나누기(/), 덧셈(+), 뺄셈(-) 다 가능하고 숫자는 내가 원하는 만큼 정할 수 있다.
(5) index를 활용해서 값 출력하기
const array = [10,20,30,40]
const array1 = array.map((index) => {return (index + 1)})
console.log(array1)
//[ 11, 21, 31, 41 ]처음에 index로 값을 추출하려고 위의 코드로 적었지만 [ 11, 21, 31, 41 ]이라는 값이 나왔다. 내가 예상했던 답은 [ 1, 2, 3, 4 ]였다. 이 값이 나온 이유는 뭘까?
map(index) 이 부분이 이름은 index지만 value를 뜻하는 것이기 때문이다. 그래서 배열의 값에 1을 더한 값이 나온 것이다.
인덱스로 값을 구하려면 아래와 같이 적어야 한다.
const array = [10,20,30,40]
const array1 = array.map((array, index) => {return (index + 1)})
console.log(array1)
//[ 1, 2, 3, 4 ]array 배열의 인덱스는 0,1,2,3이지만 +1을 했으니 1,2,3,4가 나온다.
추가로 위의 코드에 *500 값을 구하려면 아래 코드와 같이 작성하면 된다.
const array = [10,20,30,40]
const array1 = array.map((value, index) => {return (index + 1) * 500})
console.log(array1)
//[ 500, 1000, 1500, 2000 ].
.
.
.
.
오늘 배운점
map 함수를 이해해서 좋다!
map에 (value, index, array)가 있지만 value를 가장 많이 활용할 거 같다.
this도 있지만 우선은 생략 ㅎ.ㅎ..
코딩하면서 더 많이 응용해 보고 자유자재로 잘 쓸 수 있기를!
