자바스크립트, 제이쿼리 요약정리

1. JavaScript (자바스크립트)

1-1. 변수 (Variable)

변수 선언 키워드

JavaScript

var   // function scope (함수 범위) - 요즘은 거의 안 씀
let   // block scope (블록 범위) - 값 변경 가능
const // block scope (블록 범위) - 상수, 재할당 불가

			
let x = 10;      // 변수 선언 + 초기값(initial value)
const PI = 3.14; // 상수 (constant)

📌 주석

var : 호이스팅(hoisting) + 범위 문제 때문에 레거시
let : 값이 바뀌는 변수
const : 기준값, 설정값 → 기본은 const부터 쓰는 게 현대 JS 스타일
scope (스코프)
block scope (블록 스코프)
variable shadowing (변수 가리기)

1-2. 데이터 타입 (Data Types)

원시 타입 (Primitive Type)

하나의 값만 저장

			
Number      // 숫자
String      // 문자열
Boolean     // 논리값 (true / false)
undefined   // 값이 정의되지 않음
null        // 값이 의도적으로 없음
Symbol      // 고유한 값

		

			
let a = 10;        // number
let b = "hello";  // string
let c = true;     // boolean
let d = null;     // null
let e;            // undefined

		

📌 주석

null ≠ undefined
- null : 개발자가 일부러 비워둠
- undefined : JS가 아직 모름

객체 타입 (Object Type)

여러 값과 기능을 묶음

			
Object
Array
Function
Date

📌 typeof 연산자

			
typeof 10;          // "number"
typeof "hello";     // "string"
typeof null;        // ❗ "object" (자바스크립트의 오래된 버그)

1-3. 연산자 (Operators)

산술 연산자 (Arithmetic Operators)

+  -  *  /  %

증감 연산자 (Increment / Decrement)

			
i++; // 후위 증가, i = i + 1
++i; // 전위 증가
i--; // i = i - 1

대입 연산자 (Assignment Operator)

= //할당 연산자

복합 대입 연산자 (Compound Assignment)

+=  -=  *=  /=  %=

비교 연산자 (Comparison Operators)

			
==   // 값만 비교 (잘 안 씀)
===  // 값 + 타입 비교 (권장)
!=
!== 
>
<
>=
<=

		

논리 연산자 (Logical Operators)

			
&&  // AND
||  // OR
!   // NOT

연결 연산자 (Concatenation)

"hello " + "world";

조건 연산자 (Conditional / Ternary)

조건 ? 참 : 거짓;

🔸 템플릿 리터럴 (Template Literal)

			
let name = "Jiwoon";
console.log(`안녕하세요 ${name}`);
// 백틱(backtick) 사용

1-4. 제어문 (Control Statements)

조건문 (Conditional Statements)

if / else

			
if (조건식) {
  // 조건이 true일 때 실행
} else {
  // false일 때 실행
}

		

switch

			
switch (값) {
  case 1:
    // 실행 코드
    break;
  default:
    // 모든 case 실패 시
}

		

반복문 (Loops)

while문

			
let i = 0; // 초기값 (initial value)
while (i < 5) { // 조건식 (condition)
  console.log(i);
  i++; // 증감식 (increment)
}

		

📌 주석

조건을 잘못 쓰면 무한 루프(infinite loop)

for문

			
for (let i = 0; i < 5; i++) {
  console.log(i);
}

📌 주석

for = 초기값 / 조건식 / 증감식이 한 줄에 정리됨
반복 횟수가 명확할 때 최적

do…while

			
do {
  실행문;
} while (조건);

배열 반복

forEach

			
arr.forEach(function(item, index){
  console.log(item, index);
});

for…of (값)

			
for (let v of arr) {
  console.log(v);
}

for…in (키)

			
for (let key in obj) {
  console.log(key);
}

🔹 흐름 제어

			
break;    // 반복 중단
continue; // 다음 반복으로

1-5. 함수 (Function)

			
function 함수명() {
  // 자바스크립트 코드
}
함수명(); // 함수 호출 (call)

📌

function = 함수
parameter = 매개변수
return = 반환값

