TIL - 20251203

juni·2025년 12월 2일

TIL

목록 보기

196/317

1203 JavaScript 기초 복습 (1/4): 변수, 타입, 함수, 조건문

✅ 1. JavaScript란?

JavaScript는 웹 페이지를 동적이고 인터랙티브하게 만들기 위해 탄생한 프로그래밍 언어입니다.
과거에는 브라우저에서만 사용되었지만, Node.js의 등장으로 이제는 서버(백엔드), 데스크톱 앱, 모바일 앱 등 거의 모든 영역에서 사용되는 범용 언어가 되었습니다.
웹에서의 역할:
- HTML: 웹 페이지의 구조를 담당합니다. (뼈대)
- CSS: 웹 페이지의 스타일을 담당합니다. (디자인)
- JavaScript: 웹 페이지의 동작을 담당합니다. (움직임, 상호작용)

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

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

➕ 변수 선언 키워드

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

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

➕ 데이터 타입

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

구분	타입	설명
원시 타입	`string`	문자열 (따옴표 `''` 또는 `""` 사용)
	`number`	숫자 (정수, 실수 모두 포함)
	`boolean`	`true` 또는 `false`
	`null`	"값이 없음"을 의도적으로 명시한 값
	`undefined`	값이 할당되지 않은 상태
	`symbol`	(ES6+) 고유하고 변경 불가능한 값
객체 타입	`object`	여러 값을 `key: value` 쌍으로 저장하는 데이터 구조

✅ 3. 함수 (Function)

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

➕ 함수 선언 방식

함수 선언문 (Function Declaration):
```
function add(a, b) {
  return a + b;
}
```

함수 표현식 (Function Expression):

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

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

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

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

// 코드가 여러 줄일 경우
const divide = (a, b) => {
  if (b === 0) {
    return "Error: Cannot divide by zero";
  }
  return a / b;
};

✅ 4. 연산자 (Operators)

산술 연산자: +, -, *, /, % (나머지), ** (거듭제곱, ES7+)
할당 연산자: =, +=, -=
비교 연산자:
- == (동등 연산자): 타입을 강제로 변환하여 값을 비교. ('1' == 1 → true) 사용 비권장.
- === (일치 연산자): 타입과 값을 모두 비교. ('1' === 1 → false) 사용 권장.
- !=, !==, >, <, >=, <=
논리 연산자: && (AND), || (OR), ! (NOT)
삼항 연산자: (조건) ? 값1 : 값2

✅ 5. 조건문 (Conditional Statements)

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

if / else if / else 문:

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

switch 문:

const fruit = 'Apple';
switch (fruit) {
  case 'Apple':
    console.log('Price is 1000 won.');
    break;
  case 'Banana':
    console.log('Price is 1500 won.');
    break;
  default:
    console.log('Not in stock.');
}