ARRAYS와의 애증 관계

사전 작업 기간 동안(내 코딩 부트캠프는 사전 작업이라고 하는 코호트가 시작되기 전에 약 3주 분량의 학습 자료를 완료해야 함) 처음으로 array 개념을 접했습니다. 수업 자료에서 array가 무엇인지, 어떻게 생겼는지, 어떤 용도로 사용되는지에 대해 간략하게 설명했을 때였습니다. 매우 간결하고 간단합니다. "이거 좋아"라고 생각했습니다. 2주 후에 배열에 대해 생각하자 토하고 싶어졌습니다. 메소드가 왜 이렇게 많은지, 하나의 값에 접근하는 것이 왜 이렇게 어렵고 복잡한 과정인지, 설상가상으로 할당된 기능에 어떻게 연결해야 하는지 등등. 왜 내가 하는 일이 하나도 없을까요?!



나는 array s에 대한 거의 모든 것을 싫어하기 시작했고 그것에 대해 더 많이 아는 데 거의 관심을 잃었습니다. 그런 다음 "어쩌면 우리가 이것을 해결할 수 있을지도 모른다"고 다시 생각했습니다. 다른 사랑과 증오의 관계가 그렇듯, 나는 이 일을 더 자세히 들여다보고 더 좋은 친구가 되기로 했다. 그런 다음 나는 그들의 방법이 어떻게 일을 그토록 편리하게 만들고 삶을 훨씬 더 쉽게 만들어 주는지에 매료되었습니다. array 가 JavaScript에서 사용할 수 있는 다양한 메서드 중에서 내가 가장 좋아하는 반복자 메서드인 .filter() , .map() 및 .forEach() 를 공유하고 싶습니다.

* 이들은 모두 기본 제공 방법입니다.

.filter() "내가 원하는 요소만 있는 새 배열을 만드십시오!"
.filter() 배열을 검색하고 각 요소를 제공된 콜백 함수에 전달합니다. 그런 다음 콜백 함수를 전달한 요소만 포함하는 완전히 새로운 배열을 반환합니다.

예시:

[5, 6, 7, 8, 9].filter(function (num) {
  return num < 8;
});

// => [5, 6, 7]

.map() "이봐, 각 요소가 변형된 새 배열을 만드세요!"
.map() 배열의 모든 요소를 ​​다른 값으로 변환합니다. .filter() 와 마찬가지로 콜백 함수를 받아들이고 각 요소를 차례로 콜백에 전달합니다. 그러나 차이점은 .map()는 변환된 버전에서 동일한 수의 요소 배열을 반환하는 반면 .filter()는 콜백 함수만 전달한 요소가 포함된 배열을 반환한다는 것입니다.

예시:

[1, 3, 5].map(function (num) {
  return num ** 2;
});

// => [1, 9, 25]

.forEach() "내 배열의 각 요소에 대해 이 작업을 수행하십시오!"
.forEach() 배열을 반복하고 각 요소에 대한 콜백 함수를 전달합니다. 이것은 .filter() 또는 .map() 와 같은 새 배열을 생성하지 않으므로 배열을 반복하여 값을 기록하려는 경우에 유용합니다.

예시:

weather = [
  "sunny",
  "cloudy",
  "rainy",
  "windy"
];

weather.forEach(function(status) {
  console.log(`Tomorrow's weather could be ${status}.`);
});

// =>
Tomorrow's weather could be sunny.
Tomorrow's weather could be cloudy.
Tomorrow's weather could be rainy.
Tomorrow's weather could be windy.

나는 array 의 특성과 그것이 어떻게 그렇게 많은 일을 할 수 있는지를 좋아하지만 솔직히 아직 모든 방법을 완전히 이해하는 데는 멀었습니다. 하지만 연습은 영구적이며 무언가(또는 누군가)에 대해 더 많이 알게 되면 항상 더 잘 이해하는 데 도움이 됩니다. 어쨌든 모든 관계가 작동하는 방식입니다. array 님과의 관계가 곧 '사랑' 쪽으로 더 기울고 '증오' 쪽에서 멀어지기를 바랍니다. (시간이 좀 걸립니다)


참조 소스:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach