본문 바로가기
반응형

javascript107

[JavaScript 문법] 25일차: async/await async/await란?async와 await는 JavaScript에서 비동기 작업을 보다 간편하고 직관적으로 작성할 수 있도록 도와주는 구문입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 기다립니다.async 함수async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환합니다. 함수 내부에서 return한 값은 자동으로 Promise.resolve로 감싸집니다.예제async function fetchData() { return 'Fetched Data';}fetchData().then((data) => { console.log(data); // 'Fetched Data'});await 표현식await 키워드는 async 함수 내부에서만 .. 2024. 8. 25.
[JavaScript 문법] 24일차: 프로미스 고급 프로미스 체이닝프로미스 체이닝(Promise Chaining)은 여러 프로미스를 순차적으로 실행하는 방법입니다. 각 then 메서드는 항상 새로운 프로미스를 반환하므로, 여러 then 메서드를 연결하여 사용할 수 있습니다. 이를 통해 비동기 작업을 순차적으로 처리할 수 있습니다.예제let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('1단계 완료'); }, 1000);});promise .then((message) => { console.log(message); // '1단계 완료' (1초 후 출력) return '2단계 완료'; }) .then((message) => { console.lo.. 2024. 8. 24.
[JavaScript 문법] 22일차: 콜백 함수 콜백 함수란?콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다. 비동기 작업을 처리하거나, 특정 이벤트가 발생할 때 실행되는 코드를 정의하는 데 유용합니다.콜백 함수의 기본 개념콜백 함수는 특정 작업이 완료되었을 때 호출되는 함수입니다. JavaScript에서는 주로 비동기 작업에서 콜백 함수를 사용합니다.예제: 콜백 함수 사용function fetchData(callback) { setTimeout(() => { let data = 'Fetched Data'; callback(data); }, 1000);}function displayData(data) { console.log(data);}fetchData(displayData); /.. 2024. 8. 22.
[JavaScript 문법] 21일차: 디자인 패턴 심화 옵저버 패턴옵저버 패턴(Observer Pattern)은 객체의 상태 변화를 관찰하는 옵저버들이 그 변화를 감지하고, 필요에 따라 행동하는 패턴입니다. 주로 이벤트 핸들링 시스템에서 많이 사용됩니다.예제class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } notifyObservers(message) { this.observers.forEach(observer =.. 2024. 8. 21.
[JavaScript 문법] 18일차: 객체 지향 프로그래밍 객체 지향 프로그래밍이란?객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 데이터를 객체라는 단위로 묶어 프로그래밍하는 패러다임입니다. OOP의 핵심 개념은 캡슐화, 상속, 다형성, 추상화입니다. 객체 지향 프로그래밍을 사용하면 코드의 재사용성, 유지보수성, 가독성을 높일 수 있습니다.캡슐화캡슐화(Encapsulation)는 객체의 데이터를 외부로부터 보호하고, 객체의 내부 상태를 외부에서 직접 접근하지 못하도록 하는 것입니다. 이를 통해 데이터의 무결성을 유지하고, 객체의 내부 구현을 숨길 수 있습니다.예제class Person { constructor(name, age) { this._name = name; // _를 붙여서 프라이빗 속성임을 나타냄 th.. 2024. 8. 18.
[JavaScript 문법] 17일차: 함수형 프로그래밍 함수형 프로그래밍이란?함수형 프로그래밍(Function Programming)은 프로그램의 구성 요소를 순수 함수로 작성하고, 상태와 가변 데이터를 최소화하며, 데이터를 변환하는 방식을 강조하는 프로그래밍 패러다임입니다. 이는 코드의 가독성을 높이고, 오류를 줄이며, 테스트와 유지보수를 용이하게 만듭니다.순수 함수순수 함수(Pure Function)는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수입니다. 예제function add(a, b) { return a + b;}console.log(add(2, 3)); // 5불변성불변성(Immutability)은 데이터가 변경되지 않음을 의미합니다. 함수형 프로그래밍에서는 데이터의 불변성을 유지하는 것이 중요합니다. 예제c.. 2024. 8. 17.
[JavaScript 문법] 16일차: 고차 함수 고차 함수란?고차 함수(Higher-Order Function)는 다음 중 하나를 만족하는 함수입니다:함수를 인수로 받을 수 있는 함수.함수를 반환할 수 있는 함수.고차 함수는 함수형 프로그래밍에서 중요한 역할을 하며, 코드의 재사용성을 높이고 가독성을 개선하는 데 유용합니다.콜백 함수콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수입니다.예제function greet(name) { console.log('Hello, ' + name);}function processUserInput(callback) { let name = 'Alice'; callback(name);}processUserInput(greet); // 'Hello, Alice'배열 고차 함수JavaScript의 배열 메서드는 고.. 2024. 8. 16.
[JavaScript 문법] 15일차: this 키워드 이해하기 this 키워드란?this 키워드는 함수가 호출될 때, 해당 함수가 속한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.전역 문맥에서의 this전역 문맥에서는 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.예제console.log(this); // window 객체함수 문맥에서의 this일반 함수에서는 this가 전역 객체를 참조합니다. 엄격 모드에서는 undefined를 참조합니다.예제function showThis() { console.log(this);}showThis(); // window 객체 (엄격 모드에서는 undefined)메서드 문맥에서의 this메서드 내부에서는 this가 해당 메서드를 호출한 객체를 참조합니다... 2024. 8. 15.
[JavaScript 문법] 14일차: 모듈 모듈이란?모듈은 코드의 일부를 독립적으로 분리하여 재사용 가능하게 만드는 방법입니다. 모듈을 사용하면 코드의 유지보수와 관리가 용이해집니다. ES6에서는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.모듈 정의모듈은 파일 단위로 정의되며, export 키워드를 사용하여 모듈 외부로 내보낼 수 있습니다.기본 내보내기 (default export)기본 내보내기는 모듈 당 하나만 가질 수 있으며, export default 키워드를 사용합니다.예제: math.js// math.jsexport default function add(a, b) { return a + b;}예제: main.js// main.jsimport add from './math.js';console.log.. 2024. 8. 14.
[JavaScript 문법] 13일차: 맵과 셋 Map 객체Map 객체는 키-값 쌍을 저장하며, 키의 타입에 제한이 없습니다. 객체와 달리 Map은 삽입 순서를 기억합니다.Map 생성Map 객체는 new Map()을 사용하여 생성할 수 있습니다.let map = new Map();요소 추가set 메서드를 사용하여 요소를 추가할 수 있습니다.map.set('name', 'Alice');map.set('age', 25);console.log(map); // Map { 'name' => 'Alice', 'age' => 25 }요소 접근get 메서드를 사용하여 요소에 접근할 수 있습니다.console.log(map.get('name')); // 'Alice'console.log(map.get('age')); // 25요소 삭제delete 메서드를 사용하여 요.. 2024. 8. 13.
반응형

티스토리툴바