JavaScript란 무엇인가?
JavaScript는 웹 페이지에 동적 기능을 추가하기 위해 만들어진 프로그래밍 언어야. JavaScript를 사용하면 웹 페이지에서 버튼을 클릭했을 때 반응하는 기능, 입력한 데이터의 유효성 검증, 또는 애니메이션을 구현할 수 있어.
JavaScript는 브라우저 내에서 실행되며, HTML과 CSS와 상호작용하면서 사용자 경험을 크게 향상시켜 줘. 예를 들어, 사용자가 클릭했을 때 이미지가 바뀌거나, 특정 조건에 따라 경고 창이 뜨는 기능들을 만들어주는 거지.
1. JavaScript의 기본 개념
1.1 변수와 데이터 타입
JavaScript에서 변수는 데이터를 저장하는 공간이야. 변수를 선언하고 데이터를 저장하면, 나중에 그 변수를 사용해 데이터를 꺼내 쓸 수 있어. JavaScript에는 몇 가지 변수를 선언하는 방법이 있어:
• var: 예전부터 쓰인 변수 선언 방식이야. 블록 범위가 아니라 함수 범위로 제한되기 때문에 요즘에는 잘 사용하지 않아.
var name = "홍길동";
• let: var의 단점을 보완한 변수 선언 방식이야. 블록 범위 내에서 유효하고, 재할당이 가능해.
let age = 25;
age = 26; // 가능
• const: 값을 변경할 수 없는 상수를 선언할 때 사용해. 한 번 값을 지정하면 변경이 불가능해.
const birthYear = 1995;
// birthYear = 1996; // 오류 발생
변수에 저장되는 데이터는 다양한 데이터 타입을 가질 수 있어:
• 문자열(String): 텍스트 데이터를 나타내며, 큰따옴표(" ")나 작은따옴표(' ')로 감싸줘.
let greeting = "안녕하세요!";
• 숫자(Number): 정수나 실수를 나타내는 데이터 타입이야.
let score = 95;
let pi = 3.14;
• 불리언(Boolean): true 또는 false 값을 가지는 데이터 타입이야. 논리적인 참, 거짓을 표현할 때 사용해.
let isActive = true;
• null과 undefined: null은 의도적으로 값이 없음을 나타내고, undefined는 변수가 선언됐지만 값이 지정되지 않은 상태를 의미해.
let value = null;
let notAssigned; // undefined
1.2 연산자
JavaScript에서 연산자는 값을 계산하거나 비교하는 역할을 해. 대표적인 연산자는 다음과 같아:
• 산술 연산자: 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%)
let a = 10;
let b = 3;
let sum = a + b; // 13
let remainder = a % b; // 1
• 비교 연산자: 값들을 비교하고 불리언 값을 반환해 (true 또는 false).
• ==: 값이 같은지 비교 (형 변환이 일어날 수 있음)
• ===: 값과 자료형이 모두 같은지 비교 (엄격한 비교)
• <, >, <=, >=: 크기 비교
console.log(10 == "10"); // true (형 변환이 일어남)
console.log(10 === "10"); // false (자료형이 다름)
• 논리 연산자: 여러 조건을 결합해 논리적인 연산을 할 때 사용해.
• &&: AND 연산 (모두 참일 때 참)
• ||: OR 연산 (하나라도 참이면 참)
• !: NOT 연산 (참을 거짓으로, 거짓을 참으로)
let isAdult = true;
let hasID = false;
console.log(isAdult && hasID); // false
console.log(isAdult || hasID); // true
2. 조건문과 반복문
2.1 조건문
조건문은 특정 조건을 만족할 때만 코드를 실행하게 해줘. JavaScript에서는 **if, else if, else**를 사용해 조건문을 작성해.
let score = 85;
if (score >= 90) {
console.log("A 등급");
} else if (score >= 80) {
console.log("B 등급");
} else {
console.log("C 등급 이하");
}
위 코드에서는 score 값에 따라 서로 다른 결과를 출력하게 돼.
2.2 반복문
반복문은 특정 조건이 만족될 때까지 같은 코드를 반복해서 실행할 때 사용해. JavaScript에는 for, while 같은 반복문이 있어.
• for 반복문: 주어진 횟수만큼 반복할 때 사용해.
for (let i = 0; i < 5; i++) {
console.log("안녕하세요!"); // "안녕하세요!"가 5번 출력됨
}
• while 반복문: 조건이 참일 때까지 계속 반복해.
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
// 출력: 0, 1, 2
3. 함수
함수는 특정 작업을 수행하는 코드 블록이야. 여러 번 반복해서 사용할 수 있도록 정의된 코드를 묶어둔 거지.
3.1 함수 선언과 호출
JavaScript에서 함수를 선언하는 방법은 다음과 같아:
function sayHello() {
console.log("안녕하세요!");
}
함수를 호출하려면 함수 이름 뒤에 괄호를 붙이면 돼:
sayHello(); // "안녕하세요!" 출력
3.2 매개변수와 반환값
함수는 매개변수를 받아서, 그 값을 사용해 작업을 수행할 수 있어. 또한, 함수는 결과를 **반환(return)**할 수도 있어.
function add(a, b) {
return a + b;
}
let result = add(3, 5); // 8
여기서 add 함수는 두 개의 매개변수 a와 b를 받아서 그 합을 반환해. return 키워드는 함수의 결과를 호출한 곳으로 돌려주는 역할을 하지.
3.3 화살표 함수 (Arrow Function)
화살표 함수는 ES6에서 도입된 함수 표현 방식으로, 더 간결하게 함수를 작성할 수 있게 해줘.
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20
이렇게 => 기호를 사용해서 함수를 작성하면 코드가 더 간단해져. 특히 짧은 함수일 때 가독성이 좋아.
4. 객체와 배열
4.1 객체
**객체(Object)**는 여러 속성(프로퍼티)을 한데 묶어서 저장할 수 있는 데이터 타입이야. 속성은 키-값 쌍으로 저장돼.
let person = {
name: "홍길동",
age: 30,
greet: function() {
console.log("안녕하세요, " + this.name + "입니다.");
}
};
console.log(person.name); // "홍길동"
person.greet(); // "안녕하세요, 홍길동입니다."
여기서 person 객체는 name, age, greet이라는 속성을 가지고 있어. 속성에 접근할 때는 점(.)을 사용해.
4.2 배열
**배열(Array)**은 여러 개의 값을 순서대로 저장하는 데이터 타입이야. 배열의 각 요소는 인덱스를 통해 접근할 수 있어.
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
배열에 새로운 요소를 추가하거나 삭제할 수 있는 다양한 메서드들이 있어:
• push(): 배열의 끝에 새로운 요소를 추가해.
fruits.push("포도");
console.log(fruits); // ["사과", "바나나", "오렌지", "포도"]
• pop(): 배열의 마지막 요소를 제거해.
fruits.pop();
console.log(fruits); // ["사과", "바나나", "오렌지"]
• shift(): 배열의 첫 번째 요소를 제거해.
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]
• unshift(): 배열의 맨 앞에 새로운 요소를 추가해.
fruits.unshift("딸기");
console.log(fruits); // ["딸기", "바나나", "오렌지"]
4.3 배열 반복
배열의 각 요소에 접근하려면 반복문을 사용할 수 있어. 가장 일반적으로 사용하는 반복문은 for와 forEach()야.
• for 반복문을 사용해 배열의 모든 요소를 출력하기:
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
• forEach() 메서드를 사용해 배열의 각 요소를 출력하기:
fruits.forEach(function(fruit) {
console.log(fruit);
});
이렇게 하면 배열의 모든 요소를 순서대로 출력할 수 있어.
5. DOM 조작
JavaScript의 강력한 기능 중 하나는 **DOM(Document Object Model)**을 조작할 수 있다는 거야. DOM은 HTML 문서를 객체처럼 다룰 수 있게 해주기 때문에, JavaScript로 페이지의 내용을 동적으로 변경할 수 있어.
5.1 DOM 요소 선택
HTML 요소를 선택해서 조작하려면, JavaScript에서 제공하는 다양한 메서드를 사용할 수 있어.
• getElementById(): 특정 id를 가진 요소를 선택해.
<div id="header">헤더입니다.</div>let header = document.getElementById("header");
console.log(header.textContent); // "헤더입니다."
• querySelector()와 querySelectorAll(): CSS 선택자를 사용해서 요소를 선택할 수 있어. querySelector()는 첫 번째 일치하는 요소를, querySelectorAll()은 모든 일치하는 요소를 선택해.
<p class="text">첫 번째 단락</p>
<p class="text">두 번째 단락</p>let paragraph = document.querySelector(".text");
let allParagraphs = document.querySelectorAll(".text");
console.log(paragraph.textContent); // "첫 번째 단락"
console.log(allParagraphs.length); // 2
5.2 DOM 요소 조작
선택한 요소의 내용을 변경하거나 스타일을 적용하는 등의 작업을 할 수 있어.
• 내용 변경: textContent 또는 innerHTML을 사용해 요소의 내용을 변경할 수 있어.
header.textContent = "새로운 헤더입니다.";
• 스타일 변경: style 속성을 사용해 인라인 스타일을 변경할 수 있어.
header.style.color = "blue";
header.style.fontSize = "2em";
• 클래스 추가/제거: classList 객체를 사용하면 요소에 클래스를 쉽게 추가하거나 제거할 수 있어.
header.classList.add("highlight");
header.classList.remove("highlight");
5.3 이벤트 처리
JavaScript를 사용하면 사용자 **이벤트(클릭, 입력 등)**에 반응하는 동작을 만들 수 있어. 이벤트 처리를 통해 페이지를 더욱 동적으로 만들 수 있는 거야.
• addEventListener(): 요소에 이벤트 리스너를 추가해서, 특정 이벤트가 발생했을 때 지정한 함수가 실행되도록 할 수 있어.
<button id="myButton">클릭하세요!</button>let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
이 코드에서는 버튼을 클릭하면 경고 창이 뜨도록 설정했어.
6. 객체지향 프로그래밍 (OOP)
JavaScript는 **객체지향 프로그래밍(OOP)**을 지원해. 객체지향 프로그래밍을 통해 코드를 더 재사용 가능하고 유지보수하기 쉽게 만들 수 있어.
6.1 클래스와 객체
클래스는 객체를 만들기 위한 청사진이야. JavaScript에서는 클래스를 정의하고 이를 통해 객체를 만들 수 있어.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`);
}
}
let person1 = new Person("홍길동", 25);
person1.greet(); // "안녕하세요, 저는 홍길동이고, 25살입니다."
• constructor(): 객체를 초기화하는 메서드야. 객체를 생성할 때 name과 age를 받아서 속성을 설정하지.
• 메서드: 클래스 안에 정의된 함수로, 객체의 동작을 정의해.
6.2 상속
상속은 한 클래스가 다른 클래스를 기반으로 새로운 기능을 추가하는 개념이야. JavaScript에서는 extends 키워드를 사용해서 상속을 구현해.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name}가 소리를 냅니다.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name}가 멍멍 짖습니다.`);
}
}
let myDog = new Dog("바둑이");
myDog.speak(); // "바둑이가 멍멍 짖습니다."
여기서 Dog 클래스는 Animal 클래스를 상속받고, speak() 메서드를 오버라이딩(재정의) 했어.
7. 비동기 JavaScript
JavaScript는 비동기 작업을 처리하는 방법도 제공해. 비동기 작업이란, 코드가 멈추지 않고 다른 작업을 동시에 진행할 수 있는 작업을 의미해. 주로 서버에서 데이터를 가져오거나 파일을 읽을 때 사용돼.
7.1 콜백 함수
콜백 함수는 어떤 작업이 끝난 후에 호출되는 함수야. 비동기 작업이 완료된 후 다음 작업을 실행하기 위해 사용해.
function fetchData(callback) {
setTimeout(function() {
console.log("데이터를 가져왔습니다.");
callback();
}, 2000);
}
fetchData(function() {
console.log("다음 작업을 실행합니다.");
});
이 코드는 데이터를 가져오는 작업이 2초 뒤에 완료되면, 그 후에 콜백 함수를 호출해서 다음 작업을 실행하는 방식이야.
7.2 프로미스 (Promise)
**프로미스(Promise)**는 비동기 작업의 완료 또는 실패를 나타내는 객체야. resolve와 reject를 통해 작업이 성공했는지 실패했는지를 처리할 수 있어.
let myPromise = new Promise(function(resolve, reject) {
let success = true;
if (success) {
resolve("작업이 성공했습니다!");
} else {
reject("작업이 실패했습니다.");
}
});
myPromise
.then(function(message) {
console.log(message);
})
.catch(function(error) {
console.error(error);
});
여기서는 resolve가 호출되면 then()이 실행되고, reject가 호출되면 catch()가 실행돼.
7.3 async와 await
**async와 await**는 비동기 작업을 더욱 간결하게 작성할 수 있게 도와주는 최신 문법이야. await 키워드는 프로미스가 처리될 때까지 기다렸다가 그 결과를 반환해 줘. 이로 인해 코드가 마치 동기적으로 실행되는 것처럼 작성할 수 있어, 가독성이 좋아지지.
async function fetchData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('에러가 발생했습니다:', error);
}
}
fetchData();
• async: 함수 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환해.
• await: await 키워드는 프로미스가 해결될 때까지 기다린 후 값을 반환해. 이때 함수는 비동기로 실행되므로 코드가 중단되지 않고 계속 실행돼.
8. JavaScript의 스코프와 클로저
8.1 스코프(Scope)
스코프는 변수나 함수가 접근할 수 있는 유효 범위를 의미해. JavaScript에는 주로 전역 스코프와 지역 스코프가 있어.
• 전역 스코프(Global Scope): 모든 곳에서 접근 가능한 범위야. var 키워드로 선언된 변수는 함수 내에서 사용되지 않는 한, 전역 스코프에 위치해.
var globalVar = "이건 전역 변수입니다.";
function showVar() {
console.log(globalVar);
}
showVar(); // "이건 전역 변수입니다."
• 지역 스코프(Local Scope): 함수나 블록 내에서만 접근할 수 있는 범위야. let과 const로 선언된 변수는 해당 블록이나 함수 내부에서만 접근할 수 있어.
function localScope() {
let localVar = "이건 지역 변수입니다.";
console.log(localVar);
}
localScope(); // "이건 지역 변수입니다."
// console.log(localVar); // 오류: localVar는 함수 밖에서 접근할 수 없음
8.2 클로저(Closure)
클로저는 함수와 함수가 선언된 어휘적 환경을 함께 기억하는 것을 의미해. 클로저를 사용하면 함수가 선언될 당시의 스코프를 유지하면서, 외부 함수의 변수에 접근할 수 있어.
function outerFunction() {
let outerVar = "나는 외부 변수입니다.";
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
let myFunction = outerFunction();
myFunction(); // "나는 외부 변수입니다."
여기서 innerFunction은 outerFunction의 outerVar에 접근할 수 있어. 이게 바로 클로저의 개념이야. 클로저는 캡슐화와 데이터 은닉에 유용하게 사용돼.
9. JavaScript와 브라우저 API
JavaScript는 다양한 브라우저 API와 상호작용하면서 브라우저에서 여러 가지 작업을 수행할 수 있어.
9.1 타이머 함수
• setTimeout(): 지정한 시간 후에 함수를 실행해.
setTimeout(function() {
console.log("3초 후에 실행됩니다.");
}, 3000); // 3초(3000밀리초) 후 실행
• setInterval(): 지정한 시간 간격마다 함수를 반복 실행해.
let count = 0;
let intervalId = setInterval(function() {
count++;
console.log("반복 실행:", count);
if (count === 5) {
clearInterval(intervalId); // 5번 실행 후 반복 중지
}
}, 1000); // 1초(1000밀리초) 간격으로 실행
9.2 웹 스토리지 (Web Storage)
웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 기능을 제공해. **localStorage**와 **sessionStorage**가 있어.
• localStorage: 데이터를 영구적으로 저장해. 브라우저를 닫아도 데이터가 유지돼.
localStorage.setItem("username", "홍길동");
let user = localStorage.getItem("username");
console.log(user); // "홍길동"
• sessionStorage: 데이터를 세션 단위로 저장해. 브라우저를 닫으면 데이터가 사라져.
sessionStorage.setItem("isLoggedIn", "true");
let status = sessionStorage.getItem("isLoggedIn");
console.log(status); // "true"
9.3 Geolocation API
Geolocation API를 사용하면 사용자 장치의 위치 정보를 가져올 수 있어. 지도 애플리케이션 등에서 유용하게 사용되지.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log("위도:", position.coords.latitude);
console.log("경도:", position.coords.longitude);
});
} else {
console.log("Geolocation을 지원하지 않는 브라우저입니다.");
}
10. JavaScript의 최신 기능 (ES6 이후)
JavaScript는 계속해서 발전하고 있고, 새로운 기능들이 추가돼. 그중에서도 자주 사용하는 최신 기능들을 소개할게.
10.1 템플릿 리터럴 (Template Literal)
템플릿 리터럴은 문자열을 더 간단하고 가독성 좋게 작성할 수 있는 방법이야. **백틱(```)**을 사용하고, **${}**로 변수를 삽입할 수 있어.
let name = "홍길동";
let greeting = `안녕하세요, ${name}님! 반갑습니다.`;
console.log(greeting); // "안녕하세요, 홍길동님! 반갑습니다."
10.2 디스트럭처링 (Destructuring)
디스트럭처링을 사용하면 배열이나 객체에서 값을 쉽게 추출할 수 있어.
• 배열 디스트럭처링:
let numbers = [1, 2, 3];
let [one, two, three] = numbers;
console.log(one, two, three); // 1 2 3
• 객체 디스트럭처링:
let person = {
name: "홍길동",
age: 30
};
let { name, age } = person;
console.log(name, age); // "홍길동", 30
10.3 스프레드 연산자 (Spread Operator)
스프레드 연산자(...)는 배열이나 객체를 확장하는 데 사용돼.
• 배열 복사 및 병합:
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
• 객체 확장:
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
