과거의 이력/javascript
[javascript] for문 제발 그마아안! (map 사용하여 한줄로 끝내기)
정많이 정만이
2022. 2. 8. 16:58
더이상 for문 그마아안!
한줄로 끝내는 map 구문 기록하기!
예를들어, 사용자의 id와 age 정보가 담긴 userInfo 변수가 있다고 가정해보면
나는 해당 객체에서 userAge만 뽑아 새로운 변수에 담고싶다.
주로 이럴때 사용하는것이 for문이다.
예를들면 이런식이겠다.
/*
userInfo변수의 값이
[{id: "1", age: "20"},
{id: "2", age: "32"},
{id: "3", age: "29"}]
일때
*/
let userAge = []
for (let i = 0; i < userInfo.length; i++) {
userAge[i] = userInfo[i]['age']
}
하지만 map을 사용하여 한줄로 끝내보겠다.
// userInfo변수의 값이 [{id: "1", age: "20"}, {id: "2", age: "32"}, {id: "3", age: "29"}] 일때
let userAge = userInfo.map(el => el['age'])
두개의 코드 전부
userAge를 콘솔로 찍어보면 다음과 같이 값이 잘 담긴다.
>>["20", "32", "29"]
사실 map은 특정 변수를 연산할때만 사용하곤 했는데,
이렇게 value값을 뽑는 로직에 사용하니 훨씬 간결하고 직관적이다.
항상 직관적이고 명확하고 간결한 코드를 짜도록 하자.
참고링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map