JS) 아주아주아주 중요, 유용한 배열 함수, array function! 7개 - foreach, map, filter, some, every, find, findex 이제 배열 왔을 때 for문은 그만!

프론트엔드 개발자를 준비하며, 리액트 수업을 들으며 포트폴리오를 준비하고 있는 요즘! 

그래도 웹 퍼블리셔로서 2~3년 경험으로

html, css, js 기본은 할 줄 안다고 생각했는데, 

 

JS 아직 잘 모르나보다. 

이번에 배열 관련 함수들을 알고 사용해봤는데 이거 굉장히 편리하다! 

노트 해놨다가 보고 또 보자 

 

참조 - JS) Array

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

Array - JavaScript | MDN

 

JS 중요하고 편리한 배열 함수 7가지

 foreach()
.map()
.filter()
.some()
.every()
.find()
vs .filter()
.findIndex()

 

 

 

.foreach(함수)

• .foreach( (item)⇒{ } )
• array.foreach( (item, index) ⇒ { } )
• 모든 배열값(index)에 대해 함수 실행
• 리턴값이 없음. → 단지 각 배열값에 대해 함수 실행

.map(함수)

• .map( 함수 )
• array.map( (item) ⇒ {} )
• let data = array.map( (item, index) ⇒ { return item } ) console.log(data)
• return → array값
• 언제 사용하면 좋을까? : 오브젝트 값 내에서 필요한 속성만 뽑아 연산할 때!
• API 데이터들은 Json 오브젝트 데이터 형식으로 받아오는데, 이때 많이 데이터를 가공할 때 많이 사용!

.filter(함수)

• return 값에 조건에 해당하는 값만 받을 수 있음! (필터링)
  • for문 + if문 안써도 됨!!
• return 조건 → array값

.some(함수)

• 배열 값 중, 조건식에 참인게 하나라도 있으면 true return
• or 같은 느낌

.every(함수)

• 배열의 모든 값이 조건식에 참이면 true return
• and 느낌

.find(함수)

• 인스턴스의 find() 메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 undefined가 반환됩니다.
• 조건에 맞는 값을 찾아 줌!
• 배열값이 아닌 값 하나만 반환!
• vs .filter()
  • .filter() : 조건에 맞는 모든 값을 ‘배열’로 반환
  • .find() : 조건에 딱 맞는 ‘값 하나’ 찾기에 좋음 조건에 맞는 답이 여러개 라면 첫 번째 값을 반환

.findIndex(함수)

• 인스턴스의 findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.
• 만족하는 요소가 없으면 -1을 반환합니다.

 

let array = [
    "anna",
    "apple",
    "bay",
    "charlie",
    "david",
    "dove",
    "elizabeth",
    "frank",
    "george"   
];

// .forEach()
array.forEach((item, index) => {
    console.log(item, index);
});

// .map()
let data = array.map((item, index)=>{
  return item + " hello"
});
console.log(data);

let ceoList = [
	{name:"Larry Page", age : 23, ceo: true},
	{name:"Tim Cook", age : 40, ceo : true},
	{name:"Elon Musk", age : 55, ceo : false}
];

let ceoName = ceoList.map((item) => {
	return item.name
});
console.log(ceoName);

//.filter()
let filteringData = array.filter((item)=>{
	return item.startsWith("d")
});
console.log(filteringData);

//.some()
let someData = array.some((item)=>{
	return item.startsWith("a")
});
console.log(someData);

//.every()
let everyData = array.every((item) =>
	return item.startsWith("a")
)
console.log(everyData);

// .find()
let findData = array.find((item) => {
	return item.startsWith("d")
})
console.log(findData);