배열함수 (map함수)

주땡이·2024년 2월 22일

JS

목록 보기
4/12

자바스크립트 배열 함수에 대해 정리해보려고 한다. 아직도 배열 함수 메서드가 언제 쓰이는지 잘 모르겠지만, 확실하게 짚고 넘어가야할 부분은 맞는 것 같다.
es6 문법을 사용하여 작성해보겠다.

// 누군지 전혀 모르는 사람들의 이름을 배열로 가져와봤다.

let names = [
	"Kim Ji Won",
	"Lee So Yeon",
    "Park Jun Ho",
	"Choi Min Ji",
    "Kang Seong Min",
    "Yoon Min Ho",
]

map함수 : return 값을 배열에 담아서 반환하는 함수이다.

  • '모든 이름을 대문자로 바꿔서 출력하라'라는 요청을 받았다고 치자. 현재 가지고 있는 배열에서 조건에 맞게 아이템을 처리한 후 다시 배열로 반환해줘야 한다.
// 모든 이름을 대문자로 바꿔서 출력하라
// 화살표 함수를 이용하였고, return문이 한 줄일 때는 return 키워드와 중괄호 생략 가능하다

let makeUpperLetter = names.map((item) => item.toUpperCase())

console.log(makeUpperLetter)
  • 이렇게 하면 결과가 어떻게 될까?
    -> map함수 안에서 toUpperCase라는 자바스크립트 내장함수를 이용하였기 때문에 모든 배열의 아이템들은 대문자로 바뀔 것이고, 바뀐 아이템들이 map함수에 의해 배열로 반환될 것이다.
// 결과

	[ 'KIM JI WON', 'LEE SO YEON', 
	'PARK JUN HO', 'CHOI MIN JI', 
	'KANG SEONG MIN', 'YOON MIN HO', ]
  • 이름의 이니셜만 출력하고 싶을 땐 어떻게 해야할까?
  1. ex) names 배열의 0번째 아이템엔 공백을 포함한 3덩어리의 단어(?)가 들어가있다.
    -> ["Kim Ji Won" ]
  2. split(" ")을 이용하여 공백을 기준으로 아이템을 분리하여 names 배열안에 배열로 넣는다.
    -> ["Kim", "Ji", "Won" ]
  3. map함수를 이용하여 반환할 배열을 만들어줄건데, charAt()를 이용하면 문자열에서 특정 인덱스에 해당하는 문자를 반환해주니 split함수로 쪼갠 문자열의 0번째 인덱스에 해당하는 문자열만 뽑아 join함수로 붙여주자!
let initials = names.map((item) => {
	let words = item.split(" ")
    return words.map((word) => word.charAt(0)).join("")

})
console.log(initials)
// 결과

[ 'KJW', 'LSY', 'PJH', 'CMJ', 'KSM', 'YMH' ]
profile
내가 보려고 만들었습니당

0개의 댓글