JavaScript 기초

웹 개발에서 JavaScript는 HTML과 CSS와 함께 필수적이고 매우 중요한 기술입니다. 사실 저는 JavaScript를 배우면서 많은 좌절을 겪었습니다… (비전공자에게는 정말 이해하기 어려운 내용이더라고요…) 사실 지금도 잘 다루지는 못합니다. 점점 하면서 느는것같긴해서 계속 많이 연습하고 있는 중입니다. 따라서 이번에는 JavaScript의 개념, 기초 문법, 데이터 타입, 제어문, 함수, 그리고 DOM 조작까지 핵심 기초만 뽑아서 공부해보겠습니다.

1. JavaScript란?

JavaScript(JS)는 브라우저에서 동작하는 프로그래밍 언어입니다.
HTML/CSS가 구조와 스타일을 담당한다면, JS는 동적 기능과 상호작용을 담당합니다.

예시:

<button onclick="alert('Hello JS!')">Click me</button>

버튼 클릭 시 경고창 표시
브라우저에서 바로 동작 가능
React, Vue, Node.js 등 현대 프레임워크의 기반 언어

장점

웹 브라우저 어디서든 실행 가능
다양한 프레임워크/라이브러리 지원
이벤트 기반 프로그래밍 가능

단점

타입이 동적이라 런타임 에러 발생 가능
복잡한 프로그램에서는 구조화 필요
브라우저 호환성 문제 발생 가능

2. 기본 문법

2-1. 변수 선언

// ES6 이전
var name = "Hae-na";

// ES6 이후
let age = 5;
const BIRTH_YEAR = 2025;

let: 값 변경 가능
const: 값 변경 불가
var: 함수 스코프, 요즘 잘 사용하지 않음

2-2. 데이터 타입

let str = "Hello";
let num = 10;
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "Hae-na", age: 0 };
let und;
let nll = null;

문자열(String), 숫자(Number), 불(Boolean), 배열(Array), 객체(Object), undefined, null

2-3. 연산자

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.333
console.log(x % y); // 1

3. 제어문

3-1. 조건문

let score = 85;

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

3-2. 반복문

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

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

4. 함수

// 함수 선언
function greet(name) {
  return `Hello, ${name}!`;
}

// 함수 호출
console.log(greet("Hae-na"));

// 화살표 함수
const add = (a, b) => a + b;
console.log(add(3, 5));

재사용 가능한 코드 블록
매개변수와 반환값 가능
ES6 이후 화살표 함수 사용 증가

5. DOM(Document Object Model) 조작

<button id="btn">Click me</button>
<p id="text">Hello</p>

const btn = document.getElementById("btn");
const text = document.getElementById("text");

btn.addEventListener("click", () => {
  text.textContent = "Hello, JavaScript!";
});

getElementById, querySelector로 요소 선택
addEventListener로 이벤트 처리
textContent, innerHTML로 내용 변경

6. Oneul Code를 정리하며…

오늘 JavaScript 기초를 학습하며 다음 사항을 공부하게 되었습니다.

변수와 데이터 타입: let, const, 숫자, 문자열, 객체, 배열
연산과 제어문: 조건문(if), 반복문(for, while)
함수: 재사용 가능하고 화살표 함수로 간결하게 작성
DOM 조작: 브라우저 UI와 상호작용 가능

JavaScript는 단순히 웹에 기능을 추가하는 것뿐만 아니라, 현대 웹 개발에서 프론트엔드와 백엔드 양쪽 모두에서 핵심 언어임을 이해할 수 있습니다.

Oneul Code는 오늘 공부한 내용을 정리하며, 여러분도 실습하며 학습할 수 있기를 바랍니다.

Oneul Code - 06. Basic of JavaScript