윤시의 블로그

자바스크립트에서 객체를 생성하는 방법은 여러 가지가 있다. 그 중 두 가지 주요 방법은 객체 리터럴과 생성자 함수를 사용하는 방식이다. 각 방식의 특징과 장단점, 그리고 생성자 함수의 동작 방식에 대해 살펴보겠다.  1. 객체 리터럴 방식객체 리터럴({ })은 객체를 생성할 때 가장 간단하고 직관적인 방법이다. 객체 리터럴을 사용하면 코드가 간결해지고, 객체를 정의하는 것이 쉬워진다.const person1 = { name: "WI", getPersonName() { return `Hi, My Name is ${this.name}`; },};console.log(person1.getPersonName()); // "Hi, My Name is WI" 객체 리터럴로 생성한 객체는 하나의 객체만 ..

JavaScript에서 일급 객체(First-Class Object)는 "객체로서 함수와 같은 다른 데이터 타입처럼 취급될 수 있는 객체"를 말한다. 함수나 변수도 일급 객체로 취급된다. 이를 이해하기 위해서는 "객체"라는 개념과 값처럼 다룰 수 있다는 의미를 잘 이해하는 것이 중요하다. 1. 객체란 무엇인가?자바스크립트에서 객체는 프로퍼티(속성)와 메소드(기능)를 가질 수 있는 데이터 구조이다. 객체는 키-값 쌍으로 구성된 데이터 집합이다. const person = { name: 'John', age: 30, greet: function() { console.log('Hello!'); }};이 코드에서 person 객체는 name, age, greet라는 프로퍼티를 가지고 있다. 그리고 ..

클래스란?자바스크립트에서 클래스는 객체 지향 프로그래밍(OOP)을 지원하는 중요한 구조로, 객체 생성과 속성 및 메서드 정의를 보다 효율적으로 할 수 있게 해준다. 자바스크립트는 ES6(ECMAScript 2015)에서 class 문법을 도입했으며, 클래스는 객체를 생성하기 위한 템플릿(설계도) 역할을 한다.자바스크립트 클래스의 기본 구성 요소class 키워드: 클래스를 정의하는데 사용된다.constructor: 클래스 인스턴스가 생성될 때 호출되는 메서드로, 객체 초기화에 사용된다.this: 클래스 내에서 자신을 가리키는 키워드로, 클래스 인스턴스의 속성 및 메서드에 접근하는 데 사용된다.1. 클래스 정의하기클래스 선언식클래스를 정의할 때 class 키워드를 사용한다. 클래스 이름은 대문자로 시작하는 ..

DOM (Document Object Model)DOM은 웹 페이지를 프로그래밍적으로 다룰 수 있도록 문서를 구조화한 객체 모델.HTML이나 XML 문서를 브라우저가 읽어들이면, 브라우저는 이를 DOM으로 변환하여 JavaScript로 조작할 수 있도록 만든다.DOM의 핵심 개념1. DOM은 문서 구조를 트리 형태로 표현HTML 문서를 로드하면 브라우저는 트리 구조로 변환한다.이 트리를 DOM 트리라고 하며, 각각의 HTML 요소는 노드(Node)로 표현된다.예: HTML 구조 Hello World This is a paragraph. DOM 트리 구조Document └─ html ├─ head │ └─ title └─ body ├─ h..

1. strict mode란?JavaScript에서 strict mode는 JavaScript 코드에 대해 좀 더 엄격한 규칙을 적용하는 모드이다. 이를 사용하면 변수 선언을 하지 않고 사용하는 등의 오류를 미리 발견할 수 있다. 쉽게 말해, 코드에서 잘못된 부분이나 위험한 부분을 강제로 제한해서 실수를 줄이고, 에러를 미리 감지할 수 있도록 도와준다.일반 모드에서는 실수로 잘못된 코드를 작성해도 에러가 발생하지 않을 수 있지만, strict mode에서는 에러를 즉시 발생시킨다.예를 들어, 미리 선언되지 않은 변수를 사용하는 경우, strict mode에서는 오류가 발생한다.2. strict mode 활성화 방법strict mode는 코드의 첫 번째 줄에 "use strict"; 를 추가하여 활성화할 ..

