본문 바로가기

자바스크립트6

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.
JavaScript Event Delegation (이벤트 위임) 자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다.  이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다.  캡처링 단계와 타겟 단계는 무엇인가요?캡처링 단계는 이벤.. 2024. 9. 13.
웹개발에 사용할 수 있는 추가 JavaScript 지식 랜덤 숫자는 var n = Math.random();으로 생성할 수 있으며, 생성된 숫자는 0 ~ 1 미만까지의 값으로, 소수점 16자리까지 가능합니다. 아주 간단한 랜덤 사랑 점수 코드를 작성할 수 있습니다. var loveScore = Math.random() * 100;loveScore = Math.floor(loveScore) + 1;alert("Your love score is " + loveScore + "%"); 여러 데이터를 같은 컨테이너나 변수에 저장할 수 있습니다, 이것을 배열이라고 부릅니다. 예시 -> var eggs = ["1", "2", "3", "4"]배열에서 특정 데이터를 그 데이터의 위치로부터 가져올 수 있습니다. var myegg = egg[1] -> 하면 두 번째 데이터를.. 2024. 8. 26.
웹 개발에 JavaScript가 필요한 이유와 간단한 JavaScript JavaScript (JS) 는 인터프리터 방식으로 실행되는 프로그래밍 언어로, 다양한 프로그래밍 패러다임을 지원합니다. JavaScript는 웹 페이지를 위한 스크립트 언어로 많이 사용하고 잘 알려져 있습니다. 웹 개발에 HTML과 CSS로 웹 페이지 생성하고 유지할 수 있지만, 왜 JavaScript가 필요한가요?  JavaScript는 웹 페이지에서 애니메이션, 비디오 및 음악 재생, 온라인 드럼 키트 등 다양한 복잡한 기능들을 구현할 수 있습니다. 따라서 JavaScript는 웹 페이지에 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고 다양한 작업을 할 수 있는 스크립팅 언어입니다. 또한 JavaScript을 이용하여 애플리케이션 프로그래밍 인터페이스 (API)들을 호출하여 다양한 멀티미디어 콘텐.. 2024. 8. 14.