자바스크립트 공부하기 - 토글(Toggle)

"토글(Toggle)"은 자바스크립트의 특정한 기능이 아니라 **"패턴(pattern)"**이야!
즉, 자바스크립트의 특정한 문법이나 내장 기능이라기보다는, 변수를 업데이트하는 방법 중 하나라고 보면 돼.

---

✅ 토글이 포함되는 개념

토글 패턴은 자바스크립트의 제어 흐름(control flow)과 상태(state) 관리와 관련 있어!
아래 세 가지 개념에서 주로 사용돼:

1. 변수 업데이트 (State Management)
   • true ↔ false 같은 불리언 값 바꾸기
   • 1 ↔ 2 ↔ 3 같은 숫자 값 변경
   • "ko" ↔ "en" 같은 문자열 변경
2. 조건문 (Conditional Statements)
   • if...else 또는 ? : (삼항 연산자)로 상태 변경
   • classList.toggle()처럼 특정 조건에서 클래스 추가/제거
3. 이벤트 핸들링 (Event Handling)
   • 버튼 클릭 시 상태 변경
   • 마우스 오버/아웃 시 스타일 변경

---

isBlue = !isBlue;는 어떻게 동작할까?

let isBlue = false;

isBlue = !isBlue; // isBlue가 false였으므로, true로 변경
console.log(isBlue); // true

isBlue = !isBlue; // isBlue가 true였으므로, false로 변경
console.log(isBlue); // false

✅ 즉, isBlue = !isBlue;는 현재 값의 반대(opposite)로 바꿔주는 코드야!
✅ true → false → true → false 이렇게 계속 바뀌는 거야.

이해하기 쉽게 설명할게! 😄

!는 부정 연산자라고 해. 이건 값을 반대로 바꿔주는 역할을 해.

예를 들어, isBlue = false;였을 때:

• !isBlue는 false를 반대로 바꿔서 true로 만들어.
• 그래서 isBlue = !isBlue;를 실행하면, false에서 true로 바뀌는 거야.

다시 말해서, !는 **"반대"**를 뜻해!

그럼 두 번째로 isBlue = true;일 때:

• !isBlue는 true를 반대로 바꿔서 false로 만들어.
• 그래서 isBlue = !isBlue;를 실행하면, true에서 false로 바뀌는 거야.

쉽게 말하면:

• false → true
• true → false

이렇게 값이 반대로 바뀌는 거야! 😄

 

나 :::: 근데 맨 위에 false라고 벌써 변수만들었잖아! 

 

 

ChatGPT의 말:

맞아! isBlue = false;로 시작했잖아. 그래서 처음에는 isBlue의 값이 false였어.

이제, 그 후에 isBlue = !isBlue;를 실행하면 어떻게 되는지 차근차근 설명할게:

1. 처음에는 isBlue = false;야. 즉, isBlue의 값은 false.
2. 그다음에 isBlue = !isBlue;가 실행되면:
   • !isBlue는 false의 반대 값이니까 true가 돼.
   • 그래서 isBlue = true;로 바뀌게 되는 거야. 즉, isBlue 값이 true로 변경돼!

그 후에 또 isBlue = !isBlue;를 실행하면:

• !isBlue는 true의 반대 값이니까 false로 바뀌고,
• 그래서 isBlue = false;가 되는 거야.

결국, !는 그 값이 어떤 상태였든 반대로 바꾸는 역할을 해! 😄

간단히 말해서, 첫 시작은 false였지만, 그 이후엔 !isBlue가 계속해서 반대로 바꾸니까 true → false → true → false 이렇게 반복되는 거야!

 

 

 

버튼 색깔 바꾸는 예제에서 어떻게 쓰일까?

let isBlue = false;

document.querySelector("button").addEventListener("click", function () {
  document.body.style.backgroundColor = isBlue ? "white" : "blue";
  isBlue = !isBlue; // true면 false로, false면 true로 변경
});

---

1️⃣ 불리언 값 토글 (Boolean Toggle)

📌 사용처:

• ✅ 버튼 클릭할 때 색깔 변경
• ✅ 다크모드 on/off
• ✅ UI 요소 보이기/숨기기