1. 스코프(Scope)스코프란 변수나 함수가 유효하게 사용될 수 있는 범위를 정의하는 개념.쉽게 말해, 코드에서 특정 변수나 함수가 "어디서" 접근될 수 있는지 결정하는 규칙.종류전역 스코프 (Global Scope): 전역 변수는 모든 함수나 코드에서 접근 가능.함수 스코프 (Function Scope): 함수 내에서 선언된 변수는 해당 함수 내부에서만 유효.지역 스코프 (Local Scope): 함수 내에서 let이나 const로 선언된 변수는 해당 함수나 코드 블록 내에서만 유효.블록 스코프 (Block Scope): {}로 구분되는 블록 내에서만 유효한 변수로, let과 const로 선언된 변수는 블록 내에서만 접근 가능.어휘적 스코프 (Lexical Scope): 함수의 스코프는 함수가 정의된..

JavaScript 제어구문 (1 - 조건문)→ 제어구문은 조건에 따라 코드 흐름을 다르게 처리하는 구문이다.조건문if문, switch문조건문은 특정 조건을 만족할 때 코드 블록을 실행하거나 실행하지 않도록 하는 구문이다.1.1 if 문조건식이 참이면 코드 블록을 실행하고, 거짓이면 실행하지 않는다.기본 문법if (조건식) { // 조건식이 참일 때 실행될 코드}const num = 10;if (num > 5) { console.log('숫자는 5보다 큽니다.');}// 출력: 숫자는 5보다 큽니다 1.2 if-else 문조건식이 참이면 첫 번째 블록을 실행하고, 거짓이면 두 번째 블록을 실행한다.기본 문법if (조건식) { // 조건식이 참일 때 실행될 코드} else { // 조..

💡함수란?코드를 작성하다보면, 유사한 동작(기능)을 하는 코드가 여러 곳에서 필요할 때가 있음.EX) 로그인 & 로그아웃 시 나타나는 안내 메시지함수는 불필요한 중복 없이 유사한 동작을 여러 번 호출할 수 있게 함.함수의 주요 용도 ⇒ 중복 코드 피하기💡함수 선언function showMessage() { alert( '안녕하세요!' );}함수 선언 방식→ funtion 함수명 ( 매개 변수 ) { 동작 내용 }function 함수명(매개변수) { // 동작 내용}function 키워드로 함수 선언을 시작함수명은 함수의 이름이며, 이를 통해 함수를 호출할 수 있음괄호 () 안에는 매개변수를 넣습니다. 매개변수가 여러 개일 경우, 각 매개변수를 콤마로 구분함함수 본문은 {} 중괄호로 감싸서, 함수가..

투두리스트를 만들며 새로고침 할 때마다화면에 명언을 랜덤으로 출력하는 코드 정리  // 1. 명언(quote)과 저자(author)를 저장한 배열을 생성// 배열 내 각 항목은 quote와 author 속성을 가진 객체const quotes = [ { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, { quote: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, { quote: "The world is a book and those who do..

투두 리스트를 만들며 디지털 타이머를 JavaScript 코드로 구현해보았다.타이머는 start, stop, reset 버튼을 통해 제어할 수 있고, 시간은 초 단위로 업데이트 되어 화면에 표시된다.   1. HTML 요소 선택const timerDisplay = document.getElementById("timer-display");const startBtn = document.getElementById("start-btn");const stopBtn = document.getElementById("stop-btn");const resetBtn = document.getElementById("reset-btn"); timerDisplay : 타이머의 시간 표시 요소를 선택한다. 경과 시간을 업데이트할..