[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 실습 1 - 특정 문자열이 포함된 배열 만들어 반환하기

 

 

문제 )

 

filter, includes, from을 사용해서 문자열 'e'가 포함된 노드로 구성된 배열을 만들어서 반환하기

 

---

function print(){
  /*
  filter, includes, from을 사용해서 문자열 'e'가 포함된
  노드로 구성된 배열을 만들어서 반환하기
  */
  
  let listItem = document.getElementsByTagName("li");
  let newArray = Array.from(listItem);
  let newData = [];
  
  newArray.filter(function (n){ 
    if((n.textContent).includes("e") === true){
      newData.push(n.textContent);
     
    }
  })
    
  for(list of newData){
   
      document.write(list + "</br>");

  }
}

print();

 

 

문제 풀기전....

 

node란, html DOM의 head, body 등등의 태그들만이라고 생각했었는데

노드는 요소노드(태그들), 텍스트노드, 속성노드(href 같은), 문서노드(document 자체), 주석노드(html의 주석) 들로 구분되어있더라

 

첫번째 관문은 node의 개념을 잘 모르니 노드리스트로 구성되게 노드를 솎아내는 작업 자체가 불가하여 

TCP SCHOOL의 노드 부분을 쭈욱 1회독 했다 (http://tcpschool.com/javascript/js_dom_nodeList)

 

---

Array 메소드 filter 

 

filter 메소드는 이름 그대로 요소들을 필터링하는 역할을 한다.

 

array(배열).filter(function(n){}) 의 형태로 사용되어지고, 콜백 함수의 리턴은 boolean 타입이다. 

리턴이 true인 요소만 모아서 새로운 배열을 만든다. 생략하면? 리턴은 undefined이므로 false가 되고

만족하는 요소가 없다면? 빈 배열이 반환된다.

undefined도 아닌 빈 배열을 반환하는 것은 매우 큰 의미를 가집니다.

보통 도메인을 해결하기 위해서 Array 메소드를 여러개 연결하여 사용하는데 빈 배열이라도 반환 함으로써 중간에 오류가 나지 않고 다음 Array 메소드를 사용할 수 있습니다.

만약 filter로부터 빈 배열이 아닌 결과 없음을 의미하는 다른 값이 반환되었다면 에러를 뿜었을 것입니다.

출처: https://bblog.tistory.com/300 [편두리 기업블로그]

 

>> 이 내용을 보고 처음엔

 

    newData = newArray.filter(function (n){ 
      return (n.textContent).includes("e");     
    });

 

이런식으로 반환했더니, 마지막 for문으로 출력하는 부분에서 object로 나오더라

출제자의 의도가 이게 맞는지 모르겠지만, 내가 원한건 텍스트 노드만 나오길 원했던터라,

 

 newArray.filter(function (n){ 
    if((n.textContent).includes("e") === true){
      newData.push(n.textContent);
    }
  })

 

return이 아닌 if 문으로 true / false를 판단하고 배열 객체에 push해주었다.

 

---

.includes()

 

.includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메소드이다.

 

string.includes( searchString, length )  / 리턴은 boolean 타입이다.

 

searchString : 검색할 문자열로 필수 요소, 대소문자를 구분한다.

length : 검색을 시작할 위치로 선택 요소, 값이 없으면 전체 문자열을 대상으로 한다.

 

---

Array 메소드 .from()

 

유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array객체를 만든다.

 

let newArray = Array.from(arguments);

 

* 가짜배열(arguments) : 배열과 형태는 비슷하나 Array에 해당하지 않는 것

 

[ 강의 속 문제풀이 ]

 

function print(){
  /*
  filter, includes, from을 사용해서 문자열 'e'가 포함된
  노드로 구성된 배열을 만들어서 반환하기
  */
  
  let list = document.querySelectorAll("li");
  console.log(toString.call(list));
  // toString.call >> 자바스크립트에서 타입체크할때 많이 사용
  //"[object NodeList]" node로 구성된 배열
  
  let listArray = Array.from(list);
  console.log(toString.call(listArray));
  //"[object Array]" li노드로 구성된 배열
  
  let eArray =  listArray.filter(function(value){
    return value.innerText.includes("e");
  });
  
  
  return eArray;
  //console.log(eArray.length);
}

print();

 

---

여태 객체의 type 을 체크할때 typeof 정도만 알고 있었는데

toString.call() 을 사용하니 더 자세한 type을 확인할수 있었다.

filter 메소드는 콜백함수의 리턴 값에 따라 배열을 반환하는데 노드로 구성된 배열이다보니 출력은 따로 안한거 같다.

 

나는 요소를 조회할때 getElementsByTagName을 사용했지만,

강사님은 elem.querySelectorAll(css)을 사용했다.

querySelector가 더 넓은 범위의 파라미터를 선택할수 있는 점에서 getElements~ 보다 더 좋은 것 같다.