let isDarkMode = false;

document.querySelector("button").addEventListener("click", function () {
  isDarkMode = !isDarkMode; // true ↔ false
  document.body.style.backgroundColor = isDarkMode ? "black" : "white";
});

✔️ true ↔ false를 번갈아 바꾸면서 동작해!

 

 

2️⃣ 숫자 토글 (Number Toggle)

📌 사용처:

• ✅ 버튼 클릭할 때 값이 0과 1을 번갈아 바꾸기
• ✅ 페이지네이션 (ex: 1 ↔ 2, 2 ↔ 1)
• ✅ ON/OFF 상태를 숫자로 표현

let currentPage = 1;

document.querySelector("button").addEventListener("click", function () {
  currentPage = currentPage === 1 ? 2 : 1; // 1 ↔ 2
  console.log("현재 페이지:", currentPage);
});

✔️ 1 ↔ 2를 계속 바꾸는 방식이야.
✔️ true ↔ false처럼, 숫자 버전이라고 보면 돼!

* 페이지 네이션(Page Nation)은 웹사이트나 애플리케이션에서 한 번에 많은 콘텐츠를 표시하지 않고, 여러 페이지로 나누어 콘텐츠를 구분하는 방식을 말해요. 일반적으로 긴 목록이나 데이터가 있을 때 사용되며, 사용자가 여러 페이지를 넘기면서 콘텐츠를 순차적으로 볼 수 있게 도와주는 기능이에요. 예를 들어, 블로그나 상품 리스트에서 "다음" 또는 "이전" 버튼을 클릭하여 페이지를 넘기면서 보는 방식이 페이지 네이션입니다.

 

 

3️⃣ 배열 값 순환 (Array Cycling)

📌 사용처:

• ✅ 버튼 클릭할 때 색깔이 순서대로 바뀌기
• ✅ 이미지 갤러리에서 다음 사진으로 이동

let colors = ["red", "blue", "green"];
let index = 0;

document.querySelector("button").addEventListener("click", function () {
  index = (index + 1) % colors.length; // 0 → 1 → 2 → 0 반복
  document.body.style.backgroundColor = colors[index];
});

✔️ (index + 1) % colors.length를 사용해서 배열을 순환하는 거야!
✔️ "red" → "blue" → "green" → 다시 "red" 이런 식으로 바뀜.

 

 

4️⃣ 객체 키 변경 (Object Toggle)

📌 사용처:

• ✅ 다국어 변경 (ex: 한국어 ↔ 영어)
• ✅ 로그인 / 로그아웃 버튼 전환

let language = "ko";
const messages = {
  ko: "안녕하세요!",
  en: "Hello!",
};

document.querySelector("button").addEventListener("click", function () {
  language = language === "ko" ? "en" : "ko"; // "ko" ↔ "en"
  console.log(messages[language]); // 언어에 맞는 메시지 출력
});

✔️ "ko"와 "en"을 번갈아 가면서 사용해!
✔️ 이 방법은 객체에서 특정 값을 가져올 때 유용해!

---

✅ 결론: 어떻게 정리하는 게 좋을까?

✔ 상태 관리(State Management)에 포함 → "토글은 상태를 변경하는 기법이다!"
✔ 제어문(Conditional Statements)에 포함 → "토글은 조건문을 활용해서 구현된다!"
✔ 이벤트 핸들링(Event Handling)에 포함 → "토글은 버튼 클릭 이벤트에서 자주 쓰인다!"
✔ 토글(Toggle) 카테고리를 따로 만들기 → "토글은 다양한 방식으로 구현된다!"

 

 

🔥 결론

토글은 자바스크립트의 내장 기능이 아니라, 변수를 바꿔서 상태를 유지하는 패턴이야!

• 변수 업데이트, 조건문, 이벤트 핸들링과 관련돼 있어!
• UI 상태 변경, 애니메이션, 다크모드, 버튼 토글 등에 자주 사용돼!

즉, "자바스크립트의 특정 카테고리에 속한다기보다는, 다양한 곳에서 활용되는 개념" 이라고 보면 돼! 😆