📘 자바스크립트 학습 정리 (0527)
1. 자바스크립트 소개
- 자바스크립트는 웹 페이지를 동적이고 인터랙티브하게 만드는 프로그래밍 언어
- 브라우저뿐 아니라 서버(Node.js), 모바일/데스크톱 앱에서도 사용됨
🌐 웹 브라우저의 JS 엔진
| 브라우저 | 엔진 이름 |
|---|---|
| Chrome | V8 |
| Firefox | SpiderMonkey |
| Safari | JavaScriptCore |
| Edge | Chakra (구버전) |
📌 실행 방법
- HTML 안의
<script>태그 - 외부
.js파일 연결 (<script src="파일.js">) - 개발자 도구 Console 탭에서 실행
2. 변수
🔸 선언 키워드
| 키워드 | 스코프 | 재선언 | 재할당 | 특징 |
|---|---|---|---|---|
| var | 함수 | O | O | 호이스팅, 지양 |
| let | 블록 | X | O | TDZ 존재 |
| const | 블록 | X | X | 상수, 객체 속성 변경 가능 |
let count = 1;
const PI = 3.14;🧾 요약:
const기본 사용, 필요 시let사용,var는 지양
3. 데이터 타입
✅ 기본 타입
- Number: 정수/실수, NaN, Infinity
- String: 따옴표 또는 백틱(`)으로 작성, 템플릿 리터럴 가능
- Boolean: true / false
- null: 명시적 없음
- undefined: 선언만 된 변수
- typeof: 타입 확인
let str = 'hello';
console.log(typeof str); // string🔁 타입 변환
- 명시적:
String(),Number(),Boolean() - 암시적: 연산 중 자동 변환
console.log('5' + 2); // '52'
console.log('5' - 2); // 3🧾 요약: 타입 이해는 오류 방지와 디버깅에 필수
4. 연산자
➕ 산술 연산자
+, -, *, /, %
console.log(10 % 3); // 1➕ 대입 연산자
=, +=, -=, *=, /=, %=
let x = 5;
x += 3; // 8🔍 비교 연산자
==, ===, !=, !==, >, <, >=, <=
console.log(10 == '10'); // true
console.log(10 === '10'); // false🧠 논리 연산자
&&(AND),||(OR),!(NOT)
let adult = true;
let access = false;
console.log(adult && access); // false🧾 요약:
===와!==사용 습관화, 논리 연산자는 조건문 필수 요소
✅ 총정리
- 자바스크립트는 동적 웹의 핵심이며, 변수 선언과 타입, 연산자 개념부터 정확히 익히는 것이 중요합니다.
- 콘솔 실습을 통해 실시간으로 실행 결과를 확인하면서 학습하세요.# 📘 자바스크립트 학습 정리 (0527)
1. 자바스크립트 소개
- 자바스크립트는 웹 페이지를 동적이고 인터랙티브하게 만드는 프로그래밍 언어
- 브라우저뿐 아니라 서버(Node.js), 모바일/데스크톱 앱에서도 사용됨
🌐 웹 브라우저의 JS 엔진
| 브라우저 | 엔진 이름 |
|---|---|
| Chrome | V8 |
| Firefox | SpiderMonkey |
| Safari | JavaScriptCore |
| Edge | Chakra (구버전) |
📌 실행 방법
- HTML 안의
<script>태그 - 외부
.js파일 연결 (<script src="파일.js">) - 개발자 도구 Console 탭에서 실행
2. 변수
🔸 선언 키워드
| 키워드 | 스코프 | 재선언 | 재할당 | 특징 |
|---|---|---|---|---|
| var | 함수 | O | O | 호이스팅, 지양 |
| let | 블록 | X | O | TDZ 존재 |
| const | 블록 | X | X | 상수, 객체 속성 변경 가능 |
let count = 1;
const PI = 3.14;🧾 요약:
const기본 사용, 필요 시let사용,var는 지양
3. 데이터 타입
✅ 기본 타입
- Number: 정수/실수, NaN, Infinity
- String: 따옴표 또는 백틱(`)으로 작성, 템플릿 리터럴 가능
- Boolean: true / false
- null: 명시적 없음
- undefined: 선언만 된 변수
- typeof: 타입 확인
let str = 'hello';
console.log(typeof str); // string🔁 타입 변환
- 명시적:
String(),Number(),Boolean() - 암시적: 연산 중 자동 변환
console.log('5' + 2); // '52'
console.log('5' - 2); // 3🧾 요약: 타입 이해는 오류 방지와 디버깅에 필수
4. 연산자
➕ 산술 연산자
+, -, *, /, %
console.log(10 % 3); // 1➕ 대입 연산자
=, +=, -=, *=, /=, %=
let x = 5;
x += 3; // 8🔍 비교 연산자
==, ===, !=, !==, >, <, >=, <=
console.log(10 == '10'); // true
console.log(10 === '10'); // false🧠 논리 연산자
&&(AND),||(OR),!(NOT)
let adult = true;
let access = false;
console.log(adult && access); // false🧾 요약:
===와!==사용 습관화, 논리 연산자는 조건문 필수 요소
✅ 총정리
- 자바스크립트는 동적 웹의 핵심이며, 변수 선언과 타입, 연산자 개념부터 정확히 익히는 것이 중요합니다.
- 콘솔 실습을 통해 실시간으로 실행 결과를 확인하면서 학습하세요.