1-6. 객체 (Object)

			
let 객체 = {
  속성: 값,
  메서드: function () {}
};

			
객체.속성;       // 속성(property) 값 가져오기
객체["속성"];    //대괄호 접근
객체.속성 = 값;  // 속성 값 변경
객체.메서드();   // 메서드(method) 실행

📌 핵심 개념

객체 = 데이터 + 기능
키:값 쌍 → property

1-7. 내장 객체 (Built-in Objects)

			
Date    // 날짜, 시간
Math    // 수학 계산
Array   // 배열
String  // 문자열

1-8. 브라우저 객체 (Browser Objects)

			
window
location
history
navigator
screen

		

window 객체 주요 메서드

			
alert();      // 경고창
confirm();    // 확인/취소
prompt();     // 입력창
open();       // 새 창 열기
setInterval(함수, 밀리초); // 반복 실행
setTimeout(함수, 밀리초);  // 지연 실행

		

구분	예시	설명
JS 내장 객체	Array, Object, Math	ECMAScript 표준
브라우저 객체	window, document, console	Web API
사용자 객체	`{}`, `function(){}`	직접 만든 것

			
window
├─ document
├─ console
├─ location
├─ history
├─ navigator
└─ screen
📌 모두 window의 속성(property) 이다.

		

console → 객체 (object)
log, error, warn, table → 메서드 (method)

정체는?

브라우저가 제공하는 디버깅용 객체

JS 표준(ECMAScript) ❌
브라우저 환경(Web API) ⭕

📌 document는

HTML 문서 전체를 객체로 표현한 것
DOM(Document Object Model)의 최상위 객체

배열 (Array)

			
let arr = [1, 2, 3];
arr.length; // 길이

자료형 변환 (Type Casting)

			
Number()
parseInt()
parseFloat()
String()
toString()
Boolean()

		

falsy 값

false처럼 취급되는 값들

			
false
0
""        // 빈 문자열
NaN
undefined
null

		

			
if ("") {
  // 실행 안 됨
}

2. jQuery

2-1. 문서 준비 (Document Ready)

			
$(document).ready(function () {
  // HTML 로딩 완료 후 실행
});

2-2. 직접 선택자 (Basic Selectors)

			
$("*")              // 전체 선택
$("#아이디")        // id 선택
$(".클래스")        // class 선택
$("태그")           // 태그 선택
$("선택1, 선택2")   // 다중 선택

		

2-3. 관계 선택자 (Relationship Selectors)

			
$("태그").parent();        // 부모
$("태그").parents();       // 모든 조상
$("태그 하위태그");        // 모든 하위
$("태그 > 자식태그");      // 직계 자식
$("태그").children();      // 자식
$("태그").siblings();      // 형제

		

2-4. 기타 선택자 (Filtering Selectors)

			
$("태그:first-child");
$("태그").first();
$("태그:last-child");
$("태그").last();
$("태그").eq(index);   // index는 0부터
$("태그").find("태그2");
$(this);               // 현재 선택된 요소

		

📌 주석

eq()는 jQuery 인덱스
this는 이벤트에서 특히 중요

2-5. 주요 속성 메서드 (Property Methods)

			
.css("속성");
.css("속성", "값");
.text();
.text("값");
.addClass("클래스");
.removeClass("클래스");
.toggleClass("클래스");
.append("콘텐츠");   // 뒤에 추가
.prepend("콘텐츠");  // 앞에 추가
.index(); // 형제 중 순서

		

2-6. 이벤트 메서드 (Event Methods)

			
$("선택자").click(function () {
  // 실행문
});

			
click()
mouseover()
mouseout()
hover()
mouseenter() // 버블링 X
mouseleave() // 버블링 X
focusin()
focusout()

		

📌 주석

mouseenter / leave는 이벤트 전파(bubbling) 없음
정밀 제어할 때 씀

			
.on("event", handler)
.off("event")

			
$("ul").on("click", "li", function () {
  // 이벤트 위임(Event Delegation)
});

이걸 이해하면 자연스럽게:

이벤트 버블링 (event bubbling)
캡처링 (capturing)
React의 synthetic event

