본문 바로가기
반응형

자바스크립트102

[JavaScript 문법] 12일차: ES6 클래스 클래스란?클래스는 객체 지향 프로그래밍의 기본 단위로, 객체를 생성하기 위한 템플릿입니다. ES6에서는 객체 지향 프로그래밍을 더 쉽게 구현할 수 있도록 class 문법이 도입되었습니다.클래스 선언클래스는 class 키워드를 사용하여 선언할 수 있습니다. 기본 문법class 클래스이름 { constructor(매개변수1, 매개변수2, ...) { // 초기화 코드 } 메서드이름() { // 메서드 코드 }}예제class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log('Hello, my name is ' + this.name); }}let perso.. 2024. 8. 12.
[JavaScript 문법] 10일차: 배열 기초 배열이란?배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열의 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. JavaScript의 배열은 크기가 동적으로 조정되며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.배열 선언배열을 선언하는 방법에는 배열 리터럴과 Array 생성자를 사용하는 방법이 있습니다.배열 리터럴let fruits = ['Apple', 'Banana', 'Cherry'];Array 생성자let fruits = new Array('Apple', 'Banana', 'Cherry');배열 요소 접근배열 요소는 인덱스를 사용하여 접근할 수 있습니다. 예제let fruits = ['Apple', 'Banana', 'Cherry'];console... 2024. 8. 10.
[JavaScript 문법] 9일차: 객체의 프로토타입 프로토타입이란?프로토타입은 객체 지향 프로그래밍에서 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 하는 메커니즘입니다. JavaScript는 프로토타입 기반 언어로, 모든 객체는 프로토타입을 가질 수 있습니다.프로토타입 체인프로토타입 체인은 객체가 다른 객체로부터 상속을 받을 때 형성됩니다. 객체는 자신의 프로토타입에 정의된 속성과 메서드를 사용할 수 있으며, 프로토타입 체인을 따라가면서 상위 객체의 속성과 메서드를 참조할 수 있습니다. 예제function Person(name, age) { this.name = name; this.age = age;}Person.prototype.greet = function() { console.log('Hello, my name is ' + thi.. 2024. 8. 9.
[JavaScript 문법] 8일차: 객체 기초 객체란?객체는 여러 값들을 하나의 단위로 묶어서 관리할 수 있는 복합 데이터 타입입니다. 객체는 속성과 메서드로 구성됩니다. 속성은 객체의 상태를 나타내고, 메서드는 객체의 동작을 정의합니다.객체 리터럴객체 리터럴은 중괄호 {}를 사용하여 객체를 정의하는 방법입니다. 기본 문법let 객체이름 = { 속성1: 값1, 속성2: 값2, ...}; 예제let person = { name: 'Alice', age: 25, city: 'New York'};속성 접근객체의 속성에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있습니다. 점 표기법console.log(person.name); // 'Alice'console.log(person.age); // 25 대괄호 표기법console.log(perso.. 2024. 8. 8.
[JavaScript 문법] 7일차: 스코프와 클로저 스코프란?스코프는 변수, 함수, 객체가 접근할 수 있는 범위를 나타냅니다. JavaScript에는 전역 스코프와 지역 스코프가 있으며, ES6 이후에는 블록 스코프도 추가되었습니다.전역 스코프전역 스코프는 코드 전체에서 접근할 수 있는 범위를 의미합니다. 전역 변수는 함수 외부에서 선언된 변수입니다. 예제let globalVar = 'I am global';function test() { console.log(globalVar); // 'I am global'}test();console.log(globalVar); // 'I am global' 지역 스코프지역 스코프는 함수 내부에서만 접근할 수 있는 범위를 의미합니다. 지역 변수는 함수 내부에서 선언된 변수입니다. 예제function test() { .. 2024. 8. 7.
[JavaScript 최신 기능 시리즈] 7일차: JavaScript의 새로운 빌트인 객체들: Map, Set 이해하기 7. 새로 추가된 빌트인 객체들 (Map, Set 등)새로운 빌트인 객체란 무엇인가?ES6에서는 기존의 객체(Object)와 배열(Array) 외에 새로운 자료 구조인 Map과 Set을 도입했습니다. 이들은 각각 키-값 쌍과 고유한 값의 집합을 관리하는 데 유용합니다.Map 객체Map 객체는 키-값 쌍을 저장하며, 모든 데이터 유형을 키로 사용할 수 있습니다.1. Map 생성let map = new Map();2. 요소 추가map.set('name', 'Alice');map.set('age', 25);console.log(map); // 출력: Map(2) {"name" => "Alice", "age" => 25}3. 요소 접근console.log(map.get('name')); // 출력: Alic.. 2024. 8. 7.
[JavaScript 심화 시리즈] 7일차: JavaScript 메모리 관리와 성능 최적화 이해하기 7. 메모리 관리와 성능 최적화메모리 관리란 무엇인가?메모리 관리는 프로그램이 실행될 때 사용되는 메모리의 할당과 해제를 의미합니다. JavaScript는 자동 메모리 관리 기능을 제공하지만, 메모리 누수를 방지하고 성능을 최적화하기 위해 메모리 사용에 주의를 기울이는 것이 중요합니다.가비지 컬렉션JavaScript는 자동으로 메모리를 관리하기 위해 가비지 컬렉터(Garbage Collector)를 사용합니다. 가비지 컬렉션은 더 이상 참조되지 않는 객체를 메모리에서 해제합니다.1. 참조 카운팅객체가 얼마나 많은 참조를 받고 있는지를 추적합니다. 참조 카운트가 0이 되면 객체는 가비지 컬렉션 대상이 됩니다.2. 마크 앤 스윕객체 그래프를 탐색하여 도달할 수 없는 객체를 마크하고, 마크되지 않은 객체를 해.. 2024. 8. 7.
[JavaScript 문법 ] 6일차: 함수 기초 함수란?함수는 특정 작업을 수행하는 코드 블록입니다. 코드를 재사용하고, 코드의 구조와 가독성을 개선하는 데 도움이 됩니다.함수 선언함수 선언은 function 키워드를 사용하여 함수를 정의하는 방법입니다. 기본 문법function 함수이름(매개변수1, 매개변수2, ...) { // 실행될 코드}예제function greet(name) { console.log('Hello, ' + name + '!');}greet('Alice'); // 'Hello, Alice!'함수 표현식함수 표현식은 함수를 변수에 할당하는 방법입니다. 기본 문법const 함수이름 = function(매개변수1, 매개변수2, ...) { // 실행될 코드};예제const greet = function(name) { consol.. 2024. 8. 6.
[JavaScript 최신 기능 시리즈] 6일차: JavaScript 모듈 시스템 이해하기 6. 모듈 시스템모듈 시스템이란 무엇인가?모듈 시스템은 코드의 재사용성과 유지보수성을 높이기 위해 코드를 독립적인 단위로 분리하는 방법을 제공합니다. ES6 이전에는 CommonJS와 AMD와 같은 모듈 시스템이 사용되었지만, ES6에서 표준 모듈 시스템이 도입되었습니다.ES6 모듈ES6 모듈은 import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있습니다.1. 모듈 내보내기 (Export)모듈에서 변수, 함수, 클래스 등을 내보내기 위해 export 키워드를 사용합니다.기본 내보내기 (Default Export)모듈에서 하나의 기본 값을 내보낼 수 있습니다.// math.jsconst add = (a, b) => a + b;export default add;이름 내보내기 (Named .. 2024. 8. 6.
[JavaScript 심화 시리즈] 6일차: JavaScript의 이벤트 루프와 비동기 처리 이해하기 6. 이벤트 루프와 비동기 처리이벤트 루프란 무엇인가?이벤트 루프(Event Loop)는 JavaScript의 비동기 처리를 가능하게 하는 메커니즘입니다. JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 작업을 처리할 수 있습니다.이벤트 루프의 동작 방식이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 사용하여 작업을 관리합니다.1. 콜 스택콜 스택은 함수 호출을 관리하는 스택입니다. 함수가 호출되면 스택에 푸시(push)되고, 함수 실행이 완료되면 스택에서 팝(pop)됩니다.2. 태스크 큐태스크 큐는 비동기 작업(예: 타이머, 이벤트 리스너 등)이 완료되었을 때 콜백 함수를 저장하는 큐입니다.3. 이벤트 루프이벤트 루프는 콜 스택이 비어 있는지 확.. 2024. 8. 6.
반응형

티스토리툴바