분류 전체보기97 Javascript - Scope, Closure 클로저를 배우기 전에 스코프에 대한 개념부터 알아야 한다. Scope스코프는 사전적 의미로 ‘범위’를 뜻한다.JavaScript로 함수 작성 시, 중괄호 {}를 이용하여 함수의 범위를 작성한다.즉 여기서 말하는 스코프는 ‘코드가 영향을 미치는 범위’, ‘변수의 유효 범위’ 등으로 정의할 수 있다. 1. 스코프의 개념선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다.계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. 2. 스코프의 동작에 따른 구분스코프의 동작 별 구분은 스코프를 결정하는 방식에 따라서, 정적 스코프(혹은 렉시컬 스코프), 동적 스코프로 나뉜다.. 2024. 12. 23. Javascript - 이벤트 버블링, 캡쳐링 이벤트 버블링(Event Bubbling)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.즉, 한 요소에 이벤트가 발생되면 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파방식 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div");const clickEvent = (e) => { console.log(e.currentTarget.className);};divs.forEach((div) => {.. 2024. 12. 23. Javascript - var, let, const, Hoisting var & letJavaScript는 es6 문법 도입 이전까지 var 키워드만을 이용하여 변수를 선언했다. 그렇기 때문에 코드 실행 중 예기치 못한 문제들이 자주 발생하게 되었다. 예를 들면 다음과 같은 문제들이다.var a = "a"console.log(a) // "a"var a = "b"console.log(a) // "b" 같은 변수에 다른 값을 두 번 할당하였는데도 에러가 나지 않고 멀쩡히 다른 값이 출력되는 것을 볼 수 있다.var는 변수의 재선언, 재할당 모두가 가능하기 때문에 유연한 변수 선언 면에서는 장점일 수 있으나, 코드양이 많아질수록 유지 관리가 힘들며 에러를 찾기도 힘들어진다.또한 var는 Hoisting과도 연관이 있다. 호이스팅이란?인터프리터가 변수와 함수의 메모리 공간을 선언.. 2024. 12. 23. Javascript - async/await 자바스크립트 비동기 처리 3가지 방식자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다.비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없어, 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있다.하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 Callback Hell, Promise Hell 이라고 불리운다. 자바스크립트 async / awaitasync/await는 ES2017에 도입된 문법으로, Promise 로직을 더 쉽고.. 2024. 12. 22. Javascript - Promise 콜백 지옥을 탈출하는 새로운 문법자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다.예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(링크)로 이루어져 있다.비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수행할 수 있다.. 2024. 12. 21. Javascript - this this란?JS에서 실행 컨텍스트에 따라 다르게 바인딩되는 객체this는 함수의 블록 스코프 내에서 선언되어야 작동 cf) 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1모둠 this의 기본 동작 원리'this'는 함수가 호출되는 방식에 따라 다르게 동작함- 일반 함수로 호출될 때: 전역 객체를 가리킴- 메소드로 호출될 때: 해당 메소드를 호출한 객체를 가리킴 왜냐.. 2024. 12. 21. 이전 1 2 3 4 5 ··· 17 다음
