안녕하세요! 오늘은 자바스크립트에 map에 대해 끝장을 내보려고 이렇게 찾아왔습니다..!!
사실 map에 대해서 느낌은 알고 있었지만 정확히 어떤 의미를 가지고 있고 어떻게 활용하는지에 대해 잘 모르고 있었기 때문에 더 이상 미룰 수 없다는 생각을 가지고 다시 공부하고 포스팅을 하려고 합니다...!!!
그러면 바로 시작해보겠습니다.....! ('노마드 코더'와 함께...)
map이란?
함수를 실행하는 모든 배열의 아이템에 function을 실행하는 메서드
라고 합니다.. 음 일단은 map이란 메서드를 한 줄로 요약하기는 약간 애매하니 다 자세한 설명으로 이어 나아가 보겠습니다..!
예시와 함께
(해당 코드는 유튜브 '노마트 코더' 영상 속 코드를 참고해서 제작했습니다)
네 보시면 fruits 변수에 해당 과일들이 담겨져 있습니다
그것들은 모두 통으로 되어 있기 때문에 map 을 통해서 그 배열에 대해 하나씩 속성을 넣어줄 수 있는 것이죠..!
해당 코드에서 저는 모든 과일에 good 이라는 단어를 과일 이름 앞에 두고 싶습니다
그래서 good 이라는 변수를 만들고 fruits.map 을 적고 함수를 각각에 적용해줍니다
어제 배웠던 화살표 함수를 이용해서 해당 코드 처럼 간단하게 적어줍니다!
위의 코드에서 화살표 함수를 이용 안한다면
요렇게 적어줄 수 있습니다..!!
(제가 화살표 함수를 다시 그냥 함수로 바꿨다니... 좀 뿌듯하네요..ㅎ)
그래서 콘솔의 값은
[ 'good apple', 'good orange', 'good banana', 'good tomato' ]
의 값을 가져옵니다
조금 더 쉽게 설명하자면...
map 을 이용하면 흔히 변수의 배열에서 하나씩 뽑아서 내가 원하는 행동들을 할 수 있다... 입니다
예를 들어서 위에서는 good 이라는 단어를 배열의 단어들에게 주었다면
[ 1, 4, 9, 16, 25, 36 ] (위의 콘솔 결과)
문자열이 아닌 숫자열로 나타나게 된다면 서로 곱해서 결과값을 만들어낼 수 있습니다
이게 끝인가요?
아....아닙니다...!!
map 의 역할은 어떻게 이용하느냐에 따라서 무궁무진 합니다
위에서는 간단하게 단어를 붙여주거나 숫자를 서로 곱하기만 했지만 map 을 이용해서 각 배열의 단어에서 모두 대문자로 바꾼다던가 반대로 모두 소문자로 바꾼다거나
조건을 걸어주어서 각 배열에 값 하나하나에 조건 비교를 해볼 수도 있습니다!!
이 많은 기능들은 문제를 풀어보거나 프로젝트를 진행하면서 만나볼 수 있을 것 같습니다
앞에서 말씀드린 것들과 다른 기능들을 만나서 활용하게 된다면 추가적으로 포스팅 하도록 하겠습니다...!!
map 녀석 내가 어느정도는 파악했다 임마
항상 map 을 보면 찾아보게 되는데 아무리 찾아봐도 무슨 뜻인지 몰라서 깊게 들어가지 못하고 얇게 들어가서 느낌만 알고 나왔는데 이제는 더 이상 미룰 수 없을 것 같아서 이렇게 map 을 가지고 포스팅을 해보았습니다...!!
너무 급하고 길게 작성이 된게 아닌가 약간 걱정이 됩니다...ㅎ
제가 더 익숙해진다면 꼭 이 글을 수정하러 오도록 하겠습니다!!
네 오늘도 제 글을 봐주셔서 감사드리고 항상 화이팅이고
행복하자구요~~!!!
