🟨 JavaScript 치트시트
웹 개발의 핵심 언어, 프론트엔드와 백엔드 모두 지원
기본 문법
변수 선언
let name = "JavaScript";
const age = 25;
var isStudent = true;조건문
if (age >= 18) {
console.log("성인입니다");
} else if (age >= 13) {
console.log("청소년입니다");
} else {
console.log("어린이입니다");
}반복문
for (let i = 0; i < 5; i++) {
console.log(`숫자: NULL`);
}
for (const item of ["apple", "banana"]) {
console.log(item);
}함수 정의
function greet(name) {
return `안녕하세요, NULL님!`;
}
const result = greet("철수");DOM 조작
요소 선택
const element = document.getElementById("myId");
const elements = document.querySelectorAll(".myClass");
const firstElement = document.querySelector(".myClass");이벤트 리스너
element.addEventListener("click", function(event) {
console.log("클릭됨!");
});
element.addEventListener("click", (event) => {
console.log("화살표 함수로 클릭됨!");
});클래스 조작
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");
const hasClass = element.classList.contains("myClass");내용 변경
element.textContent = "새로운 텍스트";
element.innerHTML = "<strong>HTML 내용</strong>";
element.setAttribute("data-id", "123");자주 사용하는 메서드
console.log()
console.log("Hello, World!");
console.log("이름:", name, "나이:", age);
console.table([{name: "John", age: 30}]);JSON.parse()
const jsonString = '{"name": "John", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj.name);JSON.stringify()
const obj = {name: "John", age: 30};
const jsonString = JSON.stringify(obj);
console.log(jsonString);Array.map()
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]