ES6+ 구문과의 공존

jQuery와 최신 JavaScript

최신 JavaScript를 사용하는 이유

변수에 사용하는 `const`와 `let`

// Assume HTML: <div id="output"></div><button id="myBtn">Click Me</button>
const $outputDiv = $('#output');
const $myButton = $('#myBtn');

let counter = 0;

$myButton.on('click', () => {
  counter++;
  $outputDiv.text(`Button clicked ${counter} times.`);
});

콜백의 화살표 함수

// Assume HTML: <button id="greetBtn">Greet</button><div id="greeting"></div>
const $greetButton = $('#greetBtn');
const $greetingDiv = $('#greeting');

const appName = "CoddyKit App";

$greetButton.on('click', () => {
  // 'this' here refers to the surrounding context (window), not the button
  $greetingDiv.text(`Hello from ${appName}!`);
});

HTML에 사용하는 템플릿 리터럴

// Assume HTML: <ul id="items"></ul>
const $itemsList = $('#items');
const userName = "Alice";
const itemCount = 3;

const listItemHtml = `
  <li>
    <b>User:</b> ${userName}
    <br>
    Items: ${itemCount}
  </li>
`;

$itemsList.append(listItemHtml);

이벤트 객체 구조 분해

// Assume HTML: <button id="eventBtn">Log Target</button><div id="eventOutput"></div>
const $eventButton = $('#eventBtn');
const $eventOutput = $('#eventOutput');

$eventButton.on('click', ({ target, type }) => {
  // Destructured 'target' and 'type' from the event object
  $eventOutput.text(`Event: ${type}, Target ID: ${target.id}`);
});

`this`와 화살표 함수 사용 시 주의점

// Assume HTML: <button class="colorBtn" id="red">Red</button><button class="colorBtn" id="blue">Blue</button><div id="log"></div>
const $colorButtons = $('.colorBtn');
const $logDiv = $('#log');

$colorButtons.on('click', function() {
  // 'this' here refers to the clicked button element
  $logDiv.text(`Clicked button with ID: ${this.id}`);
});

// An arrow function here would bind 'this' to the global window

공존을 위한 `$.noConflict()`

// Assume another library uses '$'
// jQuery is loaded first
$.noConflict();

// Now, '$' is free for another library
// Use 'jQuery' for jQuery methods
jQuery(document).ready(() => {
  jQuery('#status').text('jQuery is active with noConflict!');
});
// Assume HTML: <div id="status"></div>

통합 모범 사례

빠른 확인: ES6+와 jQuery

복습: jQuery 현대화