[바닐라 JS 기초] 조건문 ( + ClassList, Toggle )

조건문

If-else

If-else는 조건문이다. 조건에 따라 수행할 내용을 쓸 때 사용한다. 사용방법은 아래와 같다.

if(condition){
    // block (조건이 참일 때 수행할 내용)
}else{
    // block (조건이 거짓일 때 수행할 내용)
}

block은 JS의 expression들을 말하며 console.log, alert와 같은 코드를 말한다.

예시

if(10 > 5){
    console.log("Hi");
}else{
    console.log("ho");
}

10은 5보다 크기 때문에 조건문이 true가 되고 console.log("Hi"); 가 실행된다.

JS에서 '같다'와 '같지 않다' 기호

JS에서 조건문을 사용할 때 '같다'는 ===이고 '같지 않다'는 !== 이다.

if('10'=== 10){
    console.log("Hi");
}else{
    console.log("ho");
}

위의 코드에서 '10'과 10은 서로 문자열(string)과 숫자(number)이므로 같지 않다. 따라서 조건문은 false이다. 결과적으로, else 안의 구문이 실행되게 되고 출력결과 ho가 나오게 된다.

else if

if-else 는 기본적으로 하나의 조건문에 대해 각각 참과 거짓일 때 수행할 코드를 작성한다. 많은 조건문을 가지고 싶다면 else if 를 사용하면 된다.

if('10'=== 10){
    console.log("Hi");
}else if("10"==="10"){
    console.log("lol");
}else{
    console.log("ho");
}

처음 if문의 조건문은 false이므로 실행이 되지 않는다. 두 번째 else if 구문의 조건문은 true이므로 해당 console.lo("lol");을 실행시킨다. else는 두 번째 else if 구문이 true 였으므로 실행시키지 않는다.

&& 와 ||

• &&는 and를 의미. 조건을 모두 충족할 때
• ||는 or을 의미. 조건 중 하나를 충족할 때

Init();

어플리케이션을 초기화 한다는 뜻을 가지고 있다. 즉, 프로그램을 시작할 때 처음 실행되는 함수로 보면 된다.

DOM과 If에 대한 예제) 글자 클릭할 때마다 색깔 바꾸기

자주 사용하는 색이 있다면 복사-붙여넣기를 할 때 실수할 수 있고, 번거로우니 색깔에 대한 상수를 만들어 활용하는 것이 좋다. 이때는 대문자로 const 변수를 선언한다.

const title = document.querySelector("#title");

const BASE_COLOR ="rgb(107, 114, 128)";
const CLICKED_COLOR = "#059669";

function handleClick(){
    const currentColor = title.style.color;
    if(currentColor === BASE_COLOR){
        title.style.color = CLICKED_COLOR;
    }else{
        title.style.color = BASE_COLOR;
    }
    
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("click", handleClick);
}

init();

Class 를 통한 CSS 조작, JS와 CSS의 분리

위의 코드에서는 JS에서 직접 CSS를 바꾼다. 하지만 이러한 작업은 좋은 방법은 아니다. JS에서는 JS만 다루고 CSS에서는 CSS만 다루는게 더 좋기 때문이다. HTML에서는 HTML만, CSS에서는 CSS만 JS에서는 로직만 처리하는게 BEST!!

body {
  background-color: #374151;
}
h1 {
  color: #f9fafb;
  transition: color 0.5s ease-in-out;
}

.clicked {
  color: #0bbd84;
}

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick(){
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS){
        title.className = CLICKED_CLASS;
    }else{
        title.className = "";
    }
    
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

하지만 위의 코드 처럼 하면 클래스 이름의 전체가 바뀐다. 즉, 클래스이름을 아예 replacing 해버린다. 클래스 이름이 한 개 이상 있는 상태에서 추가하여 이전의 클래스이름이 지워지지 않게 하려면 아래와 같이 해야 한다.

ClassList

👇🏻 [ClassList MDN]

developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

---

classname의 전체를 replacing 하는 것이 아닌 공백을 사이에 두고 classname을 추가할 때 사용한다. 단, className과는 다르게 add, remove 등 함수를 사용하여 classname을 추가하거나 제거한다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick(){
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS){
        title.classList.add(CLICKED_CLASS);
    }else{
        title.classList.remove(CLICKED_CLASS);
    }
    
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

클릭할 떼 마다 글자의 색이 바뀌는 것을 의도했는데 바뀌지 않는다. 그 이유는 아래 참고

위의 실행 결과를 나타내고 있는 gif 파일을 보면 h1 태그는 클릭하기 전에도 class를 갖는데, btn이라 되어 있다. 누른 후에는 btn clicked로 바뀐다. 이렇게 바뀐상태에서 위의 코드를 그대로 실행시키면 색이 바뀌지 않는다. 오류를 발생시키는 코드는 currentClass !== CLICKED_CLASS 이다. 여기서 CLICKED_CLASS란 "clicked"이다. 하지만, currentClass가 처음에도, btn 바뀐이후에도 btn clicked로 둘다 clicked가 아니다. 따라서 계속 if 구문 안의 코드만 실행되는 것이다. 위의 코드를 수정하기 위해 contains 함수를 사용해야한다.

Contains()

contains checks if specifid class value exists in class attribute of the element.

contains 는 class 속성에 해당 value가 존재하는지 체크한다. 체크한 결과에 따라 true / false를 반환한다.

Element.classList를 상수로 받아 그 상수에서 .contains 함수를 이용하는 것에는 문제가 없다. 그렇게 사용할 수 있다.

body {
  background-color: #374151;
}
h1 {
  color: #f9fafb;
  transition: color 0.5s ease-in-out;
}
.btn{
 cursor: pointer;
}
.clicked {
  color: #0bbd84;
}

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";


function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(!hasClass){
        title.classList.add(CLICKED_CLASS);
    }else{
        title.classList.remove(CLICKED_CLASS);
    }
    
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

최종 실행 결과 ✨

Toggle

하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다. 우리가 위에서 다뤘던 기능과 거의 일치한 기능을 수행한다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";


function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
    
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

코드를 실행시켰을 때 위의 최종 실행 결과✨와 같은 결과가 나온다.

 

 

 

위 포스팅은 노마드 코더 "바닐라 JS로 크롬 앱 만들기" 강의를 토대로 만들어진,

[바닐라 JS 기초 개념 요약 정리] 입니다.

직접 강의를 보고 싶거나 자세한 사항을 알고 싶다면 아래 링크를 참고해주세요 😊

nomadcoders.co/javascript-for-beginners

Watch Now - 노마드 코더 Nomad Coders