Array Method

오늘은 배열 메서드에 대해서 공부 중이다.
프로그래밍을 하면서 자주 쓰이기 때문에 배열의 여러 메서드에 대해서 알아보자

예)

let names = [
  "Steven Paul Jobs",
  "Bill Gates",
  "Mark Elliot Zuckerberg",
  "Elon Musk",
  "Jeff Bezos",
  "Warren Edward Buffett",
  "Larry Page",
  "Larry Ellison",
  "Tim Cook",
  "Lloyd Blankfein",
];

우선 map을 활용한 예 이다.
q1. 모든 이름을 대문자로 바꾸어서 출력하시오.
q2. 성을제외한 이름만 출력하시오.
q3. 이름의 이니셜만 출력하시오.

a1.
대문자로 출력하는 것은 toUpperCase 활용.

let nameUpper = names.map((item) => {
  return item.toUpperCase();
});
console.log(nameUpper); {return} 생략 가능

a2.
먼저 이름만 출력하려면 split 메서드에 대해서도 알아야 되는데, 나는 split 메서드를 전혀 몰라서 공식 사이트를 참고하여 공부하였다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

여기서의 예시는

const str = "The quick brown fox jumps over the lazy dog.";
let splitStr = str.split(""); // T,h,e,'','q','u' ~~ 공백도 나타냄 즉 글자하나 기준
console.log("splitStr", splitStr); 
let splitStr = str.split(" ") // The,quick  즉 띄어쓰기 기준
let splitStr = str.split(" ")[0] // The 즉 띄어쓰기를 하고 첫번째 인덱스 기준

따라서 이 문제의 경우
names를 map으로 전체를 한번 돌리고 split로 1번째 인덱스를 뽑으면 된다.

let nameValue = names.map((item) => {
	return item.split(" ")[0]
})
console.log(nameValue)

a3.
이니셜만 출력하려면 a2의 split와 forEach를 함께 사용해야 된다.

let nameNumber = names.map((item) => {   //전체를 돌리고
  let splitName = item.split(" "); // 띄어쓰기를 기준으로 짜른다
  // console.log(splitName); 
  let initial = ""; // 문자열이 들어갈 공백을 하나 만들고
  let split = splitName.forEach((item) => { 
  // forEach로 띄어쓰기를 기준으로 짜른것을 돌린다. 
    console.log("forEach item", item[0]);
    return (initial += item[0]); // 그리고 첫번째 글자를 문자열에 다 넣는다
  });
//   console.log(split);
  return initial;
});
console.log(nameNumber);

이쯤되면 map과 forEach의 차이에 대해서 의문점이 들기 시작했다.
모두 배열의 원소를 만지는 건 알겠는데 근본적으로 내가 아는게 맞나 싶은 생각이 들었다.

우선 정리하자면 forEach와 Map은 비슷한 역할을 하지만, 내가 생각하기에는 return의 여부가 가장 큰 차이인거 같다. forEach로 리턴을 했을때 외부에서는 그 값을 참조하지 못하지만 map에서 리턴을 했을때는 그 값을 외부에서 참조할 수 있다.

상황에 따라 사용하는 것이 좋아 보인다ㅎㅎ..

참조: https://dream-frontend.tistory.com/341