까지 연결됨.

2-7. 효과 & 애니메이션 (Effects & Animation)

animate

			
$("태그").animate(
  { "css속성": "값" },
  적용시간,
  가속도,
  콜백함수
);
$(".box").animate({
  width: "200px",
  opacity: 0.5
}, 1000);

		

기본 이펙트

			
show()
hide()
toggle()
fadeIn()
fadeOut()
fadeToggle()
slideUp()
slideDown()
slideToggle()

		

📌

effect = 효과
duration = 지속시간
easing = 가속도
callback = 완료 후 실행 함수

애니메이션 제어 (Animation Control)

			
.stop()
.stop(clearQueue, jumpToEnd)

$(".box").stop(true, true).slideToggle();

마지막 한 줄 요약

JS = 언어의 뼈대 (논리, 데이터, 구조)
jQuery = DOM 조작을 쉽게 만든 도구 (요즘은 레거시지만 시험·유지보수 필수)

(난이도는 ① 워밍업 → ② 실전 → ③ 사고력 트랩 순서)

✅ 문제 1. 변수 & 조건문 (워밍업)

문제

1부터 100까지의 숫자 중에서

짝수(even number) 이면 "짝수"
홀수(odd number) 이면 "홀수"
를 콘솔에 출력하시오.

조건

for문 사용
if / else 사용

힌트

% (나머지 연산자, modulus operator)

✅ 문제 2. while + 증감식 (기본기 체크)

문제

while문을 사용하여
10부터 1까지 숫자를 콘솔에 출력하시오.

조건

while문만 사용
-- 증감 연산자 사용

체크 포인트

무한 루프 안 걸리는지

✅ 문제 3. 함수 + 매개변수 (실전 감각)

문제

숫자 하나를 전달하면
그 숫자가 3의 배수인지 아닌지를 콘솔에 출력하는 함수를 작성하시오.

출력 예시

			
checkNumber(6);  // "3의 배수입니다"
checkNumber(7);  // "3의 배수가 아닙니다"

조건

function
if / else
나머지 연산자 %

✅ 문제 4. 객체 활용 (개념 핵심)

문제

아래 조건을 만족하는 객체를 만드시오.

조건

객체 이름: user
속성(property)
- name : 문자열
- age : 숫자
메서드(method)
- info() : "이름은 ○○, 나이는 ○○입니다" 출력

실행 예

user.info();

📌 포인트

객체 = 데이터 + 기능

✅ 문제 5. 배열 + for문 (현업 필수 감각)

문제

아래 배열의 모든 요소를 콘솔에 출력하시오.

let fruits = ["apple", "banana", "orange", "mango"];

조건

for문 사용
배열 길이는 .length 사용

✅ 문제 6. jQuery 선택자 + CSS 제어 (DOM 기초)

HTML

			
<p class="text">안녕하세요</p>
<button id="btn">클릭</button>

문제

버튼을 클릭하면

.text의 글자색을 빨간색으로 변경하시오.

조건

click() 이벤트
.css() 메서드

✅ 문제 7. jQuery 클래스 토글 (실무 냄새)

HTML

			
<div class="box">BOX</div>
<button>토글</button>

문제

버튼을 클릭할 때마다
.box에 active 클래스를 추가/제거하시오.

조건

toggleClass()

✅ 문제 8. this & index() (자주 틀리는 구간)

HTML

			
<ul>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ul>

		

문제

li를 클릭하면

클릭한 항목의 index 값을 콘솔에 출력하시오.

조건

$(this)
.index()

⚠️ 문제 9. 사고력 트랩 (진짜 이해했는지)

문제

아래 코드의 출력 결과를 예측하시오.

			
let x = 10;
function test() {
  let x = 20;
  console.log(x);
}
test();
console.log(x);

		

질문

콘솔 출력 순서는?
왜 그렇게 나오는가?

📌 핵심 키워드

scope
block scope
variable shadowing

🔥 보너스 문제

문제

버튼을 클릭하면

1초 후에 "완료"라는 alert 창이 뜨도록 하시오.

조건

setTimeout()
익명 함수