본문 바로가기

Front-end26

ArrayFunction3 (forEach) 자바스크립트 배열 메소드의 가장 기본이 되는 forEach를 이제서야 글로 정리하게 되었다. (딱히 어떤 사유는 없었지만 궁금한거 위주로 먼저 작성을 하다보니...) 쨋든 forEach는 뭐하는 함수이냐! 개발에 입문한 사람이라면 for를 이용한 반복문은 알고 있을 것이다. forEach 메서드는 for문의 형식을 코드로 한땀한땀 적지 않아도 되게끔 해주는 함수라 보면 된다. let arr = [1,2,3,4,5] for(let i = 0; i < arr.length; i++){ console.log(arr[i]) }; // 1 // 2 // 3 // 4 // 5 arr.forEach(function(val){ console.log(val) }); // 1 // 2 // 3 // 4 // 5 위의 두 코.. 2021. 12. 21.
ArrayFunction 2 (find, filter) find와 filter는 사용하는 방법, 메커니즘은 동일하다. 다만 return값이 다른데 find의 경우에는 조건을 만족하는 최초의 값을 찾아 반환하고 filter의 경우에는 조건에 만족하는 모든 값을 배열의 형태로 반환해준다. 두 함수 모두 함수의 대상이 되는 배열의 상태를 변화시키지 않는 함수이다. (arr.find() , arr.filter()를 해도 arr는 변화가 없음) find와 filter는 모두 인자로 콜백 함수를 넘겨주면 된다. 콜백함수의 인자는 조건 검사의 대상이 되는 배열의 값이 순서대로 넘어가고 return 값은 true false로 결정될 수 있는 조건식이 들어가면 된다. 아래의 코드 블록을 보면 이해가 쉽다. const arr1 = [1,2,3,4,5,1] // const ar.. 2021. 12. 14.
Array Function 1 (Map) map 함수는 ES5에서 처음 등장한 스펙으로 실제로 로직 구현에서 자주 등장하는 함수 중 하나이다. 우선 아주 쉬운 예를 하나 보도록 하자 let arr = [1,2,3,4,5] let arr2 = arr.map((item) => { item + '일' }); console.log(arr) // [1,2,3,4,5] console.log(arr2) // ['1일','2일','3일','4일','5일'] 위의 코드와 같이 어떠한 배열이 있는데, 그 배열에 모두 똑같은 변화(추가 혹은 삭제 혹은 모두 같은 값)를 주기 위해 사용하는 것이 Array.prototype.map()이다. 그렇다면 실제로 직접 해 볼 수 있는 예제로 몇가지를 수행해보도록 하자! (예제는 MDN사이트에서 가져왔으므로 정답은 MDN사이.. 2021. 12. 13.
유용한 Array 함수들 js에서 주로 쓰이는 함수는 대부분 배열과 관계되어 있는 함수들이다. 즉, 배열만 자유자재로 다룰 수 있다면 js를 어느정도 안다고 말할 수 있다. 그럼, 자주 사용하는 배열 관련 함수들에 대해 알아보자 배열관련 함수는 배열의 상태를 변화시키는 함수와 배열의 상태를 변화시키지 않는 함수로 크게 두 갈래로 나눌 수 있다. 배열의 상태를 변화시키는 함수 배열의 상태를 변화시키지 않는 함수 splice sort push pop shift unshift slice reverse forEach find filter reduce map concat every join 지금까지 js를 쓰면서 사용한 빈도수가 높은 것을 위에서부터 나열했다. 자세한 사용법은 MDN을 참고하면 쉽게 알아볼 수 있으니 MDN을 애용하도록 .. 2021. 12. 8.

티스토리툴바