요즘 든 궁금증을Javascript를 햝아보자! 자바스크립트 기본 요소 핸드북
이 글은 자바스크립트의 핵심 개념들을 깊이 있게 탐구하고 설명합니다. 변수부터 시작하여 데이터 타입, 배열, 객체, 연산자, 제어 구조, 함수, 이벤트 등 다양한 주제를 다룹니다. 이 글을 통해 독자들은 자바스크립트의 기본적인 구조와 동작 방식을 더 잘 이해할 수 있게 될 것입니다.
변수
변수는 데이터 값을 저장하기 위한 컨테이너입니다. 자바스크립트에는 var, let, const 세 가지 유형의 변수가 있습니다.
let x = 5; // x는 5입니다
const pi = 3.14; // pi는 상수 3.14입니다
데이터 타입
자바스크립트에는 Number, String, Boolean, Object, Function, Null, Undefined 등 여러 데이터 타입이 있습니다.
let num = 123; // Number - 정수
let floatNum = 123.456; // Number - 실수
let string = "Hello"; // String
let isTrue = true; //Boolean - 참
let isFalse = false; //Boolean - 거짓
let obj = { //Object - 객체데이터, 여러 가지 값과 속성을 가질 수 있는 복합 데이터 타입
name: "John",
age: 30,
city: "New York"
};
let nothing = null; //Null - 어떤 값도 없음을 나타내는 특별한 값입니다.
let notDefined; //Undefined - 값이 할당되지 않은 변수의 기본 값입니다.
//Symbol - 고유하고 변경 불가능한 데이터 타입으로 주로 객체 속성의 키로 사용
let sym = Symbol("symbol description");
//BigInt - Number 타입으로 표현할 수 있는 범위를 넘어서는 정수를 다룰 때 사용합니다.
let bigInt = 1234567890123456789012345678901234567890n;
배열
배열은 단일 변수에서 여러 값을 저장하는 데 사용됩니다.
let fruits = ["apple", "banana", "cherry"]
객체
객체도 변수입니다. 그러나 객체는 여러 값을 포함할 수 있습니다.
let car = {type: "Fiat", model: "500", color: "white"};
연산자
자바스크립트에는 산술 연산자, 비교 연산자, 비트 연산자, 논리 연산자, 할당 연산자 등이 포함되어 있습니다.
let x = 5;
let y = x + 2; // y는 이제 7입니다
제어 구조
제어 구조는 프로그램의 흐름을 처리하는 데 도움을 줍니다. 이에는 if, else, switch, for, while, do-while 등이 포함됩니다.
if (x > y) {
// 무언가를 수행합니다
} else {
// 다른 무언가를 수행합니다
}
함수
함수는 나중에 호출하거나 이벤트에 응답하여 정의할 수 있는 코드 블록입니다.
function myFunction(x, y) {
return x * y;
}
이벤트
자바스크립트의 HTML과의 상호 작용은 사용자나 브라우저가 페이지를 조작할 때 발생하는 이벤트를 통해 처리됩니다.
<button onclick="myFunction()">Click me</button>
문자열과 문자열 메소드
문자열은 텍스트 형식으로 표현할 수 있는 데이터를 보유하는 데 유용합니다. 문자열과 함께 사용할 수 있는 여러 메소드가 있습니다. 이에는 length, index0f, search, replace 등이 포함됩니다.
let txt = "Hello World!";
let x = txt.length; // x는 이제 12입니다
숫자와 숫자 메소드
자바스크립트에는 숫자 유형이 하나만 있습니다. 숫자는 소수점이 있는 또는 없는 상태로 작성할 수 있습니다. 자바스크립트 숫자는 또한 지수를 나타내기 위해 +와, 그리고 e를 포함할 수 있습니다.
let x = 123e5; // x는 12300000입니다
let y = 123e-5; // y는 0.00123입니다
메소드
메소드는 객체에 속한 함수를 의미합니다. 객체 지향 프로그래밍에서, 객체는 데이터(속성)와 그 데이터를 조작하는 방법(메소드)를 함께 묶은 것입니다.
메소드는 객체의 속성으로 저장되는 함수입니다. 이 메소드는 객체의 속성을 조작하거나, 객체의 상태를 활용하여 특정 작업을 수행할 수 있습니다.
자바스크립트에서는 다음과 같이 메소드를 정의하고 호출할 수 있습니다:
let obj = {
name: "John",
sayHello: function() {
console.log("Hello, " + this.name);
}
};
obj.sayHello(); // "Hello, John"을 출력합니다.
위의 예시에서 **sayHello**는 obj 객체의 메소드입니다. **this.name**에서 **this**는 메소드가 속한 객체를 참조합니다. 따라서 **this.name**은 **obj.name**을 참조하게 됩니다.
메소드는 객체의 내부 상태를 읽고, 변경하고, 그 상태를 바탕으로 어떤 계산을 수행하는 등의 작업을 할 수 있습니다. 이런 방식으로 메소드는 객체의 동작을 정의하고, 객체의 데이터를 안전하게 캡슐화하고 조작하는 데 사용됩니다.
날짜
자바스크립트 Date 객체는 플랫폼에 독립적인 형식으로 단일 시점을 나타냅니다. Date 객체는 Unix Epoch 이후에 경과한 밀리초를 나타내는 Number를 포함합니다.
let d = new Date();
자바스크립트 수학
자바스크립트 Math는 수학 상수와 함수에 대한 속성과 메소드를 가진 내장 객체입니다.
console.log(Math.PI); // 3.141592653589793
console.log(Math.sqrt(16)); // 4
불리언 논리
불리언은 두 가지 값, 즉 true 또는 false를 반환하는 데이터 유형입니다.
let isCodingFun = true;
let isFishTasty = false;
오류 처리 (try/catch/finally)
자바스크립트는 try, catch, finally 블록을 통해 예외 처리를 허용합니다. try에는 실행할 코드가 포함되어 있고, catch는 모든 오류를 잡아내며, finally는 오류가 발생하든 안 하든 코드를 실행합니다.
try {
notAFunction();
} catch(err) {
console.log(err); // ReferenceError: notAFunction is not defined
} finally {
console.log('This will run regardless of the try/catch result');
}
정규 표현식
정규 표현식은 문자 패턴을 설명하는 객체입니다.
let patt = new RegExp("e");
let res = patt.test("The best things in life are free!");
JSON
JSON (JavaScript Object Notation)은 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기 쉬운 경량 데이터 교환 형식입니다.
let text = '{"name":"John", "birth":"1986-12-14", "city": "New York"}';
let obj = JSON.parse(text);
AJAX
AJAX는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트하는 것에 관한 것입니다. Asynchronous JavaScript and XML의 약자입니다.
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 문서가 준비되었을 때 수행되는 전형적인 작업 document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true); xhttp.send();
프로미스
프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.
let promise = new Promise(function(resolve, reject) {
// 무언가를 수행하고, 아마도 비동기적으로, 그리고 나서...
if (/* 모든 것이 잘 됐다면 */) {
resolve("Stuff worked!");
} else {
reject (Error("It broke"));
}
});
Async/Await
async와 await는 프로미스를 더 쉽게 작성할 수 있게 합니다.
async function example() {
let response = await fetch('https://api.github.com/users/github');
let user= await response.json();
return user;
}
클로저
클로저는 함수와 그 주변 상태(렉시컬 환경)에 대한 참조가 함께 묶인(포함된) 것입니다.
function makeAdder (x) {
return function (y) {
return x + y;
};
}
let add5 = makeAdder (5);
let add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
화살표 함수
화살표 함수는 함수를 작성할 때 더 짧은 구문을 허용합니다. 화살표 함수는 자체 this를 가지고 있지 않습니다.
const square = x => x * x;
템플릿 리터럴
템플릿 리터럴은 변수와 표현식을 문자열에 쉽게 삽입할 수 있게 해줍니다.
let name="John";
console.log(`Hello, ${name}!`); // "Hello, John!"
스프레드 연산자와 나머지 매개변수
스프레드 연산자는 0개 이상의 인수가 예상되는 곳에서 이터러블을 확장할 수 있게 해줍니다. 나머지 매개변수 구문은 함수가 배열로서 무한정의 인수를 받아들일 수 있게 해줍니다.
// 스프레드 연산자
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
// 나머지 매개변수
function sum(... theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}