Enjoy Programming

최근 같은 프론트 개발자 동료가 데이터 필터를 하는데 어려움을 겪고 있어서 무언가 봤더니 두개의 array를 비교해서 정확히 같은 값을 가질때만 callback을 하고싶다고 하는 것이다.. 음 한번 만들어보자 싶어서 만들어 봤다. 먼저 bool이란 함수를 하나 만들어서 비교군이 될 arr2와 기준이 될 array의 개별 요소 인자로 받아준다. 그리고 arr2에 해당 item인자가 있는지 확인하고 없으면 false를 반환하고 있다면 true를 반환한다고 해준다. 그리고 실제 체크를할 함수를 하나 더 만드는데 여기에는 각각의 array가 인자로 들어가게 된다. 그럼 기준이 되는 array 를 map을 이용해 bool함수에 대입해주고 비교 대상을 인자로 넣어준다. 아 그리고 정확히 같으려면 위는 빠졌으나 각각..

https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map Map() 생성자 | MDN Map() 생성자는 Map 객체를 생성합니다. developer.mozilla.org 자 map method가 아닌 Map()생성자 함수를 다뤄보자~ 헷갈리지 말자 생성자이다. Map객체를 생성해준다. Set은 value에 대해서만 작동을 한다면 Map은 key와 value모두 포함할 수 있다. key와 value의 저장소같은 느낌이다. Set은 add를 가지고 있지만 Map은 add가 없고 set을 가지고 있다. map을 하나 만들어서 key와 value를 set해보자. 오브젝트가 하나 만들어졌고 map에 ..

앞서 포스팅한 내용중 복사 붙여넣기로 컴포넌트에 다른 값을 계속 주는 것은 효율적이지 못하다. 예를들어 브라우저에서 데이터가 오면 그 데이터를 복사 붙여넣기로 넣을 수 없기 때문이다. 이제 웹사이트에 동적 데이터를 추가하는 방법을 알아야 한다. 예를 들어 서버에서 좋아하는 음식의 이름과 이미지가 담긴 리스트 데이터가 온다고 생각해보자 그럼 이 데이터들을 어떻게 하나씩 처리 할 것인가. 우선 가짜 리스트를 하나 만들어본다. 음식의 이름과 이미지가 담긴 리스트이다. 니코는 말한다 react는 just javascript라고 ~ 자 리스트 배열에 담긴것을 하나씩 무언가 적용시킬 때 쓰는 함수는? forEach도 있고 map도 있지만 여기서는 내가 적용시킬 것을 적용하고 그대로 리스트를 반환 할 것이므로 map..

이번엔 자바스크립트 함수중 몇가지 함수를 살펴보자(배열에서 쓰이는) 1) Array.prototype.find() 이 함수는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환. find()함수 괄호 안의 매개 변수는 callback 함수가 오고 위 사진처럼 arrow function으로 무지 간단하게 함수가 구현되었다. es6이전의 방식이라면 이렇게 코드량이 많아진다. 자 좀더 설명하자면 find함수는 callback함수가 true를 반환할 때까지 해당 배열의 각 요소에게 callback함수를 실행한다. 만족하는 요소를 찾았다면 해당 요소를 즉시 반환하고, 못찾았다면 undefined를 반환한다. find는 호출대상인 배열을 mutate하지 않는다. 그리고 처리할 배..

기존 자바스크립트에서 함수 선언 방식은 function leeS(arg) { blabla~~~} 라는 형식으로 사용해왔다. 이함수는 변수로 선언해도 되고~ 함수명 없이도 선언이 된다. (오브젝트 안이라던지 여러 곳에서) 자 애로우 펑션은 뭘까 > 그냥 => 이거 추가된거다. 잠시 배열과 함수를 보자 배열을 하나 선언해주고~ hearts변수에 map함수를 써서 names의 각 배열 원소마다 아이콘을 더해줬다. map()함수의 역할은 배열에서 각각의 아이템마다 함수를 호출하는 일을 한다. foreach와 비슷한 역할이다. 다시 설명하자면 names에 모든 요소에 function을 각각 적용시켜주고 적용된 값들로 다시 배열을 만들어 hearts변수에 담아 줬다. 다시 풀어 쓰자면 이렇게 풀어 쓸수 있다. 적용..