📘 자바스크립트(JavaScript) 기본 다지기 - Part 1

자바스크립트란 무엇인가? 변수, 스코프, 타입, 조건문까지 기초 완전 정복!

---

✅ 자바스크립트란 무엇인가?

자바스크립트(JavaScript, JS)는 웹페이지에 동적인 기능을 추가할 수 있는 프로그래밍 언어입니다.

HTML이 구조, CSS가 스타일을 담당한다면, JS는 기능과 상호작용을 담당합니다.

• 버튼 클릭 시 팝업 띄우기
• 로그인 폼 유효성 검사
• 서버에서 데이터 받아와 페이지에 렌더링
• 애니메이션 효과 등

현재는 브라우저를 넘어 Node.js 환경에서도 백엔드 개발까지 가능할 정도로 범용성이 넓어요.

// 간단한 자바스크립트 예시
console.log("Hello, World!");  // 콘솔에 텍스트 출력
document.getElementById("demo").innerHTML = "환영합니다!";  // HTML 요소 내용 변경

---

✅ 변수 선언 (var, let, const)과 스코프

자바스크립트에서 데이터를 저장하기 위한 공간이 바로 변수입니다.

자바스크립트에서는 변수를 선언할 때 var, let, const 키워드를 사용할 수 있어요.

🔹 var (ES5 이전 방식)

var name = 'Tom';
var name = 'Jane';  // 재선언 가능
name = 'Mike';      // 재할당 가능

• 재선언 가능, 재할당 가능
• 함수 레벨 스코프
• 호이스팅 발생 (초기값 없이 undefined)

🔹 let (ES6 이후 권장)

let age = 30;
// let age = 31;  // ❌ 재선언 불가능
age = 31;        // ✅ 재할당 가능

• 재선언 불가, 재할당 가능
• 블록 레벨 스코프
• 호이스팅은 되지만 초기화 전 접근 시 에러

🔹 const (상수 선언)

const pi = 3.14;
// pi = 3.141592;  // ❌ 재할당 불가능

// 객체의 내용은 변경 가능
const person = { name: 'John' };
person.name = 'Jane';  // ✅ 가능

• 재선언, 재할당 모두 불가
• 선언과 동시에 초기화 필수

📌 스코프란?

변수가 어디서 유효한가? 를 결정하는 영역

function example() {
  let local = 'hello';
}
console.log(local); // ❌ 오류: local is not defined

스코프 유형	설명	예시
블록 스코프	{} 중괄호 내에서만 유효	let, const
함수 스코프	함수 내에서만 유효	var
전역 스코프	어디서든 접근 가능	함수/블록 외부에 선언된 변수

---

✅ 데이터 타입과 연산자

🔹 자바스크립트의 주요 데이터 타입

타입	예시	설명
Number	1, 3.14, -100	정수와 소수점 숫자
String	"Hello", 'World'	텍스트 데이터
Boolean	true, false	논리값
Null	null	의도적인 빈 값
Undefined	undefined	선언만 하고 값 없음
Object	{ key: "value" }	키-값 쌍의 집합
Array	[1, 2, 3]	순서가 있는 값의 집합
Function	function() {}	실행 가능한 코드 묶음
Symbol	Symbol('id')	ES6+, 고유하고 변경 불가능한 값
BigInt	123n	ES2020+, 큰 정수 다룰 때 사용

let a = 10;
let b = "10";
console.log(a == b);  // true (느슨한 비교, 타입 변환 후 비교)
console.log(a === b); // false (엄격한 비교, 타입까지 비교)

// 타입 확인하기
console.log(typeof 42);           // "number"
console.log(typeof "Hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof { age: 30 });  // "object"
console.log(typeof [1, 2, 3]);    // "object" (배열도 객체)

 

🔹 연산자

종류	연산자	예시	설명
산술	+, -, *, /, %, **	5 + 2 → 7	사칙연산
비교	==, ===, !=, !==, >, <, >=, <=	5 > 3 → true	값 비교
논리	&&, ||, !	true && false → false	AND, OR, NOT
할당	=, +=, -=, *=, /=	x += 5 (x = x + 5)	변수에 값 대입
삼항	조건 ? 참값 : 거짓값	age >= 18 ? '성인' : '미성년자'	조건에 따른 값 반환
typeof	typeof	typeof "hello"	데이터 타입 확인

// 산술 연산자 예시
let sum = 10 + 5;      // 15
let power = 2 ** 3;    // 8 (2의 3승)

// 논리 연산자 예시
let isValid = (age > 18) && (country === 'Korea');  // 둘 다 true면 true

// 삼항 연산자 예시
let status = (score >= 60) ? '합격' : '불합격';

---

✅ 조건문 & 반복문

🔹 if / else 문

let age = 18;
if (age >= 20) {
  console.log('성인입니다');
} else if (age >= 17) {
  console.log('고등학생입니다');
} else {
  console.log('미성년자입니다');
}

 

🔹 switch 문

let day = 2;
switch (day) {
  case 0: 
    console.log('일요일'); 
    break;
  case 1: 
    console.log('월요일'); 
    break;
  case 2: 
    console.log('화요일'); 
    break;
  default: 
    console.log('기타');
}

 

🔹 for 반복문

// 기본 for 반복문
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4 출력
}

// 배열의 for...of 반복문 (ES6+)
const fruits = ['사과', '바나나', '딸기'];
for (const fruit of fruits) {
  console.log(fruit); // 사과, 바나나, 딸기 출력
}

// 객체의 for...in 반복문
const person = { name: 'John', age: 30, job: 'developer' };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

🔹 while / do-while 반복문

// while 반복문
let i = 0;
while (i < 3) {
  console.log(i);  // 0, 1, 2 출력
  i++;
}

// do-while 반복문 (조건이 거짓이어도 최소 1번은 실행)
let j = 0;
do {
  console.log(j);  // 최소 한 번은 출력됨
  j++;
} while (j < 3);

---

✨ 마무리 요약

항목	핵심 요약
변수 선언	var보다 let과 const를 사용하자
스코프	let/const는 블록, var는 함수 스코프
데이터 타입	문자열, 숫자, 불린 등 기본 타입과 참조 타입 숙지
타입 비교	==보다 ===를 사용하여 타입까지 정확히 비교
조건문	if, switch로 흐름 제어
반복문	for, while, for...of, for...in으로 반복 처리

 

다음 글 Part 2에서는

👉 함수 선언식과 표현식, 객체/배열 다루기, DOM 조작, this와 실행 컨텍스트, 호이스팅 등

실무에서 진짜 많이 쓰이는 내용들을 다룰 예정입니다!