loop method - filter, map, every, some

반복문은 프로그래밍 언어의 기초 중 기초다. 기계어나 초기 초급언어 빼고는, 반복문이 없는 고급 언어는 없지 않을까 싶다. for와 while로 모든 반복문을 끝낼 수 있지만, 가독성이 떨어진다. 속도면에서는 for와 if가 가장 빠르지만, 유지보수성에서는 메서드를 사용하는 게 훨씬 좋을 수 있다. 반복문 메서드는 필수다.

filter()

filter는 주어진 (콜백)함수의 조건을 통과하는 모든 요소, 즉 true인 모든 요소를 모아 새로운 배열로 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); // ["exuberant", "destruction", "present"]

map()

map()은 배열내 모둔 요소 각각이 주어진 (콜백)함수를 호출한 결과를 모아 새로운 배열로 반환한다.

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);// [2, 8, 18, 32]

filter()와 map()의 공통점과 차이점
문법과 새로운 배열을 반환 하는 게 같다. 다만, filter는 조건을 만족한 요소, map은 (콜백)함수가 적용된 새 요소를 반환한다. 즉, filter는 요소를 선별하는 메서드, map은 함수를 반영하는 메서드라 생각하면 쉽다.

every()

배열의 조건 값이 모두 참일 때 true, 하나라도 조건이 맞지 않으면 false를 반환한다. AND(&&) 연산자를 떠올리면 된다.

// 화살표 함수 사용 시 
const arr=[1,2,3,4,5]

const bl = arr.every((el) => {
	return el > 1;
}); 

console.log(bl)// true

// 콜백 함수 사용 시
const arr=[0,1,2,3,4]
const callback=(data)=>{return data>1}

const bl = arr.every(callback)

console.log(bl) // false

some()

배열의 조건이 하나라도 true면 true, 모두 틀리면 false를 반환한다. OR(||) 연산자를 떠올리면 된다.

// 화살표 함수 사용 시
const arr=[0,1,2,3,4,5]

const bl = arr.some((el) => {
	return el > 1;
}); 

console.log(bl)// true

// 콜백함수 사용 시
const arr=[0,-1,-2,-3,-4]
const callback=(data)=>{return data>1}

const bl = arr.some(callback)

console.log(bl) // false

마무리

RunJS로 열심히 돌려보면서 이해하고자 애쓰고 나니, 4개 메서드간 차이가 어느정도 인지했다. 다만, 개발 시 어느 때 어떤 메서드가 적절한지는 아직까지 감이 없다. 알고리즘 풀 때 쓰일려나 싶긴 한데, 효율성에서는 메서드가 낮은 점수가 나올 수 있다고도 한다. 기계어에 가까울수록 기계가 이해하기 쉬울수록 속도가 빠르다던데, 사실인 듯하다. 

최근 게시판의 전체 체크박스를 만들면서 filter를 사용했다. 잠깐 설명하자면, 체크박스에 체크를 하면 배열에 해당 id값을 추가하고, 체크 해제하면 배열에서 삭제함으로 체크여부를 판단하는 코드였다. 이때 해제 시 filter메서로 기존 코드에서 체크 해제한 코드와 같지 않은 코드들을 모아 기존 배열을 새로운 배열로 대체해checkList.filter((el) => el !== id) 체크 해제 여부를 판단했다.

[MDN] Array.prototype.every()

[MDN] Array.prototype.some()

[MDN] Array.prototype.filter()

[MDN] Array.prototype.map()

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)