Javascript 배열다루기 (filter,map,every)

임동현·2022년 3월 25일
0

Javascript에서 참 유용하게 사용할 수 있는 배열 함수들 입니다.
처음 접했을 때는 뭔가 사용법도 어려워 보이고 복잡해 보였지만 정말 편합니다

[map]
map은 말 그대로 매핑 시켜준다고 생각하시면 편합니다. 배열의 원소들을 입맛에 맞게 바꿔줄 수 있습니다.
배열을 loop 돌면서 바꿔줍니다 .

간단한 예로 1~10까지의 배열이 있고 1을 더해주는 코드 입니다.
하지만 저렇게 한다고 arr 변수가 바뀌는 것은 아니므로 주의해야 합니다.

let arr [1,2,3,4,5,6,7,8,9,10];
arr.map(item = > item+1);

/////

arr.map( => _+1)
// (10) [2,3,4,5,6,7,8,9,10,11]
arr
(10) [1,2,3,4,5,6,7,8,9,10]

조금 더 복잡한 경우를 본다면 각 원소와 함께 인덱스도 가져올 수 있습니다. 그리고 단순 연산이 아닌, 다른 형태로도 바꿀 수 있습니다. 아래에서 json 형태로 바꿔보았습니다.

arr.map((item,index)=>{
	return { 
			"number" : item,
			"idx" : index
		}
});
 (10) [{...},{...},{...},{...},{...},{...},{...},{...},{...},]

→ 0 {number: 1 , index :0}
→ 1 {number: 2 , index :1}
→ 2 {number: 3 , index :2}
→ 3 {number: 4 , index :3}
→ 4 {number: 5 , index :4}
→ 5 {number: 6 , index :5}
→ 6 {number: 7 , index :6}
→ 7 {number: 8 , index :7}
→ 8 {number: 9 , index :8}
→ 9 {number: 1 , index :9}
length: 10

[filter]
말 그대로 필터링 해주는 함수 입니다. 결과가 true 라면 해당 원소는 살아남습니다.

arr.filter(item => item > 5);

결과
arr.filter(item => item>5);
→ (5) [6,7,8,9,10]

조금 더 복잡하게 해서 3으로 나눠지는 수만 찾는다 했을때, inline으로도 되지만 if문을 사용해 보겠습니다.

arr.filter(item=>{
		if(item%3 ===0 )
		return true;
});

결과 (3) [3,6,9]

[every()]

.every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드 입니다. 모든 원소가 조건을 만족하면 true , 하나라도 만족하지 않으면 false를 반환합니다.

var jbary1 = [1,2,3,4,];

jbAry1.every(function(x) { return x<5}) :true

jbAry1.every(function(x) { return x<4}) : false

var jbAry2 = [];
jbAry2.every(function(x){return x > 4}) : true

※map
map은 말 그대로 매핑 시켜준다고 생각하시면 편합니다. 배열의 원소들을 입맛에 맞게 바꿔줄 수 있습니다.
※filter
말 그대로 필터링 해주는 함수 입니다. 결과가 true 라면 해당 원소는 살아남습니다.

※every()
.every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드 입니다. 모든 원소가 조건을 만족하면 true , 하나라도 만족하지 않으면 false를 반환합니다.

profile
프론트엔드 공부중

0개의 댓글