본문 바로가기
반응형

JavaScript

 (43)
JavaScript Object Constructors JavaScript에서 객체 생성자는 클래스와 유사한 역할을 하는 특별한 함수입니다. 생성자는 특정 타입의 객체를 만들기 위한 틀로 사용되며, 그 타입의 인스턴스를 여러 개 만들 수 있습니다. 이를 통해 코드 재사용성을 높이고 중복을 줄일 수 있습니다. 객체 생성자 정의 객체 생성자는 일반 함수와 유사하게 정의됩니다만, 관례상 생성자 함수의 이름은 대문자로 시작합니다. 생성자 내에서 this 키워드는 새로 생성된 객체를 참조하며, 이 객체에 프로퍼티와 메서드를 추가할 수 있습니다. function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.fullNam..
JavaScript 객체 접근자 (Object Accessors) JavaScript 객체 접근자(accessors)는 특별한 메서드로, 객체 프로퍼티의 값을 가져오거나 설정할 수 있는 방법을 제공합니다. 이러한 접근자는 "getter"와 "setter"라고 불리며, 일반 프로퍼티와는 다르게 작동합니다. Getter와 Setter 예제 아래 코드는 Person 객체에 fullName이라는 가상의 프로퍼티를 사용하는 예제입니다. 이 프로퍼티는 실제로 존재하지 않지만, get과 set 접근자를 통해 연산됩니다. const person = { firstName: 'John', lastName: 'Doe', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(value) { const pa..
JavaScript Object 객체 메서드 JavaScript의 객체 메서드는 객체의 속성 중 하나로서, 해당 메서드를 소유하고 있는 객체에 대해 특정 작업을 수행하는 함수입니다. 객체의 메서드는 종종 객체의 데이터를 다루는 데 사용되며, 이는 객체 지향 프로그래밍의 중요한 개념입니다. 객체 메서드의 정의 객체 메서드는 객체 리터럴 내에서 함수로 정의될 수 있습니다. 예를 들어: const person = { firstName: "John", lastName: "Doe", fullName: function() { return this.firstName + " " + this.lastName; } }; console.log(person.fullName()); // "John Doe" 여기서 fullName은 person 객체의 메서드로서, this..
JavaScript Display Objects JavaScript에서 객체를 화면에 표시하려면 여러 방법이 있습니다. 여기에는 웹 페이지에서 직접 사용하는 일반적인 방법이 몇 가지 있습니다. 1. Console.log를 이용한 객체 표시 개발자 콘솔에서 객체의 내용을 빠르게 확인할 수 있으며, 디버깅과 테스팅에 유용합니다. const person = { firstName: "John", lastName: "Doe", age: 30 }; console.log(person); 2. HTML에 직접 삽입하기 HTML 요소를 직접 조작하여 객체의 속성을 웹 페이지에 표시할 수 있습니다. const person = { firstName: "John", lastName: "Doe", age: 30 }; document.getElementById("demo")...
JavaScript for...in 루프 (객체, 배열 사용) 자바스크립트에서 for...in 루프는 객체의 열거 가능한 프로퍼티를 반복하는 데 사용되는 문법입니다. 이 루프는 객체의 직접 정의된 프로퍼티뿐만 아니라 상속된 프로퍼티도 반복합니다. 기본 구조 for...in 루프의 기본 구조는 다음과 같습니다: for (변수 in 객체) { // 반복할 코드 } 변수: 각 반복에서 객체의 현재 프로퍼티 이름을 가집니다. 객체: 반복할 객체입니다. 예제: 객체의 프로퍼티 반복하기 let person = { name: 'John', age: 30, city: 'New York' }; for (let key in person) { console.log(key + ': ' + person[key]); } // 출력: // name: John // age: 30 // city..
JavaScript 객체 속성 이해하기 자바스크립트 객체 프로퍼티란? 객체 프로퍼티는 키와 값 쌍으로 이루어진 정보입니다. 키는 문자열이나 심볼이 될 수 있으며, 값은 어떠한 자료형도 가능합니다. 프로퍼티는 객체의 상태를 나타내며, 그 객체의 특성을 기술합니다. 프로퍼티의 종류 데이터 프로퍼티: 값을 저장하는 일반적인 프로퍼티입니다. 접근자 프로퍼티: get, set을 사용하여 값을 가져오거나 설정하는 프로퍼티입니다. 프로퍼티 접근 방법 점 표기법: 객체.프로퍼티이름 대괄호 표기법: 객체['프로퍼티이름'] 예제: let car = { brand: 'Toyota', model: 'Camry', year: 2020 }; // 점 표기법 console.log(car.brand); // 'Toyota' // 대괄호 표기법 console.log(car..
JavaScript Object 객체 이해하기 1. 자바스크립트에서의 객체 이해하기 자바스크립트의 객체는 무엇인가? 자바스크립트에서, 객체는 중심 역할을 합니다. 모든 것을 객체로 볼 수 있으며, 이해하면 자바스크립트의 핵심을 파악할 수 있습니다. 예: let person = {name: "Kim", age: 30}; // 객체 생성 2. 객체의 종류와 특성 프리미티브가 아닌 요소: 함수, 배열, 수학, 날짜 등은 항상 객체입니다. 프리미티브 타입: string, number, boolean, null, undefined, symbol, bigint와 같이 7가지 기본 데이터 유형이 있습니다. 예: let x = 3.14; // 숫자 let y = "Hello"; // 문자열 3. 프리미티브와 불변성 프리미티브는 변경 불가능한 값입니다. 예: let..
JavaScript setInterval 함수 사용법 및 활용법 setInterval은 자바스크립트에서 주어진 함수를 지정된 시간 간격마다 반복해서 실행하도록 예약하는 메서드입니다. 주로 정기적으로 어떤 작업을 수행해야 할 때 사용됩니다. 사용법 setInterval의 기본 문법은 다음과 같습니다: let intervalID = setInterval(callback, delay, arg1, arg2, ...); callback: 지정된 시간 간격마다 호출될 함수입니다. delay: 호출 간격을 밀리초 단위로 설정합니다. 1000은 1초를 의미합니다. arg1, arg2, ...: 콜백 함수에 전달될 인수입니다. 예제 아래 예제에서는 1초마다 콘솔에 "Hello, World!"라는 메시지를 출력합니다. setInterval(function() { console.log(..
JavaScript async & await 사용법 동기 코드 먼저 동기 코드를 살펴봅시다. 동기 코드는 순서대로 실행됩니다. 한 줄이 끝나면 다음 줄이 실행되는 식이죠. console.log("First"); console.log("Second"); 이 코드는 "First"를 출력하고, 바로 다음에 "Second"를 출력합니다. 비동기 코드 이제 비동기 코드를 살펴봅시다. console.log("First"); setTimeout(() => console.log("Second"), 1000); 이 코드는 "First"를 출력하고, "Second"는 1초 후에 출력합니다. async 함수 JavaScript에서는 비동기 작업을 수행하는 함수를 정의할 때 async 키워드를 사용할 수 있습니다. async 함수 내부에서는 await 키워드를 사용할 수 있어..
JavaScript CallBack 콜백 자바스크립트에서 콜백(callback)은 함수의 매개변수로 전달되는 함수입니다. 콜백은 특정 동작이 완료된 후에 실행되어야 할 코드를 포함하고 있을 수 있으며, 비동기 프로그래밍에서 자주 사용됩니다. 콜백 함수의 예제 아래의 코드는 setTimeout 함수를 사용하여 콜백 함수를 예약하는 간단한 예제입니다. function myCallback() { console.log('2초 후에 실행됩니다.'); } setTimeout(myCallback, 2000); setTimeout은 첫 번째 인자로 콜백 함수를 받고, 두 번째 인자로 지연시킬 밀리초 시간을 받습니다. 위의 예제에서는 myCallback 함수가 2초 후에 실행됩니다. 콜백의 문제점 콜백은 강력한 기능을 제공하지만, 복잡한 비동기 로직을 구현할 ..
반응형

티스토리툴바