자바스크립트
웹 페이지를 동적으로 들 수 있게 해주는 프로그래밍 언어
- <head> 쪽에다 <script>태그 써서 여기 안에다가 js문법 씀!
- class는 못 씀
- 문법적으로 타입 정의 하지 않음
- system.out.ln 대신에 console.log를 씀!!
- 컴파일 언어가 아님 = 문법 오류를 체크해주지 않음
- F12로 오류 확인!
- exception이 발생시에 코드가 작동 하지 않음
✅ 자바스크립트 변수 정리
1. var (ES5 이전 스타일)
- 호이스팅 됨 (변수 선언이 스코프의 맨 위로 끌어올려짐)
- 함수 스코프 ({} 블록 무시하고 함수 단위로 작동)
- 재선언 가능
- 변수 타입 지정 X (자유롭게 바뀜)
- 생성은 되지만 소멸이 안됨
var a = 10;
a = "문자열"; // 가능
var a = true; // 재선언도 가능
❗ 주의: var는 요즘 잘 안 써. 호이스팅 등 문제 발생 가능성 많음. 가급적 let이나 const 사용 권장!
2. let (ES6 - ES2015 이후)
- 블록 스코프 ({} 범위 안에서만 유효)
- 재할당 가능
- 재선언 불가 (같은 스코프 내에서는)
let b = 20;
b = 30; // 가능
// let b = 40; // 에러 (같은 스코프 안에서 재선언 불가)
3. const (상수, ES6)
- 블록 스코프
- 재할당 불가
- 초기화 필수
const c = 50;
// c = 60; // 에러! 재할당 불가
⚠️ 단, const로 선언한 객체(object)나 배열(array)의 내부 값은 변경 가능해!
const obj = { name: "홍길동" };
obj.name = "길동짱"; // 가능!
🧠 보너스
- 선언 없이 변수 사용 (b = 30) → 전역 변수로 만들어짐 (나쁜 습관! var, let, const 꼭 써야 함)
- 템플릿 리터럴 (문자열 안에 변수 넣기)
let a = 10;
let b = 20;
let str = `값은 ${a}, ${b}입니다`; // 백틱(``) 사용
console.log(str); // 값은 10, 20입니다
✅ 자바스크립트 연산자 정리
1. 산술 연산자 (Arithmetic Operators)
연산자의미예시 (a1 = 5, a2 = 2)
| + | 더하기 | a1 + a2 → 7 |
| - | 빼기 | a1 - a2 → 3 |
| * | 곱하기 | a1 * a2 → 10 |
| / | 나누기(실수형) | a1 / a2 → 2.5 |
| % | 나머지 | a1 % a2 → 1 |
❗ 자바스크립트에는 정수 나누기 연산자 // 같은 건 없음
그래서 parseInt() 함수로 결과를 정수로 변환해야 해.
2. 비교 연산자 (Comparison Operators)
연산자의미예시 (10, "10")
| == | 값만 비교 | "10" == 10 → true |
| === | 값과 타입 모두 비교 | "10" === 10 → false |
| != | 다르면 true | 10 != "10" → false |
| !== | 값 또는 타입이 다르면 true | 10 !== "10" → true |
| > < >= <= | 크기 비교 | 10 > 5 → true |
💡 실수하기 쉬운 포인트
- ==은 타입이 달라도 값만 같으면 true
- ===는 타입까지 같아야 true → 웬만하면 === 쓰자!
- 논리연산자는 조건문(if)에서 많이 사용함
- 자바스크립트는 정수/실수 구분 없이 숫자는 다 number형
✅ 조건문 정리
1. if / else if / else
자바랑 똑같이 사용 가능!
const a1=10;
if(a1<20){
}else if(a1<10){
//..
}else{
//..
}
2. Truthy / Falsy 개념
자바스크립트는 if(값) 형태도 가능함.
if (a1) {
console.log("이건 true로 간주됨!");
}
- false로 간주되는 값 (== Falsy):
- false, 0, "" (빈 문자열), null, undefined, NaN
- 그 외엔 전부 true (Truthy)
✅ 반복문 정리
1. for문
let sum = 0;
for (var i = 1; i <= 10; i++) {
sum += i;
}
console.log(sum); // 55
console.log(i); // var라서 for문 밖에서도 접근 가능
var vs let 차이
- var: 함수 스코프 → for문 밖에서도 i 사용 가능
- let: 블록 스코프 → for문 안에서만 사용 가능
for (let j = 0; j < 5; j++) {
// j는 여기서만 사용 가능
}
console.log(j); // 오류!
2. foreach문
배열의 요소를 하나씩 꺼내면서 실행할 함수를 정의하는 메서드
📌 자바의 향상된 for문 또는 foreach랑 비슷한 느낌!
const fruits = ['🍎', '🍌', '🍇'];
fruits.forEach(function(fruit, index) {
console.log(`${index}번 과일: ${fruit}`);
});
🔽 출력:
0번 과일: 🍎
1번 과일: 🍌
2번 과일: 🍇
또는 이렇게도 가능:
fruits.forEach((f) => console.log(f));
'중앙정보기술인재개발원 > HTML&CSS&JS' 카테고리의 다른 글
| [JS] | 비동기, Promise,async,await (0) | 2025.04.23 |
|---|---|
| [JS] | 클로저, Closer (0) | 2025.04.22 |
| [HTML] | 기초정리, 태그, layout (0) | 2025.04.21 |
| [CSS] 클래스, 아이디, 우선순위 (0) | 2025.04.16 |
| [HTML] 기초 정리 (5) | 2025.04.16 |