TIL - 20260511

0511 웹 개발 기초 복습 (3/N): JavaScript 핵심 문법

---

✅ 1. 변수(Variable)와 데이터 타입(Data Type)

• 변수: 데이터를 저장하고 참조하기 위해 사용하는 이름이 붙은 저장 공간.
• JavaScript는 동적 타입(Dynamic Type) 언어로, 변수를 선언할 때 타입을 미리 지정하지 않으며, 실행 시점에 할당되는 값에 따라 타입이 결정됩니다.

➕ 변수 선언 키워드: let, const, var

키워드	스코프(Scope)	재할당	재선언	특징
let	블록 {}	가능	불가능	권장되는 기본 변수 선언 방식.
const	블록 {}	불가능	불가능	상수. 한 번 할당하면 값을 변경할 수 없음.
var	함수	가능	가능	호이스팅 등 예기치 않은 문제 발생 가능. 사용 비권장.

• 모범 사례: 기본적으로 모든 변수는 const로 선언하고, 재할당이 꼭 필요한 경우에만 let을 사용합니다.

➕ 데이터 타입

• JavaScript의 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object Type)으로 나뉩니다.

구분	타입	설명
원시 타입	string	문자열
	number	숫자 (정수, 실수 모두 포함)
	boolean	true 또는 false
	null	"값이 없음"을 의도적으로 명시
	undefined	값이 할당되지 않은 상태
객체 타입	object	여러 값을 key: value 쌍으로 저장하는 데이터 구조 (객체, 배열, 함수 등)

---

✅ 2. 함수 (Function)

• 함수는 특정 작업을 수행하는 코드의 묶음이며, 여러 번 호출하여 재사용할 수 있습니다.

➕ 함수 선언 방식

1. 함수 선언문 (Function Declaration):

   function add(a, b) {
     return a + b;
   }

2. 함수 표현식 (Function Expression):

   const subtract = function(a, b) {
     return a - b;
   };

3. 화살표 함수 (Arrow Function) - (ES6+):

   • function 키워드와 return을 생략하여 코드를 매우 간결하게 만들어 줍니다. 현대 JavaScript에서 가장 널리 사용되는 방식입니다.

   const multiply = (a, b) => a * b;

---

✅ 3. 연산자와 제어문

➕ 연산자

• 비교 연산자:
  • == (동등 연산자): 타입을 강제로 변환하여 값을 비교. ('1' == 1 → true) 사용 비권장.
  • === (일치 연산자): 타입과 값을 모두 비교. ('1' === 1 → false) 사용 권장.
• 논리 연산자: && (AND), || (OR), ! (NOT)
• 삼항 연산자: (조건) ? 값1 : 값2

➕ 제어문

• 프로그램의 실행 흐름을 조건이나 반복에 따라 제어하는 구문입니다.

1. if / else if / else 문:

   const score = 85;
   if (score >= 90) {
     console.log('A');
   } else if (score >= 80) {
     console.log('B');
   } else {
     console.log('C');
   }

2. for 문: 정해진 횟수만큼 코드를 반복합니다.

   for (let i = 0; i < 5; i++) {
     console.log(i);
   }

3. while 문: 조건식이 true인 동안 코드를 계속해서 반복합니다.

   let count = 0;
   while (count < 3) {
     console.log('Hello');
     count++;
   }

---

✅ 4. ES6+ 주요 문법 (Modern JavaScript)

• ES6(ECMAScript 2015) 이후 도입된 현대적인 문법들은 코드를 더 간결하고 강력하게 만들어 줍니다.

1. 템플릿 리터럴 (Template Literals):

   • 백틱(`)을 사용하여 문자열을 만들고, ${expression} 구문을 사용하여 변수를 쉽게 삽입할 수 있습니다.

     const name = 'World';
     const greeting = `Hello, ${name}!`;

2. 구조 분해 할당 (Destructuring Assignment):

   • 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 쉽게 할당합니다.

     // 객체 구조 분해
     const person = { name: 'Alice', age: 25 };
     const { name, age } = person; // name = 'Alice', age = 25
     
     // 배열 구조 분해
     const fruits = ['Apple', 'Banana'];
     const [first, second] = fruits; // first = 'Apple', second = 'Banana'

3. 전개 구문 (Spread Syntax):

   • 점 세 개(...)를 사용하여 배열이나 객체의 모든 요소를 "펼쳐서" 개별 요소로 만듭니다. 배열/객체를 불변성을 유지하며 복사하거나 합치는 데 매우 유용합니다.

     const arr1 =;
     const arr2 =;
     const combinedArr = [...arr1, ...arr2]; //
     
     const obj1 = { a: 1, b: 2 };
     const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

---

📌 요약

• JavaScript 변수는 const와 let으로 선언하며, 동적 타입 언어의 특징을 가집니다.
• 함수는 코드를 재사용하는 단위이며, 간결한 화살표 함수 문법이 널리 사용됩니다.
• 값 비교 시에는 타입까지 엄격하게 비교하는 === (일치 연산자)를 사용하는 것이 안전합니다.
• 템플릿 리터럴, 구조 분해 할당, 전개 구문과 같은 ES6+ 문법은 현대 JavaScript 개발의 생산성을 크게 향상시키는 필수적인 도구입니다.