JavaScript 기초
JavaScript 기초
JavaScript는 웹 개발의 중심에 있는 중요한 프로그래밍 언어입니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 정의하는 동안 JavaScript는 웹 페이지가 동적으로 작동하게 합니다. 이 글에서는 JavaScript의 기초적인 문법과 개념을 소개합니다.
1. JavaScript란?
JavaScript는 웹에서 동적인 기능을 구현하는 데 사용되는 프로그래밍 언어입니다. JavaScript는 개발자들이 웹 페이지에 상호작용을 추가할 수 있게 하며, 서버 개발, 모바일 앱 개발, 데스크탑 애플리케이션 개발 등 다양한 영역에서도 사용됩니다.
1.1 JavaScript의 역사
JavaScript는 1995년 브렌던 아이크(Brendan Eich)에 의해 개발되었으며, 초기에는 Mocha, LiveScript라는 이름을 사용하다가 JavaScript로 명명되었습니다. JavaScript는 ECMAScript라는 표준에 따라 관리되고 있으며, ES6(ECMAScript 2015)를 포함한 많은 버전이 있습니다.
1.2 JavaScript의 특징
동적 타이핑(Dynamic Typing): 변수의 타입을 명시적으로 지정하지 않아도 됨.
인터프리터 언어: 코드를 실행하기 위해 별도로 컴파일할 필요 없음.
이벤트 기반 프로그래밍: 사용자 상호작용 및 비동기 작업을 다룰 수 있음.
저변이 넓은 생태계: NPM을 통한 다양한 라이브러리와 프레임워크를 제공.
2. 기본 문법
JavaScript의 기초 개념인 변수, 데이터 타입, 연산자에 대해 살펴보겠습니다.
2.1 변수 선언
변수는 데이터를 저장하는 상자라고 생각할 수 있습니다. ES6 이후에는 let과 const를 주로 사용합니다.
let variableName = "value"; // 변수 선언 (재할당 가능)
const constantName = "value"; // 상수 선언 (재할당 불가능)2.2 데이터 타입
JavaScript의 자료형은 크게 원시 타입(primitive type)과 참조 타입(reference type)으로 나뉩니다.
원시 타입: 숫자(number), 문자열(string), 불리언(boolean), null, undefined
참조 타입: 객체(object), 배열(array), 함수(function)
let age = 30; // number
let name = "Alice"; // string
let isStudent = true; // boolean
let nothing = null; // null
let notDefined; // undefined
const person = { name: "Alice", age: 25 }; // object
const colors = ["red", "green", "blue"]; // array2.3 연산자
산술 연산자, 비교 연산자, 논리 연산자의 사용 예제입니다.
console.log(5 + 3); // 8 (산술 연산자)
console.log(10 > 3); // true (비교 연산자)
console.log(true && false); // false (논리 연산자)3. 조건문과 반복문
JavaScript에서 조건문과 반복문은 프로그램의 흐름을 제어하는 데 사용됩니다.
3.1 조건문(if, else if, else)
조건문을 사용하면 상황에 따라 다른 코드를 실행할 수 있습니다.
let score = 85;
if (score >= 90) {
console.log('A 학점');
} else if (score >= 80) {
console.log('B 학점');
} else {
console.log('C 학점 이하');
}3.2 반복문(for, while)
반복문은 코드 블록을 여러 번 실행합니다.
for (let i = 0; i < 3; i++) {
console.log(`i의 값: ${i}`);
}
let count = 0;
while (count < 3) {
console.log(`count: ${count}`);
count++;
}4. 함수
함수는 특정 작업을 수행하는 코드 묶음입니다. JavaScript에서는 함수 선언식과 함수 표현식을 사용할 수 있습니다.
4.1 함수 선언
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!4.2 화살표 함수
ES6에서 도입된 화살표 함수는 간결한 문법을 제공합니다.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 55. 객체와 배열
객체와 배열은 데이터를 구조화하는 데 사용되는 중요한 도구입니다.
5.1 객체
객체는 키-값 쌍으로 데이터를 저장합니다.
const person = {
name: 'Charlie',
age: 28,
greet() {
console.log(`Hi, I'm ${this.name}.`);
}
};
person.greet(); // Hi, I'm Charlie.5.2 배열
배열은 순서가 있는 리스트입니다.
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]); // banana
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'cherry', 'orange']6. ES6 이후 주요 문법
ES6(ECMAScript 2015) 이후 추가된 다양한 문법을 통해 JavaScript 코드를 더 효율적이고 간결하게 작성할 수 있습니다.
6.1 let과 const
변수 선언 방식이 개선되었습니다.
let x = 10; // 변경 가능
const y = 20; // 변경 불가능6.2 템플릿 리터럴
백틱(``)을 사용하여 문자열 템플릿을 쉽게 작성할 수 있습니다.
const name = "Alice";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // 안녕하세요, Alice님!6.3 나머지 매개변수와 스프레드 연산자
나머지 매개변수는 변수를 배열로 받을 수 있게 해주고, 스프레드 연산자는 배열을 쉽게 복사하고 확장할 수 있습니다.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]6.4 화살표 함수와 this
화살표 함수는 상위 스코프의 this를 사용합니다.
const obj = {
name: "Alice",
showThis: () => {
console.log(this.name);
}
};
obj.showThis(); // undefinedJavaScript는 웹 개발을 위한 필수 도구이며, 다양한 기능과 유연성을 제공합니다. 이 기초적인 개념을 바탕으로 더 깊이 있는 JavaScript 학습을 진행할 수 있습니다.
