파일은 프로그램이다?
웹사이트를 만들 때 우리는 수많은 .js 파일을 사용한다.
보통 “웹사이트 하나 = 프로그램 하나” 라고 생각하기 쉽지만,
사실 JS에서는 각각의 .js 파일이 개별적인 프로그램처럼 실행된다
즉, 파일 하나에서 오류가 나면, 다음 파일이 실행되지 않을 수도 있다는 뜻
🔹 파일 단위로 실행되는 JS의 특성
일반적인 프로그래밍 언어는
하나의 실행 파일(.exe, .jar)을 만들어서 “전체 프로그램”을 실행하지만,
자바스크립트는 각 파일이 독립적으로 실행되며, 실행 순서가 중요하다.
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>위 코드에서 b.js에서 오류가 발생하면, c.js가 실행되지 않을 수도 있음
✅ 즉, JS에서는 “각각의 파일이 독립적인 프로그램처럼 동작한다”는 개념이 중요하다
🔹 JS 파일 간의 데이터 공유
JS 파일이 개별적인 프로그램처럼 실행되기 때문에,
파일 간 데이터를 공유하는 방법이 중요하다.
📌 JS에서 파일 간 데이터를 공유하는 방법
| 방법 | 장점 | 단점 |
|---|---|---|
| 전역 변수 (Global Scope) | 간단함, 빠름 | 유지보수 어려움, 충돌 위험 |
| ES6 모듈 시스템 (import/export) | 안전하고 구조화됨 | 브라우저 지원 문제 (옛날 브라우저) |
자바스크립트의 값과 데이터 타입
📌 값(Value)이란?
값(Value)은 프로그램에서 정보의 가장 기본적인 단위이며, 원시 타입과 객체 타입으로 나뉜다.
🔹 자바스크립트의 데이터 타입
| 타입 | 예제 |
|---|---|
| 문자열(String) | "Hello", 'World', 템플릿 리터럴 |
| 숫자(Number) | 42, 3.14 |
| 불리언(Boolean) | true, false |
| null | null (값이 없음) |
| undefined | undefined (정의되지 않음) |
| 심벌(Symbol) | Symbol('unique') |
| BigInt | 123n (아주 큰 정수) |
const name = "태율"; // 문자열
const age = 25; // 숫자
const isDeveloper = true; // 불리언
let nickname; // undefined (값이 없음)
const uniqueId = Symbol("id"); // 심벌
const bigNumber = 9007199254740991n; // BigInt문자열 보간법 (String Interpolation)
📌 보간법이란?
변수를 문자열 안에 삽입하는 방식 (템플릿 리터럴 사용)
🔹 템플릿 리터럴 사용법
const name = "태율";
console.log(`안녕하세요, 저는 ${name}입니다.`);출력:
안녕하세요, 저는 태율입니다.✔ ${변수} 를 사용하면 문자열 안에 변수를 쉽게 삽입할 수 있다.
JS의 변수와 스코프 (var, let, const 차이)
JS 변수 선언 방식
| 선언 키워드 | 특징 | 재할당 가능 여부 | 스코프 |
|---|---|---|---|
| var | 함수 스코프, 중복 선언 가능 | ✅ 가능 | 함수 스코프 |
| let | 블록 스코프, 중복 선언 불가능 | ✅ 가능 | 블록 스코프 |
| const | 블록 스코프, 중복 선언 & 재할당 불가능 | ❌ 불가능 | 블록 스코프 |
var globalVar = "전역 변수"; // 함수 스코프
let blockVar = "블록 변수"; // 블록 스코프
const fixedVar = "상수"; // 재할당 불가능🔍 스코프란?
변수에 접근 할 수 있는 유효 범위
변수가 어디에서 선언되고 어디까지 접근 할 수 있는지를 결정하는 개념.
함수 스코프 - 함수 내부에서 선언된 변수는 오직 그 함수 안에서만 접근 가능하다.
함수가 실행이 끝나면, message 변수는 더 이상 접근할 수 없음.
블록 스코프 - 블록 ({}) 내부에서 선언된 변수는 그 블록 안에서만 유효하다.
let 과 const는 블록 스코프를 가짐
| 개념 | 함수 스코프 | 블록 스코프 |
|---|---|---|
| 적용 대상 | var | let, const |
| 유효 범위 | 함수 {} 내부 | {} 블록내부 |
| 접근 가능 여부 | 함수가 끝나면 사라짐 | 블록이 끝나면 사라짐 |
| 주요 특징 | 함수 내부에서만 변수 사용 가능 | 블록 내부에서만 변수 사용 가능 |
객체와 배열
🔹 객체 (Object)
const user = {
name: "태율",
age: 25,
skills: ["JavaScript", "Next.js", "TailwindCSS"],
};
console.log(user.name); // 태율
console.log(user.skills[0]); // JavaScript🔹 배열 (Array)
const fruits = ["🍎", "🍌", "🍇"];
console.log(fruits[1]); // 🍌
console.log(fruits.length); // 3함수(Function)
📌 함수는 코드를 재사용 가능하게 만들고, 특정 기능을 실행하는 블록
🔹 함수 선언문 (Function Declaration)
기본적인 함수 선언 방식 - 코드 실행 전에 미리 함수가 등록됨.(호이스팅)
function sayHi(name) {
return `안녕, ${name}!`;
}
console.log(sayHi("태율")); // ✅ "안녕, 태율!"🔹 함수 표현식 (Function Expression)
변수에 함수를 할당하는 방식 - 호이스팅되지 않음.(선언 전에 호출 불가능)
const sayBye = function(name) {
return `잘 가, ${name}!`;
};
console.log(sayBye("태율")); // ✅ "잘 가, 태율!"🔹 화살표 함수 (Arrow Function)
더 간결한 함수 선언 방식 - this를 바인딩하지 않음(객체 내부에서 주의 필요)
const add = (a, b) => a + b;
console.log(add(3, 5)); // ✅ 8📌 function 키워드를 쓰지 않고 짧고 간결한 문법 제공! (this 바인딩 방식이 다름)
🔹 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
선언과 동시에 실행되는 함수 - 한 번만 실행되고 재사용되지 않음.
(function() {
console.log("즉시 실행 함수 실행!");
})(); // ✅ "즉시 실행 함수 실행!"🔹 this 차이점
일반 함수 (function) → this는 호출한 객체를 가리킴
화살표 함수 (=>) → this가 바인딩되지 않고, 부모 스코프의 this를 사용
const person = {
name: "태율",
normalFunction: function () {
console.log(`일반 함수: ${this.name}`);
},
arrowFunction: () => {
console.log(`화살표 함수: ${this.name}`);
},
};
person.normalFunction(); // ✅ "일반 함수: 태율"
person.arrowFunction(); // ❌ "화살표 함수: undefined"
🚨 this가 헷갈리는 경우는 항상 화살표 함수의 this 동작을 확인해야 함!
비교 (같음에 대한 고찰, 강제 변환)
🔹 일치 비교(Strict Equality) vs 동등 비교(Loose Equality)
console.log(3 === "3"); // ❌ false (타입까지 비교)
console.log(3 == "3"); // ✅ true (자동 형 변환 발생)📌 항상 === (일치 비교) 연산자를 사용하자! == 는 예상치 못한 결과를 초래할 수 있음!
🔹 NaN과 -0 비교
console.log(NaN === NaN); // ❌ false (NaN은 자기 자신과도 다름!)
console.log(Object.is(NaN, NaN)); // ✅ true (올바른 비교 방법)
console.log(0 === -0); // ✅ true (일치 비교에서는 구별 불가능)
console.log(Object.is(0, -0)); // ❌ false (구별 가능!)📌 정확한 비교가 필요하면 Object.is()를 사용하자!
코드 구조화 패턴 (클래스, 모듈)
🔹 클래스(Class)
📌 클래스를 사용하면 객체를 쉽게 생성할 수 있음! (ES6 문법)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`안녕하세요, 저는 ${this.name}입니다.`);
}
}
const taeYul = new Person("태율", 25);
taeYul.introduce(); // ✅ "안녕하세요, 저는 태율입니다."==클래스의 constructor는 객체를 생성할 때 실행됨
📌 extends: 부모 클래스를 상속받아 새로운 클래스를 만들 수 있음
📌 super(): 부모 클래스의 기능을 가져올 때 사용
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name}이(가) 소리를 냅니다.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name}이(가) 멍멍!`);
}
}
const dog = new Dog("바둑이");
dog.speak(); // ✅ "바둑이가 멍멍!"🔹 모듈(Module)
📌 코드를 여러 파일로 분리하고 재사용 가능하게 만드는 기능
📌 export로 내보내고, import로 가져옴!
✅ 모듈 가져오기 (import)
📌 파일: app.js
import { add } from "./math.js";
console.log(add(2, 3)); // ✅ 5📌 모듈을 사용하면 코드의 가독성과 유지보수성이 높아짐!
✅ 모듈 내보내기 (export)
📌 파일: math.js
export function add(a, b) {
return a + b;
}- export default를 사용하면 모듈을 더 간단하게 가져올 수 있음!
📌 default export 예제
// math.js
export default function add(a, b) {
return a + b;
}
// app.js
import add from "./math.js"; // {} 없이 import 가능
console.log(add(2, 3)); // ✅ 5📌 export default는 중괄호 {} 없이 가져올 수 있음!
• 여러 개의 함수나 변수를 export할 때는 named export를 사용
• 하나만 export할 때는 default export를 사용
✅ 값은 원시 타입(Primitive)과 참조 타입(Object)으로 나뉜다!
✅ 변수는 var, let, const가 있으며 let, const를 사용하자!
✅ 함수는 선언문, 표현식, 화살표 함수로 나뉜다!
✅ 비교 연산자는 === (일치 비교)를 사용해야 안전하다!
✅ 클래스와 모듈을 사용하면 코드 구조화가 쉽고 유지보수하기 좋다!
