목차(클릭하세요)
console출력은 답답 그 잡채 화면으로 직접 보는 방식으로
화면으로 직접 보는 방식으로1. 파이썬과 비교해보는 JS문법 특징
1-1. 4가지 관점에서
•
세미콜론: JS는 필요, Python은 불필요
•
중괄호 vs 들여쓰기: JS는 {}, Python은 들여쓰기로 블록 구분
•
변수 선언: JS는 let/const, Python은 바로 사용
•
타입: 둘 다 동적 타입이지만 표현 방식이 다름
•
한줄 주석: 파이썬은 # , JS는 //
1-2.코드 비교
•
2개는 동일한 출력결과
[변순선언과 출력]
# Python - 세미콜론 불필요
name = "안찰수"
print("안녕하세요!")
Python
복사
// JavaScript - 세미콜론 필요
let name = "안찰수";
console.log("안녕하세요!");
JavaScript
복사
[조건문과 블럭]
# Python - 들여쓰기 사용
if age >= 18:
print("성인입니다")
else:
print("미성년자입니다")
Python
복사
// JavaScript - 중괄호 사용
if (age >= 18) {
console.log("성인입니다");
} else {
console.log("미성년자입니다");
}
JavaScript
복사
[함수 정의]
# Python - def 키워드
def greet(name):
return f"안녕, {name}!"
Python
복사
// JavaScript - function 키워드 또는 화살표 함수
// 화살표 함수는 나중에
function greet(name) {
return "안녕, " + name + "!";
}
JavaScript
복사
1-3.핵심 차이점 비교
주요 문법 차이점
특징 | JavaScript | Python | 비고 |
문장 끝 | ; 필요 | 불필요 | JS는 세미콜론으로 구분 |
블록 구분 | { } 중괄호 | 들여쓰기 | Python은 공백이 문법 |
변수 선언 | let, const, var | 바로 사용 | JS는 명시적 선언 |
함수 정의 | function 또는 => | def | JS는 화살표 함수도 가능 |
문자열 | " ' ` | " ' f"" | JS는 백틱으로 템플릿 |
주석 | // /* */ | # """ """ | 단행/다행 주석 방식 차이 |
배열/리스트 | Array | list | 메소드명 차이 있음 |
객체/딕셔너리 | Object | dict | 접근 방식 차이 |
타입 확인 | typeof | type() | 동적 타입 언어 |
1-4.JS문법 이것만은 꼭!
•
문장뒤에 세미콜론
•
세미콜론을 붙이는 경우와 붙이지 않는 경우를 각각 구분
◦
선언문 블록(if, for, 함수 선언, 클래스 선언) → 세미콜론
◦
표현식/할당 끝나는 블록(객체 리터럴, 함수/클래스 표현식, IIFE) → 세미콜론 붙임
•
이스케이프 시퀀스
◦
이스케이프 시퀀스: 문자열 내에서 특수 문자를 표현할 때 사용
▪
\' : 작은따옴표
▪
\" : 큰따옴표
▪
\\ : 백슬래시
▪
\n : 줄바꿈
▪
\t : 탭
2. 코드샌드박스 기초 실습
2-1. 스켈레톤 코드
•
JS코드는 아래쪽에 따로 실행하면 화면에 바로 출력 가능
//코드샌드박스에서 출력을 위한 기본 코드
import "./styles.css";
// HTML 먼저 생성
document.getElementById("app").innerHTML = `
<h1 id="title"> [변수와 상수 선언 연습]</h1>
<p id="change"> (본문에 넣고 싶은 내용) </p>
<div id="test" style="white-space: pre-line;"></div>
`;
// JavaScript는 따로 실행
let message = "안녕하세요!";
document.getElementById("test").textContent = message;
JavaScript
복사
2-2.JavaScript 변수와 상수
•
var (구식 나무 상자) - 오래되고 문제 많음
// 1. 블록을 무시함 - 위험!
if (true) {
var gold = 50; // 블록 밖에서도 사용 가능
}
console.log(gold); // 50 출력 (예상 밖!)
// 2. 선언 전에 사용 가능 - 혼란!
console.log(level); // undefined (에러가 아님!)
var level = 1;
// 3. 같은 이름으로 여러 번 선언 가능 - 실수 위험!
var playerName = "철수";
var playerName = "영희"; // 조용히 덮어써짐
JavaScript
복사
•
let (현대식 스마트 상자) - 안전하고 똑똑함
// 1. 블록 안에서만 유효
if (true) {
let newGold = 100;
}
// console.log(newGold); // 에러! 안전함
// 2. 선언 전 사용 시 에러
// console.log(newLevel); // 에러 발생!
let newLevel = 2;
// 3. 중복 선언 방지
let player = "철수";
// let player = "영희"; // 에러! 안전함
JavaScript
복사
•
const (다이아몬드 금고) - 절대 바뀌지 않음
// 상수 - 반드시 초기값과 함께 선언
const GAME_TITLE = "롤토체스";
const MAX_PLAYERS = 8;
JavaScript
복사
var를 사용하면 혼란을 야기하고 코드 복잡도를 높일 수 있이므로 가급게, 변수 선언시 키워드로 let 사용 변수는 선언시 초깃값을 넣어도 되고, 안넣어도 되지만, 상수 선언시에는 초깃값을 무조건 할당해야 함[연습문제]
//코드샌드박스에서 출력을 위한 기본 코드
import "./styles.css";
// HTML 먼저 생성
document.getElementById("app").innerHTML = `
<h1>🎮 let, var, const 선언 연습</h1>
<div id="test" style="white-space: pre-line;"></div>
`;
// === 문제: 빈칸(??)을 let, var, const 중 하나로 채우세요! ===
// 1. 게임 제목 (절대 바뀌지 않음)
?? GAME_TITLE = "롤토체스";
// 2. 플레이어 이름 (게임 중 바뀔 수 있음)
?? playerName = "철수";
// 3. 현재 골드 (초기값 없이 선언)
?? currentGold;
// 4. 구식 방법 (사용하면 안 됨)
?? oldVariable = "사용금지";
// 값 할당
currentGold = 50;
// 값 변경 테스트
playerName = "영희";
// GAME_TITLE = "다른게임"; // 이 줄은 에러가 날까요?
// 결과 출력
let result = "";
result += "게임 제목: " + GAME_TITLE + "\n";
result += "플레이어: " + playerName + "\n";
result += "골드: " + currentGold + "\n";
result += "\n힌트: 절대 안 바뀜=?, 바뀔 수 있음=?, 사용금지=?";
document.getElementById("test").textContent = result;
JavaScript
복사
[해당 코드의 특이점]
•
result +=는 기존 문자열 끝에 새로운 문자열을 붙여서 저장하는 연산
•
여러 줄의 결과를 한꺼번에 모아두는 “로그(log) 기록지” 역할을 담당
let result = "";
result += "첫 줄\n";
result += "두 번째 줄\n";
console.log(result);
// 출력:
// 첫 줄
// 두 번째 줄
JavaScript
복사
3. JS의 자료형
•
원시자료형과 객체자료형으로 나눌 수 있음
자료형 분류
JavaScript 자료형 = 원시자료형 + 객체자료형
구분 | 원시자료형 | 객체자료형 |
종류 | Number, String, Boolean, null, undefined | Object, Array, Function |
저장 | 값 직접 저장 | 참조(주소) 저장 |
복사 | 값 복사 | 참조 복사 |
변경 | 불변 | 가변 |
핵심 차이점
// 원시자료형 - 값 복사
let a = 10;
let b = a;
a = 20;
console.log(b); // 10 (변경 안됨)
// 객체자료형 - 참조 복사
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr1.push(4);
console.log(arr2); // [1, 2, 3, 4] (같이 변경됨!)
JavaScript
복사
3-1. 원시자료형과 객체자료형 실습
•
자료의 형태를 확인하는 함수_자바스크립트: typeof_자료
•
자료의 형태를 확인하는 함수_파이썬: type(자료)
//코드샌드박스에서 출력을 위한 기본 코드
import "./styles.css";
// HTML 먼저 생성
document.getElementById("app").innerHTML = `
<h1 id="title">원시자료형 vs 객체자료형 - typeof 확인</h1>
<p id="change">자료형 확인 및 복사 동작 차이 실습</p>
<div id="test" style="white-space: pre-line;"></div>
`;
// JavaScript는 따로 실행
let output = "";
output += "=== 원시자료형 (Primitive) ===\n";
output += `typeof 42: ${typeof 42}\n`;
output += `typeof "Hello": ${typeof "Hello"}\n`;
output += `typeof true: ${typeof true}\n`;
output += `typeof undefined: ${typeof undefined}\n`;
output += `typeof null: ${???}\n`;
output += "⚠️ null은 원시자료형이지만, typeof null의 결과는 '???'!\n";
output += " (JavaScript의 유명한 버그)\n";
output += "\n=== 객체자료형 (Object) ===\n";
output += `typeof {name: "Bob"}: ${typeof { name: "Bob" }}\n`;
output += `typeof [1, 2, 3]: ${typeof [1, 2, 3]}\n`;
output += `typeof function(){}: ${typeof function () {}}\n`;
output += `typeof new Date(): ${typeof new Date()}\n`;
output += "\n=== 값 복사 vs 참조 복사 ===\n";
// 원시형: 값 복사
let a = 10;
let b = ???;
b = 20;
output += `[원시형] a: ${a} / b: ${b}\n`;
output += "→ 값이 복사되어 독립적으로 동작\n\n";
// 객체형: 참조 복사
let x = { val: 10 };
let y = ???;
y.val = 20;
output += `[객체형] x.val: ${x.val} / y.val: ${y.val}\n`;
output += "→ ???가 복사되어 함께 변경됨\n";
document.getElementById("test").textContent = output;
JavaScript
복사
3-2. 특이한 부분
•
null이 object타입인가?
◦
null은 원시자료형이지만, typeof null의 결과는 "object"로 나옴! 이건 JavaScript의 유명한 버그
◦
결론: null은 원시자료형이지만, typeof null === "object"
3-3.형변환
명시적 형변환과 묵시적 형변환 존재 실제 발생 가능한 심각한 버그들
Case 1: 결제 시스템 오류
// 사용자가 수량을 입력했을 때
let quantity = "2"; // HTML input에서 받은 값
let price = 1000;
let total = quantity + price;
console.log(total); // "21000" (문자열 연결!) - 심각한 오류!
// 올바른 처리
let total = Number(quantity) * price; // 2000
JavaScript
복사
3-4.형변환 마스터를 위한 문제
[필요한 함수들]
•
parseInt() - 문자열에서 정수 추출
•
Number() - 문자열을 숫자로 변환
•
parseFloat() - 문자열에서 실수 추출
//코드샌드박스에서 출력을 위한 기본 코드
import "./styles.css";
// HTML 먼저 생성
document.getElementById("app").innerHTML = `
<h1 id="title">🔄 형변환 마스터 - 게임 상점</h1>
<p id="change">빈칸(??)을 채워서 형변환을 완성하세요!</p>
<div id="test" style="white-space: pre-line;"></div>
`;
let result = "";
// 가상의 사용자 입력 (HTML form에서 받은 데이터)
let inputs = {
quantity: "5", // 수량
money: "15000", // 보유금액
price: "2500.50", // 가격
level: "15px" // 레벨
};
// === 1. 명시적 형변환 ===
result += "=== 명시적 형변환 ===\n";
let quantity = ??(inputs.quantity); // 힌트: parseInt() 사용
let money = ??(inputs.money); // 힌트: Number() 사용
let price = ??(inputs.price); // 힌트: parseFloat() 사용
let level = ??(inputs.level); // 힌트: parseInt() 사용
// === 2. 구매 계산 ===
result += "=== 구매 계산 ===\n";
let totalCost = ?? * ??; // 힌트: quantity와 price 곱하기
let canBuy = ?? >= ??; // 힌트: money와 totalCost 비교
let hasDiscount = ?? >= 10; // 힌트: level 조건 확인
result += `총 비용: ${totalCost}원\n`;
result += `구매 가능: ${canBuy}\n`;
result += `할인 자격: ${hasDiscount}\n\n`;
// === 3. 암묵적 형변환 함정 ===
result += "=== 암묵적 형변환 주의 ===\n";
let wrong = inputs.quantity + inputs.money; // 문자열 연결!
let correct = quantity * price; // 숫자 연산
result += `잘못된 계산: "${inputs.quantity}" + "${inputs.money}" = ${wrong}\n`;
result += `올바른 계산: ${quantity} × ${price} = ${correct}\n\n`;
// === 4. NaN 처리 ===
result += "=== NaN 처리 ===\n";
let invalid = parseInt("abc");
let safe = isNaN(invalid) ? 0 : invalid;
result += `parseInt("abc"): ${invalid}\n`;
result += `안전한 처리: ${safe}\n\n`;
// === 5. 최종 결과 ===
result += "=== 구매 결과 ===\n";
if (canBuy) {
let finalCost = hasDiscount ? totalCost * 0.8 : totalCost;
result += `구매 성공! 결제: ${finalCost}원\n`;
if (hasDiscount) result += `할인 20% 적용!\n`;
} else {
result += `구매 실패. 부족: ${totalCost - money}원\n`;
}
document.getElementById("test").textContent = result;
JavaScript
복사
4. 연산자(JS만의 특별한 연산자)
4-1. Null병합 연산자
•
null 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 값을 반환
[핵심동작]
// 사용자 설정 기본값 처리
let userTheme = null;
let theme = userTheme ?? "light"; // "light"
let userAge = 0;
let age = userAge ?? 18; // 0 (0은 유효한 나이이므로)
// API 응답 처리
let apiResponse = {
name: "양파고",
score: 0,
level: null
};
let playerName = apiResponse.name ?? "익명"; // "양파고"
let playerScore = apiResponse.score ?? 100; // 0
let playerLevel = apiResponse.level ?? 1; // 1
JavaScript
복사
4-2.삼항조건 연산자
•
조건에 따라 두 값 중 하나를 선택하는 간단한 조건문
•
문법
condition ? valueIfTrue : valueIfFalse
JavaScript
복사
[핵심동작]
// 성인 판별
let age = 17;
let status = age >= 18 ? "성인" : "미성년자";
// 점수에 따른 등급
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
// 로그인 상태 확인
let isLoggedIn = true;
let message = isLoggedIn ? "환영합니다!" : "로그인해주세요";
// 할인 적용
let memberLevel = "VIP";
let discount = memberLevel === "VIP" ? 0.2 : 0.1;
JavaScript
복사
4-3.동등연산자와 일치연산자
동등 연산자 (==, !=)
•
타입 변환 후 값 비교
•
예상치 못한 결과 발생 가능, 권장하지 않음
일치 연산자 (===, !==)
•
타입과 값 모두 엄격하게 비교
•
권장 사용법
// 동등 연산자 (==) - 타입 변환 발생
console.log("5" == 5); // true
console.log(0 == false); // true
console.log("" == false); // true
console.log(null == undefined); // true
// 일치 연산자 (===) - 엄격한 비교
console.log("5" === 5); // false
console.log(0 === false); // false
console.log("" === false); // false
console.log(null === undefined); // false
JavaScript
복사
4-4.연습문제
//코드샌드박스에서 출력을 위한 기본 코드
import "./styles.css";
// HTML 먼저 생성
document.getElementById("app").innerHTML = `
<h1 id="title">🎯 JavaScript 연산자 퀴즈</h1>
<p id="change">빈칸(???)을 채워서 연산자를 완성하세요!</p>
<p id="change"><font color='red'> null병합연산자 인식이 안될 경우, package.json수정해야함</font></p>
<div id="test" style="white-space: pre-line;"></div>
`;
let result = "";
// === 퀴즈 1: Null 병합 연산자 ===
result += "=== 퀴즈 1: Null 병합 연산자 ===\n";
let userName = null;
let defaultName = userName ??? "익명"; // null이나 undefined일 때만 오른쪽 값을 사용하는 연산자
result += `사용자 이름: ${defaultName}\n`;
let userScore = 0;
let displayScore = userScore ??? 100; // 0은 유효한 값이므로 어떤 결과가 나올까요?
result += `점수: ${displayScore}\n\n`;
// === 퀴즈 2: 삼항 조건 연산자 ===
result += "=== 퀴즈 2: 삼항 조건 연산자 ===\n";
let age = 16;
let ticket = age >= 18 ??? "성인" ??? "청소년"; // 조건 ? 참일때값 : 거짓일때값 형태
result += `티켓 종류: ${ticket}\n`;
let score = 95;
let grade = score >= 90 ??? "A" ??? "B"; // 90점 이상이면 A, 아니면 B
result += `성적: ${grade}\n\n`;
// === 퀴즈 3: 동등 vs 일치 연산자 ===
result += "=== 퀴즈 3: 동등 vs 일치 연산자 ===\n";
let input1 = "5";
let input2 = 5;
// 어떤 연산자를 사용해야 할까요?
let isEqual1 = input1 ??? input2; // 타입 변환 후 비교하는 연산자
let isEqual2 = input1 ??? input2; // 타입까지 엄격하게 비교하는 연산자
result += `"5" == 5: ${isEqual1}\n`;
result += `"5" === 5: ${isEqual2}\n\n`;
// === 퀴즈 4: 실무 상황 ===
result += "=== 퀴즈 4: 실무 상황 ===\n";
// 사용자 설정값 처리
let userSettings = {
theme: null,
fontSize: 0,
notifications: undefined,
};
let theme = userSettings.theme ??? "light"; // null값에 대해 기본값을 제공
let fontSize = userSettings.fontSize ??? 16; // 0은 유효한 폰트 크기입니다
let notifications = userSettings.notifications ??? true; // undefined값에 대해 기본값을 제공
result += `테마: ${theme}\n`;
result += `폰트 크기: ${fontSize}\n`;
result += `알림: ${notifications}\n\n`;
// === 퀴즈 5: 복합 상황 ===
result += "=== 퀴즈 5: 복합 상황 ===\n";
let player = {
name: "양파고",
level: 15,
premium: null,
};
// 플레이어 정보 표시
let displayName = player.name ??? "무명"; // 이름이 있으니 어떤 값이 나올까요?
let canAccess = player.level >= 10 ??? "가능" ??? "불가능"; // 15는 10보다 크거나 같은가요?
let isPremium = player.premium ??? false; // null값이므로 어떤 결과가?
result += `플레이어: ${displayName}\n`;
result += `고급 기능 접근: ${canAccess}\n`;
result += `프리미엄 회원: ${isPremium}\n`;
document.getElementById("test").textContent = result;
JavaScript
복사