JavaScript 기초 정리

1. 브라우저와 개발자 도구

JavaScript는 웹 브라우저에서 동작하는 대표적인 프로그래밍 언어입니다.
웹 개발을 할 때 브라우저의 개발자 도구(DevTools)를 활용하면 디버깅과 코드 분석이 가능합니다.

개발자 도구 사용 방법

• F12 또는 Ctrl + Shift + I (Mac: Cmd + Opt + I)를 눌러 개발자 도구 열기
• Console 탭에서 JavaScript 코드 실행 가능
• Elements 탭에서 HTML 요소 확인 및 수정 가능
• Network 탭에서 네트워크 요청 확인 가능

---

2. 디버깅(Debugging)

디버깅은 코드의 오류를 찾아 수정하는 과정입니다. 개발자 도구의 Console과 Sources 탭을 활용할 수 있습니다.

디버깅 방법

• console.log(value);를 활용하여 값을 출력
• debugger; 키워드를 사용하여 코드 실행 중단 후 확인
• 개발자 도구의 Breakpoints 기능을 활용하여 특정 코드에서 중단 후 상태 확인

---

3. JavaScript의 특징

• 동적 타입 언어: 변수의 타입이 고정되지 않고, 실행 중 변경 가능
• 객체 기반 언어: 모든 데이터가 객체 또는 원시 타입
• 인터프리터 언어: 코드가 한 줄씩 실행됨
• 비동기 처리 가능: setTimeout, fetch API, Promise, async/await 활용 가능

---

4. JavaScript의 탄생 배경과 ECMAScript

JavaScript는 1995년 Netscape의 브렌던 아이크(Brendan Eich)에 의해 개발되었으며, 이후 ECMAScript(ES)라는 표준이 정해졌습니다.

ECMAScript 주요 버전

• ES5 (2009년): strict mode, JSON, Array.prototype.map 등의 기능 추가
• ES6 (2015년): let, const, arrow function, class, Promise, module 등의 기능 추가
• 이후 버전: async/await, optional chaining, nullish coalescing 등 지속적인 업데이트

---

5. 변수와 호이스팅

변수 선언 방법

var x = 10; // 함수 스코프, 중복 선언 가능
let y = 20; // 블록 스코프, 중복 선언 불가능
const z = 30; // 블록 스코프, 재할당 불가능

호이스팅(Hoisting)

변수와 함수 선언이 코드 실행 전에 메모리에 저장되는 현상입니다.

console.log(a); // undefined (호이스팅 발생)
var a = 5;

let과 const는 호이스팅되지만, TDZ(Temporal Dead Zone)로 인해 선언 전에 접근하면 오류 발생!

---

6. 자료형(Data Types)

기본 자료형(Primitive Type)

• Number: 10, 3.14, Infinity, NaN
• BigInt: BigInt(12345678901234567890n)
• String: 'Hello', "World"
• Boolean: true, false
• undefined: 값이 할당되지 않은 변수
• null: 명시적으로 값이 없음을 표현
• Symbol: 유일한 값 생성

참조 자료형(Reference Type)

• Object: { name: 'Alice', age: 25 }
• Array: [1, 2, 3]
• Function: function() {}

---

7. 동적 타입 언어

JavaScript는 동적 타입(Dynamically Typed) 언어이므로, 변수의 자료형이 실행 중 변경될 수 있습니다.

let value = 10; // Number
value = "Hello"; // String
value = true; // Boolean

이러한 특징 때문에, 데이터 타입을 다룰 때 주의가 필요합니다.

---

8. 연산자(Operators)

기본 연산자

let a = 10;
let b = 3;
console.log(a + b); // 13 (덧셈)
console.log(a - b); // 7 (뺄셈)
console.log(a * b); // 30 (곱셈)
console.log(a / b); // 3.33 (나눗셈)
console.log(a % b); // 1 (나머지)

비교 연산자

console.log(5 == '5'); // true (값만 비교)
console.log(5 === '5'); // false (자료형까지 비교)

---

9. 함수(Function)

함수 선언 방법

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice"));

함수 표현식

const greet = function(name) {
  return `Hello, ${name}!`;
};

화살표 함수 (Arrow Function)

const greet = (name) => `Hello, ${name}!`;

---

10. 일급 객체(First-Class Object)와 매개변수

JavaScript의 함수는 일급 객체이므로, 변수에 할당하거나 매개변수로 전달할 수 있습니다.

function execute(func) {
  func();
}

execute(() => console.log("Hello World!"));

---

11. 함수의 다양한 형태

즉시 실행 함수 (IIFE)

(function() {
  console.log("즉시 실행!");
})();

콜백 함수 (Callback Function)

function process(callback) {
  console.log("Processing...");
  callback();
}
process(() => console.log("Done!"));

재귀 함수 (Recursive Function)

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

---