[TIL/JavaScript] 2023/01/18

Array.prototype.filter()

오늘 살펴본 'filter' 역시, array 내부에 있는 데이터를 조작하기 위한 'method'의 일종이다. filter는 여과 장치라는 뜻을 갖고 있다. "array의 데이터를, 특정한 조건을 통해 '여과'하는 역할을 하지 않을까?"라는 의구심을 품고 오늘의 학습에 임했다.

예상대로였다. '.filter' 이후에 snack.length, 즉 과자의 철자가 3글자보다 많은 값을 result로서 할당했다. 결과적으로 콘솔에는 '프링글스'와 '허니버터칩'이 입력되었다. 요컨대, 'snack.length > 3'이라는 여과의 기준을, 'filter'라는 '여과장치'를 통해서 작동시킨 것이다.

'filter'도 'map'과 마찬가지이다. 개념의 '정의'를 꽉 잡고, 다양한 함수의 형태를 활용하여 연습해야 한다.

배열에 '. filter'를 덧붙인다. 이 filter는 숫자 12 초과의 데이터만 추출하는 것을 목표로 한다. 'aboveTwelve'는 단지 이름일 뿐이기에, 실제로 12 초과의 값을 return하는 'aboveTwelve' 함수를 상단에 선언했다. 이후 콘솔을 찍어보면 원하던 값이 현출됨을 확인할 수 있다. 표현상의 차이일 뿐 기본적인 논리구조는 동일하다.

동일한 방식으로 배열 내부의 데이터 중 '짝수'만을 추출하는 과정을 코딩해봤다. 처음에 배열에 '0'을 넣고 array.js를 실행했을 때 오류가 났다. 3 뒤에 ','를 입력하지 않았던 것인데, 'unexpected number'라고 해서 '0'을 쓰면 안 되는줄 알았다.

뭔지는 잘 모르겠지만 신기해서 따라 쳐봤다. 과자 배열에서 '깡'이라는 글자를 가진 데이터만 추출하는 코드이다.

학생들로 구성된 배열에서 age가 30 이상인 데이터를 추출하는 연습을 해봤다. 이를 다른 방식으로 표현하면 다음과 같다.

역시나 결과는 동일하다.

회고

어렸을 때 기타 연주하는 것을 굉장히 좋아했다. 기타 연주를 업(業)으로 삼고 싶다는 쑥스러운 꿈도 가졌을 정도이니. 그렇게 좋아하는 기타를 처음으로 때려치우고 싶다는 생각을 했었는데, 바로 'F코드'를 마주했을 때이다.

일반적인 코드는 손가락 하나로 하나의 포인트만 잡으면 된다. 'F코드'는 왼손 검지로 6개의 줄을 동시에 찍어 눌러야 한다. 청량한 소리를 뽑아내는데 한 달 정도 소요된 것 같다.

요즘 공부하는 array의 method들이 '일반적인 코드'라면, 함수는 'F코드'인 것 같다. '함수'만 뚫어내면 나머지 액세서리들은 자연스레 해결될 것 같은 느낌을 받는다. 사실 method도 함수의 성격을 띠기에 적절한 비유인지에 대해서는 회의적이다.

어차피 잘 하게 될 거다. 다만 시간이 조금 들 뿐이다. 엇비슷한 경험이 있어서 참 다행이다. 정체되어 있는 것이 아니고 조금씩 나아지는 중이라고 자신할 수 있으니까. 내일도 화이팅!