웹 개발 (Frontend Developer)/JavaScript15 JavaScript에서 'this' 'this' 키워드는 항상 객체를 참조합니다. 그러나 'this'가 참조하는 객체는 this가 호출되는 방식과 위치에 따라 달라질 수 있습니다. **this는 변수가 아닌 키워드입니다. this의 값을 변경할 수 없습니다** 자바스크립트에서 객체 메서드의 문맥에서는 this 키워드가 객체 자체를 가리키며, 메서드의 범위 내에서 해당 객체의 속성 및 메서드에 접근할 수 있게 해 줍니다. 단독으로 사용될 때, this는 전역 객체를 가리킵니다.** 브라우저 환경에서는 window 객체를 가리키고, Node.js 환경에서는 global 객체를 가리킵니다 ** 함수 내부에서 사용될 때, this는 일반적으로 전역 객체를 가리킵니다. 엄격 모드(strict mode)에서 함수 내에서 this는 undefined가.. 2024. 9. 24. JavaScript에서 클로저 (Closure) 이란? 클로저는 함수와 그 주변 상태(렉시컬 환경)에 대한 참조가 함께 묶인 조합입니다. 클로저를 생성하면 내부 함수에서 외부 함수의 스코프에 접근할 수 있습니다. 렉시컬 스코핑은 (lexical scope) 함수가 중첩될 때 파서가 변수 이름을 어떻게 해결하는지를 의미합니다. 소스 코드 내에서 변수가 선언된 위치가 그 변수가 사용할 수 있는 범위를 결정합니다. 중첩된 함수는 외부 스코프에서 선언된 변수에 접근할 수 있습니다. 클로저는 내부 함수가 외부 함수가 실행을 마친 후에도 외부 함수의 변수와 매개변수에 접근할 수 있을 때 형성됩니다. 이는 내부 함수가 자신이 생성된 렉시컬 환경에 대한 참조를 유지하기 때문에 가능합니다. 숫자를 세는 카운터 함수를 작성해 보겠습니다 상단에서 add() 함수를 3번 불렀지만.. 2024. 9. 23. 네이티브 객체 (Native Object) vs 호스트 객체 (Host Object) 네이티브 자바스크립트 객체는 자바스크립트 자체에서 제공하는 표준 자바스크립트 객체입니다. 이러한 객체들은 내장 객체, 사전 정의된 객체, 또는 전역 객체라고도 불립니다. ECMAScript 명세에서 의미론적인 부분을 완전히 정의해 놓은 객체들입니다. 하단에 객체 예 시들를 나열했습니다. - Object - Date- String()- Math - parseInt- eval- indexOf 호스트 자바스크립트 객체는 환경에 따라 달라지는 자바스크립트 객체로, 자바스크립트가 실행되는 기기의 환경에 따라 다를 수 있습니다. 한 환경에서 제공되는 객체가 다른 환경에서는 존재하지 않을 수도 있습니다. 호스트 객체는 ECMAScript 실행 환경을 완성하기 위해 호스트 환경 (브라우저, 서버) 에서 제공되는 객체.. 2024. 9. 22. JavaScript에서 호이스팅(Hoisting)이란 JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다. JavaScript의 선언에는 3가지 방법이 있습니다. var : 변수를 선언. 추가로 동시에 값을 초기화let : 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화const : 블록 스코프 읽기 전용 상수를 선언 - var x = " " 와 같은 var 키워드로 변수를 선언이 가능하며, 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다. - let y - " " 와 같이 const 혹은 let 키워드로 변.. 2024. 9. 20. 스코프 (Scope) 이해 스코프는 프로그램에서 변수가 접근 가능한 영역을 나타냅니다. 이는 코드 내에서 변수, 함수, 객체의 가시성과 생명주기를 결정합니다. JavaScript에는 3가지 스코프 종류가 있습니다 :- 전역 범위 : 함수나 블록 외부에 선언된 변수나 함수가 해당되며, 프로그램 어디서든 접근할 수 있습니다.- 블록 범위 : 'let'이나 'const'를 사용하여 블록(중괄호 내)에서 선언된 변수는 블록 스코프를 가집니다. { } 에 있는 변수는 외부에서 접근이 불가합니다.- 함수 범위 : 각 함수는 새로운 스코프를 생성합니다. 이 변수는 그 함수 내에서만 접근할 수 있습니다. 전역 범위 : 함수 범위 : ** 함수 스코프 내에 선언된 'let', 'var', 'const'는 비슷한 역할을 합니다. 블록 범위 : .. 2024. 9. 18. JavaScript Event Delegation (이벤트 위임) 자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다. 이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다. 캡처링 단계와 타겟 단계는 무엇인가요?캡처링 단계는 이벤.. 2024. 9. 13. 이전 1 2 3 다음
