* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.
* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.
1. JavaScript 기초 2
Flow control흐름 제어
-
명령형 프로그램의 개별 명령문, 명령 혹은 함수 호출이 실행되거나 평가되는 순서.
-
코드가 특정 조건에 따라 실행되거나 반복적으로 실행되도록 제어하는 기능.
-
goto, choice(if, switch 등..), loop, continue, break 등이 존재.
-
goto는 개발 설계 오류를 야기할 수 있어 사용을 권장하지 않음.
조건문, Loop
-
조건문은 특정 조건에 따라 코드를 실행.
-
반복문은 특정 조건이 충족될 때까지 코드를 반복 실행.
// 조건문 예시
const age = 20;
age >= 18 ? console.log('성인이다.') : console.log('미성년자이다.');
// 반복문 예시
for (let i = 0; i < 5; i++) {
console.log(`현재 i 값: ${i}`);
}Loop Early Exit
-
break: 반복문을 즉시 종료한다.
-
continue: 현재 반복을 건너뛰고 다음 반복으로 진행한다.
for (let i = 0; i < 5; i++) {
if (i === 3) break; // i가 3이면 반복 종료
if (i === 2) continue; // i가 2일 때 현재 반복 건너뜀
console.log(i); // 출력: 0, 1
}Conditional Loop (조건 기반 반복문)
-
while: 조건이 참인 동안 반복한다.
-
do...while: 최소 한 번 실행한 후 조건을 검사한다.
// while 예시
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
// do...while 예시
let num = 0;
do {
console.log(num);
num++;
} while (num < 3);General Loop (일반적인 반복문)
- for: 고정된 횟수를 반복할 때 주로 사용한다.
코드 복사
for (let i = 0; i < 5; i++) {
console.log(i); // 출력: 0, 1, 2, 3, 4
}Collection Loop (컬렉션 반복문)
-
for...in: 객체의 열거 가능한 속성을 반복한다.
-
for...of: 이터러블 객체(배열, 문자열 등)를 반복한다.
// for...in 예시
let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(`${key}: ${obj[key]}`); // a: 1, b: 2, c: 3
}
// for...of 예시
let arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 출력: 10, 20, 30
}표현식expression과 문statement
-
표현식 : 어떤 값으로 이행괴는 임의의 유효한 코드 단위.
-
값으로 평가될 수 있는 문들은 모두 표현식에 해당한다.
-
문 : 프로그램을 구성하는 기본 단위 / 최소 실행 단위
-
선언문, 할당문, 제어문, 반복문, 블럭문 등등..
Break, Continue
-
break는 반복문을 즉시 종료. -
함수 내부에서 if 문과 혼합하여, 함수를 그 자리에서 정지시키는 기능도 수행한다.
-
continue는 현재 반복을 건너뛰고 다음 반복으로 진행.
for (let i = 0; i < 10; i++) {
if (i === 5) break; // i가 5일 때 반복 종료
if (i % 2 === 0) continue; // 짝수일 경우 다음 반복으로 진행
console.log(i);
}예외, Throw, Error
-
자바스크립트에서 에러를 처리하거나 명시적으로 에러를 발생시키기 위해
throw키워드를 사용. -
자세한 내용은 이전 포스팅 참조.
function divide(a, b) {
if (b === 0) {
throw new Error('0으로 나눌 수 없다.');
}
return a / b;
}
try {
console.log(divide(4, 0));
} catch (error) {
console.error(error.message);
}try-catch
-
코드 실행 중 발생하는 에러를 포착하고 처리하는 구조.
-
자세한 내용은 이전 포스팅 참조.
try {
let result = JSON.parse('invalid json');
} catch (e) {
console.error('JSON 파싱 중 에러 발생:', e.message);
}객체
-
키-값 쌍으로 데이터를 저장하는 구조.
-
자세한 내용은 이전 포스팅 참조.
얕은 복사, 깊은 복사
- 이전 포스팅 참조.
const person = {
name: '홍길동',
age: 30,
greet: function () {
console.log(`안녕하세요! 저는 ${this.name}입니다.`);
},
};
console.log(person.name); // 홍길동
person.greet();Number, Math, Date, String
- Number: 숫자를 다루는 기본형.
- Math: 수학 연산과 관련된 유틸리티를 제공.
- Date: 날짜와 시간을 다루는 객체.
- String: 문자열 조작과 관련된 메서드를 제공.
// Number
let num = 123.456;
console.log(num.toFixed(2)); // "123.46"
// Math
console.log(Math.max(10, 20, 30)); // 30
// Date
let now = new Date();
console.log(now.toISOString());
// String
let str = 'Hello, JavaScript!';
console.log(str.toUpperCase());정규표현식
-
문자열에서 특정 패턴을 찾거나 변환하는 데 사용.
-
유효성 검사 등지에서 유용하게 사용되는 문법.
-
사용 예시는 이전 포스팅 참조.
let regex = /\d+/g; // 숫자를 찾는 정규식
let str = '2023년 1월 5일';
let result = str.match(regex);
console.log(result); // ['2023', '1', '5']Collection
index Collection
- 배열과 같이 인덱스로 관리되는 컬렉션.
let arr = [10, 20, 30];
console.log(arr[1]); // 20Map/Set (Weak)
- Map: 키-값 쌍을 저장하며, 키는 모든 자료형이 가능하다.
- Set: 중복되지 않은 값을 저장한다.
let map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // value
let set = new Set([1, 2, 2, 3]);
console.log(set); // Set(3) { 1, 2, 3 }JSON
-
데이터 교환을 위한 포맷으로, JavaScript 객체와 비슷.
-
자세한 내용은 이전 포스팅 참조.
let json = JSON.stringify({ name: '홍길동', age: 30 });
console.log(json); // '{"name":"홍길동","age":30}'
let obj = JSON.parse(json);
console.log(obj.name); // 홍길동국제화
- 날짜와 숫자를 특정 국가 형식으로 변환하는 개념.
let number = 1234567.89;
console.log(number.toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' }));
// "₩1,234,567.89"프로토타입
-
객체의 상속을 구현하는 데 사용되는 개념.
-
자세한 내용은 이전 포스팅 참조.
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log(`안녕하세요, ${this.name}입니다.`);
};
let p = new Person('홍길동');
p.greet(); // 안녕하세요, 홍길동입니다.Class
-
클래스는 객체 지향 프로그래밍 언어에서 일반적으로 사용되는 기초 문법으로, 객체를 생성하기 위한 청사진(blueprint) 역할을 수행하는 개념.
-
JavaScript는 원래 프로토타입 기반 언어라서, 객체 생성을 클래스가 아니라 프로토타입으로 생성하고 상속하는 구조로 설계되었다.
(객체 생성 및 상속은 생성자 함수(constructor function)와 prototype을 통해 이루어진다.) -
그래서 원래는 클래스 개념이 없는 언어였는데.. ES6 시점에서 클래스 개념이 추가되었다.
-
다만 JavaScript는 어디까지나 프로토타입 기반 언어이기에.. JavaScript의 Class는 내부적으로는 여전히 프로토타입 기반으로 동작하되, 겉으로는 클래스 기반 객체 지향 언어처럼 동작한다.
(프로토타입 기반 상속을 활용하기 때문에, 클래스 내부에서 정의된 메서드는 객체 인스턴스에 직접 저장되지 않고 프로토타입 체인에 연결된다.)
(JavaScript 클래스는 다른 객체 지향 언어의 클래스와는 약간 다른 동작 방식으로 움직인다.) -
자세한 내용은 이전 포스팅 참조.
ES5: 생성자 함수와 프로토타입
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`안녕하세요, ${this.name}입니다.`);
};
const person1 = new Person("홍길동");
person1.greet(); // 안녕하세요, 홍길동입니다.ES6: 클래스 문법
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`안녕하세요, ${this.name}입니다.`);
}
}
const person1 = new Person("홍길동");
person1.greet(); // 안녕하세요, 홍길동입니다.This, 화살표 함수
-
this는 호출된 방식에 따라 다르게 동작. -
화살표 함수는
this를 고정. -
자세한 내용은 이전 포스팅 - THIS 참조.
-
자세한 내용은 이전 포스팅 - 화살표 함수 참조.
function normalFunction() {
console.log(this);
}
const arrowFunction = () => {
console.log(this);
};
normalFunction(); // 전역 객체
arrowFunction(); // 현재 스코프의 this스코프(Scope)
let a = 10; // 전역 스코프
function scopeExample() {
let b = 20; // 함수 스코프
console.log(a + b);
}
scopeExample();실행 컨텍스트
-
실행 컨텍스트는 코드가 실행될 환경과 관련된 정보를 담고 있다.
-
자세한 내용은 이전 포스팅 참조.
function outer() {
let outerVar = '외부 변수';
function inner() {
console.log(outerVar); // 실행 컨텍스트에 의해 outerVar 접근 가능
}
inner();
}
outer();클로저
-
클로저는 함수가 선언될 때의 스코프를 기억하는 특징을 지닌다.
-
자세한 내용은 이전 포스팅 참조.
function makeCounter() {
let count = 0;
return function () {
count++;
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2