[Web] JavaScript의 기본 개념 정리
카테고리: Web Development
1. ✨ JavaScript
웹페이지의 동작을 제어하는 언어
JavaScript의 활용 방법
- 브라우저에서 활용
- HTML(골격), CSS(디자인), JavaScript(동작)
- React, Vue 등의 프레임워크를 활용
- Node 환경에서 활용
- 파일 입출력, 네트워크 통신, DB 연동, 백엔드 서비스
- Express, Nest 등의 프레임워크 활용
JavaScript 엔진
- JavaScript 코드를 해석하고 실행하는 프로그램
- V8 엔진은 Chrome, Node.js에서 사용
- 최신 버전의 V8 엔진은 JavaScript와 WebAssembly를 지원
2. 🚀 JavaScript 실행 환경
브라우저
주로 사용하는 웹 브라우저(Chrome, Firefox, Safari, Edge)에서 F12 또는 오른쪽 마우스 클릭 후 검사 클릭하면 개발자 도구를 사용할 수 있다.
- 개발자 도구의 Console 탭에서 작성한 JavaScript 코드를 실시간으로 실행할 수 있다.
Node
브라우저 외의 환경에서 JavaScript를 실행할 수 있는 환경이며, node를 설치해야 한다.
node 설치(Ubuntu)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs
node --version
npm --version
3. 📜 JavaScript 코드 작성 규칙
기본 규칙
- 대소문자 구분
- 중괄호를 사용하여 블록 구분
- 문장의 끝에 세미콜론(;) 사용
- 한줄 주석은
//사용 - 여러줄 주석은
/* */사용
변수
현대 JavaScript에서는
var대신let과const를 사용한다.
| 키워드 | 설명 | 재선언 가능 | 재할당 가능 | 스코프 |
|---|---|---|---|---|
| var | 함수 스코프 또는 전역 스코프를 가진다. | 가능 | 가능 | 함수 스코프 |
| let | 블록 스코프를 가진다. | 불가능 | 가능 | 블록 스코프 |
| const | 블록 스코프를 가지며, 상수로 사용된다. | 불가능 | 불가능 | 블록 스코프 |
var는 함수 내에서만 유효하며, 전역에서 선언하면 전역에서 접근 가능하다.let과const는 블록 내에서만 유효하며, 블록을 벗어나면 접근할 수 없다.const는 선언 시 반드시 초기화해야 하며, 이후 값을 변경할 수 없다.
변수 호이스팅
변수 선언이 함수 또는 블록의 맨 위로 옮겨지는 것처럼 동작하는 현상. ‘John’으로 초기화된 변수 name을 선언하기 전에 출력하면 undefined가 출력된다.
- ‘var’ 키워드로 선언된 변수는 호이스팅되어 선언 전에 사용할 수 있다.
- ‘let’과 ‘const’ 키워드로 선언된 변수는 호이스팅되지 않는다.
- 선언 전에 사용하면 참조 에러(ReferenceError)가 발생한다.
console.log(name); // undefined
var name = 'John';
변수 네이밍 규칙
- 변수 이름은 영문자, 숫자, 언더바(_), 달러 기호($)로 구성될 수 있다.
- 변수 이름은 숫자로 시작할 수 없다.
- 예약어는 사용할 수 없다.
- 대소문자를 구분한다.
- 네이밍 컨벤션
- 카멜 케이스(권장): 첫 단어는 소문자, 이후 단어는 대문자로 시작
- 스네이크 케이스: 모든 단어를 소문자로 연결하고 단어 사이에 언더바(_) 사용
- 파스칼 케이스: 모든 단어를 대문자로 시작하고 단어 사이에 언더바(_) 사용
데이터 타입
데이터 타입은 변수에 저장되는 값의 타입을 의미한다.
원시 타입
| 타입 | 설명 | 예시 |
|---|---|---|
| number | 숫자 값을 나타내며, 정수와 부동 소수점 모두 포함 | let age = 30;let price = 19.99; |
| string | 문자들의 집합으로, 텍스트 데이터를 나타냄 | let name = "Alice";let greeting = 'Hello, World!'; |
| boolean | 참(true) 또는 거짓(false) 값을 나타냄 | let isActive = true;let isLoggedIn = false; |
| undefined | 값이 할당되지 않은 상태를 나타냄 | let x;console.log(x); // undefined |
| null | 의도적으로 “값이 없음”을 나타내는 타입 | let y = null;console.log(y); // null |
| symbol | 고유하고 변경 불가능한 값으로, 주로 객체의 프로퍼티 키로 사용 | let sym = Symbol('description');let obj = { [sym]: 'value' }; |
참조 타입
| 타입 | 설명 | 예시 |
|---|---|---|
| 객체(Object) | 키-값 쌍으로 데이터를 저장하는 구조 | let person = { name: "Alice", age: 30 }; |
| 배열(Array) | 순서가 있는 데이터의 집합으로, 객체의 특별한 형태 | let fruits = ["apple", "banana", "cherry"]; |
| 함수(Function) | 실행 가능한 코드 블록으로, 객체로 취급됨 | function greet() { return "Hello!"; }let add = function(a, b) { return a + b; }; |
| 날짜(Date) | 날짜와 시간을 다루기 위한 객체 | let now = new Date();let birthday = new Date('1990-01-01'); |
| 정규 표현식(RegExp) | 문자열 검색 및 패턴 매칭을 위한 객체 | let regex = /ab+c/;let testString = "abc"; |
데이터 타입과 연산
number
console.log(typeof 1); // number
console.log(typeof 1.0); // number
console.log(1.0); // 1
console.log(1 == 1.0); // true
console.log(1 === 1.0); // false
string
console.log(typeof "Hello"); // string
// 문자열 연결
console.log("Hello" + "World"); // HelloWorld
// 템플릿 리터럴
var name = "John";
console.log(`Hello ${name}`); // Hello John
boolean
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(true); // true
console.log(false); // false
undefined vs null
undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타낸다.null은 의도적으로 “값이 없음”을 나타내는 타입이다.
let x;
console.log(typeof x); // undefined
let y = null;
console.log(typeof y); // object
symbol
- 고유하고 변경 불가능한 값으로, 주로 객체의 프로퍼티 키로 사용된다.
let sym = Symbol("description");
console.log(typeof sym); // symbol
object
- 키-값 쌍으로 데이터를 저장하는 구조
let person = {
name: "John",
age: 30,
};
console.log(typeof person); // object
console.log(person); // { name: 'John', age: 30 }
console.log(person.name); // John
console.log(person.age); // 30
- 함수도 프로퍼티가 될 수 있다.
let person = {
name: "John",
age: 30,
greet: function() {
return "Hello, " + this.name + "!";
},
nextAge: function() {
return this.age + 1;
},
};
console.log(person.greet()); // Hello, John!
person.nextAge();
console.log(person.age); // 31
- 프로퍼티는 추가 및 삭제할 수 있다.
let person = {
name: "John",
age: 30,
};
person.gender = "male";
delete person.age;
console.log(person); // { name: 'John', gender: 'male' }