Dseok의 코딩스터디

검색기능을 만들 수 있는 방법은 다양합니다.이번에 코딩테스트에서 틀렸지만 사용해봤던 includes()메서드로 검색 필터 기능을 만들어보고자 합니다.기본 HTML 구성은 아래와 같습니다. 위에 은 그냥 가운데에 놓기 위해서 적은 코드입니다.가운데에 놓는 역할 말고는 다른 역할이 일절 없습니다. 다음은 그냥 넣기 너무 지져분하니 정말정말 간단한 스타일링을 해줬습니다.@charset "utf-8";.wrap{ width: 1010px; margin: 0 auto; padding: 50px 0;}.todo-list { margin-top: 20px;}.todo-item { margin: 5px 0;}뭐 이것도 아무렇게나 가져다 쓰시면 됩니다. 다음은 자바스크립트 코드입니다.핵심적인..

Array.prototype.join()에 대해서 알아보자.우선 MDN의 설명이다.join()메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.join()메소드는 설명이 쉽게 되어있는 듯 하여 추가적인 설명은 하지 않겠다. 먼저 join()의 문법을 알아보자.arr.join([separator])join()메서드는 인자로 문자열을 받는다.이 문자열은 배열의 각 원소 사이에 반복적으로 반영된다.예를 들면 띄어쓰기라던지, 하이픈( - )이라던지 이런 것들을 넣을 수 있다. 바로 예시를 알아보자.const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());// Expected output: "Fire,Air,Water"console...

findIndex()에 대해서 알아보자.findIndex()는 find(), indexOf()에서 진화한 버전이다.인수에 함수를 받을 수 있다. 우선 MDN의 설명을 보자. findIndex()메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.하위에 더 복잡한 설명이 있는데 제외 하겠다.오히려 더 헷갈릴 듯 하다. 내가 이해한 findIndex()메소드.조건에 맞는 놈 찾아 다니다가 처음으로 조건에 맞는 놈 위치 값 알려주고, 조건에 맞는 놈이 없으면 -1로 없다고 알려준다. findIndex()의 기본 문법을 보자.arr.findIndex(callbackFn, thisArg)callbackFn: findIndex()메소드는 ..

오늘은 Array에 있는 indexOf() 메소드에 대해서 알아보자.indexOf()메소드는 String, 문자열에서도 사용을 할 수 있는 메소드이다.(MDN참고) 하지만 지금은 Array에 있는 indexOf()를 알아보자.MDN 설명이다.indexOf()메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.indexOf()는 엄격한 동등성 (=== 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을 사용하여 검색 요소를 Array의 요소와 비교합니다.쉽게 말하면내가 검색해야할 배열(데이터)에 내가 원하는 원소(자료)가 있으면 그 원소(자료)가 처음 보여지는 순서를 값으로 내놓고, 없으면 -1을 내놓는다. indexOf()의 문법..

오늘은 includes() 메소드에 대해 알아보려고 한다.나중에 정리하려고 한 녀석인데 앞 포스팅에 간간히 등장하는 녀석이라 먼저 정리 해보고자 한다. MDN의 설명은 이러하다.includes()메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.오늘은 비교적 설명이 간단하다. 내가 이해한대로 설명을 조금 바꾸자면,어떤 배열에서 내가 원하는 원소가 있는지 확인시켜준다.이 문장으로 정리를 할 수 있어 보인다.현재 고객(실사용자)들이 사용하기에는 브라우저 호환의 문제는 크게 있어보이진 않지만,망할놈의 인터넷 익스플로러(IE)에서는 11버전까지 호환이 안되는 문제가 있다. IE가 없어지기는 했지만...그래도 어디선가 살아 있을 IE를 위해 MDN에 있는 폴리필 코드를 이용하면 좋을 것 같다.인터넷은 모든 ..

오늘은 filter() 메소드에 대해 알아보자.우선 filter()는 배열의 메소드이다.MDN의 설명은 이러하다.filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다; 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.callback은 다음 세 인수와 함께 호출됩니다:요소값요소 인덱스순회(traverse)되는 배열 객체thisArg 매개변수가 filter에 제공된 경우, 호출될 때 그 값..

오늘은 Array 메소드의 every()에 대해 알아보자.MDN의 설명은 이러하다. every는 callbackFn이 거짓을 반환하는 요소를 찾을때까지 배열에 있는 각 요소에 대해 한 번씩 callbackFn 함수를 실행합니다. 해당하는 요소를 발견한 경우 every는 즉시 false를 반환합니다. 그렇지 않으면, 즉 모든 값에서 참을 반환하면 true를 반환합니다.할당한 값이 있는 인덱스에서만 callbackFn을 호출합니다. 희소 배열의 빈 슬롯에서는 호출되지 않습니다.callbackFn은 요소의 값, 해당 요소의 인덱스 및 순회하고 있는 배열 세 가지 인수와 함께 호출됩니다.thisArg 매개변수를 every에 제공한 경우 callbackFn의 this로 사용됩니다. 그 외엔 undefined값을 ..

concat()은 자바스크립트의 배열(Array)의 메소드들 하나이다.우선 MDN의 정의를 한번 보자.concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.concat은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다.인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다.concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.- 실제 객체가 아닌 객체 참조: concat은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를..

우선 배열에서 사용되는 메서드들을 나열하고 간단한 설명을 달아봤다.참고 문서는 인사이트 출판 "자바스크립트 완벽 가이드 별책" 이다.concat();// 현재 배열에 주어진 요소들을 이어 붙인다.every();// 모든 배열 요소에 대해 주어진 단언 함수가 참인지를 검사한다.fillter();// 주어진 단언 함수를 만족하는 배열 요소를 반환한다.forEach();// 각 배열 요소에 대해 주어진 함수를 호출한다.indexOf();// 일치하는 요소를 검색한다.join();// 모든 배열 요소를 문자열로 변환한 후, 하나의 문자열로 이어 붙인다.lastIndexOf();// 배열의 뒤쪽부터 요소를 검색한다.pop();// 배열 끝에 있는 요소를 제거한다.push();// 배열의 맨 뒤에 있는 요소를 하나..