본문 바로가기
반응형

Javascript75

[JavaScript] Truthy와 Falsy 자바스크립트에서 "truthy"와 "falsy"는 조건문이나 논리 연산에서 값의 참과 거짓을 평가하는데 사용되는 개념입니다. 이 용어들은 값의 타입에 관계없이 평가되며, 일부 값들은 "truthy"로 평가되고, 일부 값들은 "falsy"로 평가됩니다. 다음은 "truthy"와 "falsy"의 예시와 평가 규칙에 대한 설명입니다: 1. "Truthy" 값: true: 불리언 값 true는 항상 "truthy"로 평가됩니다. 비어있지 않은 문자열: 비어있지 않은 모든 문자열은 "truthy"로 평가됩니다. 숫자: 0이 아닌 모든 숫자는 "truthy"로 평가됩니다. 배열과 객체: 비어있지 않은 배열이나 객체는 "truthy"로 평가됩니다. 함수: 정의된 함수는 항상 "truthy"로 평가됩니다. 2. "Fa.. 2024. 2. 19.
JavaScript Animation과 CSS Animation 차이 CSS 애니메이션과 JavaScript 애니메이션은 웹 페이지에서 동적인 요소를 만들기 위해 사용되지만 다른 접근방식을 보입니다. 1. CSS 애니메이션 CSS 애니메이션은 CSS 속성을 사용하여 웹 요소에 애니메이션 효과를 적용하는 방식 주로 @keyframes 규칙을 사용하여 애니메이션의 시작 상태와 종료 상태, 그리고 중간 단계의 스타일을 정의 CSS 애니메이션은 주로 시각적인 요소에 대한 애니메이션에 사용됩니다. 예를 들어, 요소의 이동, 회전, 크기 변화, 색상 변화 등을 담당 CSS 애니메이션은 브라우저에 내장된 애니메이션 엔진을 사용하므로, 성능 면에서 일반적으로 JavaScript 애니메이션보다 부드럽고 효율적 CSS 애니메이션은 간단한 애니메이션 효과를 적용하기에 편리하며, 코드가 간결하.. 2024. 2. 16.
[JavaScript] 프로미스(Promise) * 프로미스(Promise)란? 자바스크립트에서 프로미스(Promise)는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업은 일반적으로 서버에서 데이터를 가져오거나 파일을 읽는 등 시간이 걸리는 작업을 말합니다. 프로미스는 이러한 비동기 작업의 성공 또는 실패와 그 결과 값을 처리하기 위해 사용됩니다. 프로미스는 세 가지 상태를 갖습니다: 대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다. 이행(fulfilled): 비동기 작업이 성공적으로 완료되어 결과 값을 반환한 상태입니다. 거부(rejected): 비동기 작업이 실패한 상태입니다. 기본 예시 const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 // 작업이 성.. 2024. 2. 7.
[JavaScript] 호이스팅(Hoisting) 1. 호이스팅(Hoisting) 호이스팅(Hoisting)은 자바스크립트에서 변수 선언과 함수 선언이 해당 스코프의 맨 위로 "끌어올려지는" 동작을 말합니다. 이는 코드 실행 전에 변수와 함수가 메모리에 할당되는 것처럼 동작하여, 변수와 함수를 선언하기 전에도 사용할 수 있는 특징을 갖고 있습니다. 1-1. 변수 호이스팅 변수 선언은 실제 코드의 위치와 상관없이 해당 스코프의 맨 위로 끌어올려집니다. 즉, 변수를 선언하기 전에도 변수를 사용할 수 있습니다. 그러나 변수의 초기화는 원래 코드의 위치에 따라 이루어지므로, 선언 전에 변수에 접근하면 undefined가 할당됩니다. 1-2. 함수 호이스팅 함수 선언도 변수 선언과 마찬가지로 해당 스코프의 맨 위로 끌어올려집니다. 함수 선언문은 변수에 할당된 함.. 2024. 2. 7.
[JavaScript] 이벤트 버블링(Event Bubbling)과 이벤트캡쳐(Event Capturing) 자바스크립트에서 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)은 이벤트가 여러 개의 요소에 영향을 미치는 방식을 설명하는 용어입니다. 1. 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 요소가 포함된 부모 요소로 이벤트가 전파되는 현상 즉, 이벤트가 가장 깊은 자식 요소에서 시작하여 부모 요소를 거슬러 올라가면서 처리되는 것을 의미합니다. 이벤트 버블링은 DOM 트리 구조를 따라 이벤트가 전파되기 때문에, 최상위 부모 요소까지 이벤트가 전달될 수 있습니다. 이러한 특성을 활용하면 이벤트 위임(Event Delegation)이라는 패턴을 사용하여 여러 요소에 대한 이벤트 핸들링을 효율적으로 처리할 수 있습니다... 2024. 2. 7.
[JavaScript] 프로토타입(Prototype), 상속(Inheritance) 1. 프로토타입(Prototype) 프로토타입(Prototype)은 객체 지향 프로그래밍에서 상속과 관련된 개념입니다. 프로토타입은 객체 간의 상속을 구현하고, 객체가 다른 객체의 속성과 메서드를 공유할 수 있도록 도와줍니다. 모든 객체는 프로토타입을 가지고 있으며, 객체의 프로토타입은 해당 객체를 생성한 생성자 함수의 프로토타입 객체를 가리킵니다. 프로토타입 객체에는 해당 생성자 함수로부터 생성된 모든 객체에서 공유할 수 있는 속성과 메서드가 포함됩니다. 2. 상속(Inheritance) 상속은 한 객체가 다른 객체의 속성과 메서드를 상속받아 사용하는 것을 말합니다. 자바스크립트에서는 프로토타입 체인(Prototype Chain)을 통해 상속을 구현합니다. 객체에서 속성 또는 메서드에 접근할 때, 해당.. 2024. 2. 6.
반응형

티스토리툴바