계발하는 개발자

[JS] contains() 메소드 알아보기 | (feat. includes() 메소드 비교) 본문

📌 Language/Javascript

[JS] contains() 메소드 알아보기 | (feat. includes() 메소드 비교)

dev_genie 2023. 2. 11. 20:11

자바스크립트 메소드 중 하나인 contains() 메소드에 대해 알아보자.🧐

우선 contains() 메소드는 무엇일까?

🧩 contains() 메소드

contains() 메소드는 선택한 요소가 특정한 부모요소에 속해 있는지를 확인할 때 사용한다. 주로 특정 요소를 선택하여 부모 요소가 해당 요소를 가지는지 여부를 boolean으로 확인할 수 있는 메소드이다.

이외에도 하나의 엘리먼트가 특정 클래스를 포함하고 있는지를 확인할 때도 is() 메소드처럼 사용할 수 있다.

 

더 자세한 내용은 아래의 예시에서 살펴보자.

<h2 class="active">액티브 이벤트</h2>

<script>
    const h2 = document.querySelector("h2");
    function txt(){
        const clickedClass = "clicked"
        if(h2.classList.contains(clickedClass)){
            h2.classList.remove(clickedClass);
        } else {
            h2.classList.add(clickedClass);
        }
	}
    
	h2.addEventListener("click",txt);

클래스 없으면 추가
클래스 있으면 제거

contains 프로퍼티를 사용하면 조건에 따라 명령을 구조화할 수 있다는 장점이 있다.

(A라는 클래스 포함하고 있어? -> 있으면 제거해줘 -> 없으면 추가해줘)

 

이는 toggle() 메소드와 함께 기존 셋팅된 클래스명을 제거하지 않고 유지하며,

새로운 클래스명과 함께 나열해준다는 점에서 코드 관리에 상당한 이점을 가지지만,

한 문장으로 선언되면 되는 toggle() 메소드와 다르게 자칫 코드가 길어질 수 있다는 단점이 있다..!

 

그럼 비슷한 뜻인 includes() 메소드와는 뭐가 다를까?

🧩 includes() 메소드

 includes() 메소드는 JavaScript의 배열 메서드다. 주로 배열 내의 특정 값을 가지고 있는지 여부를 확인하는데 사용된다. 이때 반환값은 불린값으로, 만약 포함하고 있으면 true를 반환하고, 포함하고 있지 않으면 false를 반환한다.

<style>
    .child {
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: white;
      font-weight: bold;
      background-color: red;
    }

    .green {
      background-color: green;
    }
</style>
  
<body>
    <div id="parent">
      <div class="child">Child Element 1</div>
      <div class="child">Child Element 2</div>
      <div class="child">Child Element 3</div>
    </div>

    <script>
      const parent = document.getElementById("parent");
      const children = parent.querySelectorAll(".child");
      const targetValues = ["Child Element 1", "Child Element 3"];

      children.forEach((child) => {
        if (targetValues.includes(child.textContent)) {
          child.classList.add("green");
        }
      });
    </script>

첫번째와 세번째의 child는 가지고 있는 내용값이 배열값과 일치해서 green 색상의 배경으로 변경된 데 반해,

두번째 요소의 child는 배열값을 포함하고 있지 않아서 false값을 반환하고,

 기존 색상인 red 색상으로 출력된 것을 볼 수 있다.

 

이번 포스팅을 통해

그동안 헷갈렸던 includes()와 contains() 메서드의 차이를 제대로 알 수 있었다.

이제 위 예제처럼 각각의 메서드가 어떤 상황에서 쓰이는가를 잘 숙지하고 쓰도록 해야겠다.

 

*이해에 도움이 됐던 강의 출처:

https://youtu.be/DKEfjcdMSRA - 노마드코더 / CSS in Javascript part Two

https://youtu.be/ydZujkmwGt8 - 노마드코더 / CSS in Javascript part Three

 

 

 

 

LIST

'📌 Language > Javascript' 카테고리의 다른 글

[JS] 상단이동버튼 구현 - window.scrollTo() + 페이드인/아웃  (0) 2023.04.26
[JS] form을 submit할 때 새로고침 방지하기  (0) 2023.02.12
[JS] length 프로퍼티 | 함수객체.length vs arguments.length  (0) 2023.02.08
[JS] 자바스크립트 타이머 함수 | setInterval, setTimeout  (0) 2023.02.08
[JS] 이벤트 처리(event handling) | addEventListener, onEvent  (0) 2023.02.06
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!