⚡ JavaScript 학습 준비
🛠️ 개발 환경 준비
- VS Code
- Node.js
- 브라우저 외부에서 실행할 수 있도록 만든 자바스크립트 런타임 환경
- Java를 IntelliJ에서 실행하는 것처럼 개발 환경을 구성하기 위한 도구
Node.js 설치 시 체크 사항
- 필수 옵션 선택 후 설치
📦 VS Code 확장 프로그램
- JavaScript(ES6) code snippets
- ESLint
- ES = ECMA Script
- Lint = 코드 오류, 버그, 스타일 문제, 의심 구문 검사
- 자바스크립트 문법 오류 자동 체크
- Code Runner
.js파일 실행 가능- 단축키:
Ctrl + Alt + N - HTML 연동 없이
.js만 실행 → 임시 확인 용도
📘 JavaScript 기본 문법
📍 자바스크립트 작성 위치
01_js_location.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript 코드 위치</title>
<script>
document.write('head 태그 내 script 실행<br>');
</script>
<!-- <script src="./01_js_location.js"></script> -->
</head>
<body>
<script>
document.write('body 태그 내 script 실행<br>');
</script>
<script src="./01_js_location.js"></script>
</body>
</html>- head 태그 내부
- body 태그 내부
- 별도 .js 파일 생성 후 src 속성으로 불러오기
📌 변수와 상수
-
변수 (variable)
- 데이터를 담는 바구니
- 값뿐만 아니라 객체, 함수도 담을 수 있음
-
상수 (const)
- 변하지 않는 값
변수 선언 형식
var greeting = 'Hello World!';
console.log(greeting);-
규칙:
-
문자, 숫자,
_,$사용 가능 -
숫자로 시작 불가
-
예약어 사용 불가
-
대소문자 구분
-
네이밍 규칙:
- 변수/함수 → 카멜케이스
- 클래스/생성자 → 파스칼케이스
-
var 선언자
var x = 5;
var y = 6;
var z = x + y;
var x = 7;
z = x + y; // 덮어쓰기 가능- 동일 변수명 재선언 가능 → 협업 시 충돌 위험
- Hoisting 발생
console.log(a); // undefined
var a = 10;
console.log(a); // 10let 선언자
- ES6 이후 추가
- var의 문제점 보완
- 재선언 불가, 순서 보장
console.log(a); // 오류 발생
let a = 20;
console.log(a);const 선언자
- 상수 (변경 불가)
- JS에서는 권장 사용
const x = 3;
x = 5; // 오류 발생예시:
const DATE_FORMAT = 'yyyy-mm-dd';🎲 데이터 타입
기본 자료형
- string
- number
- boolean
- undefined
- null
- symbol (ES6)
string
console.log("이름은 '홍길동'입니다.");
console.log('오늘 점심은 "짜장면!"');number
- 정수, 실수 구분 없이
number
boolean
true,false
undefined
- 값이 할당되지 않은 변수의 기본값
null
- 명시적으로 "값 없음" 표현
- 메모리 참조 해제 의미
symbol
- ES6에서 추가, 잘 쓰이지 않음
객체 (Object)
- 키-값 쌍 저장
const person = {
firstName: 'John',
lastName: 'Doe',
age: 20,
};- 수정 방법:
person.firstName = '김';
person['age'] = 30;배열 (Array)
- 순서 있는 값 저장
const cars = ['Hyundai', 'Kia', 'Ford'];
console.log(cars[0]); // Hyundai
cars[1] = 'Honda';typeof 연산자
console.log(typeof 'hi'); // string
console.log(typeof 30); // number
console.log(typeof {x:1}); // object
console.log(typeof [1,2,3]); // object
console.log(typeof null); // object🔢 연산자
할당 연산자
let x = 2, y = 3;
console.log(x ** y); // 8 (제곱)복합 연산자
+=, -=, *=, /=, %=, **=
비교 연산자
let a = 3, b = '3';
console.log(a == b); // true
console.log(a === b); // false논리 연산자
&&,||,!
삼항 연산자
let age = 18;
let isAdult = (age >= 20 ? true : false);
let point = 92;
let grade = (point >= 90) ? 'A' : (point >= 80) ? 'B' : 'C';🔀 조건문
- if / else if / else
- switch
🔁 반복문
-
for
-
for-in
- 객체 키 반복
for (const key in person) { console.log(key, person[key]); } -
for-of
- 배열 값 반복
-
while / do-while
let j = 1; do { console.log(j++); } while (j <= 10);
⚙️ 함수 (function)
함수 선언
function sum(x, y) {
return x + y;
}
console.log(sum(10,20));함수 표현식
let sum = function(x, y) {
return x + y;
};- 호이스팅 방지
- 순서 보장
Function 생성자
let sum = new Function('x','y','return x + y;');
console.log(sum(10,20));