자바스크립트 17

Javascript 중급 - 3) undefined vs null, 얕은 비교 vs 깊은 비교, 얕은 복사 vs 깊은 복사, 함수 표현식 vs 함수 선언문

※ 공통점 둘 다 원시 자료형(primitive) 이다. undefined 타입은 undefined 값이 유일하며, null 타입은 null 값이 유일하다. (단, typeof null 을 찍어보면 object 라고 나오는데, 처음에 만들 때 잘못해서 이걸 고치면 너무나 많은 오류가 나와서 그대로 나뒀다고 한다. 그래서, 타입스크립트에서는 strict 키워드를 통해 찍어보면 object가 아니라고 한다.) 1) undefined - undefined 는 '아무 값도 할당받지 않은 상태'를 의미한다. - var 키워드로 선언한 변수는 호이스팅으로 올라간 후 undefined로 초기화된다. 그 이후 인터프리터가 해당 소스코드에 도달했을 때 할당한 값이 들어가게 된다...

Javascript 중급 - 2) closure, 구조 분해 할당, map, filter, reduce, 전개연산자

- 클로저(Closure)는 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 말한다. 다시 말해서, 클로저는 내부 함수에서 외부 함수의 스코프(Scope)에 접근할 수 있게 해주는 기능이다. 자바스크립트에서는 함수가 생성될 때마다, 즉 함수 생성 시에 클로저가 만들어진다. 다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다. ... 무슨말이죠 이게? ... 예를 들어, 외부 함수에서 변수를 선언하고, 내부 함수에서 이 변수에 접근할 수 있게 해..

Javascript 기본 - 3) Event

- 어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까? [ Event Listener ] - 위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다. - 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너 이다. [ addEventListener()] - 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다. - 밑에서부터는 해당 html 을 가지고 예제를 적용할 것이다. Title Email: Submit Submit2 1. 자바 스크립트 코드에서 프로퍼티로 등록 window.onload = function() { // 문..

Javascript 기본 - 2) Window 객체 및 DOM

- window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타낸다. 또한 window는 브라우저의 객체이지 javascript 객체가 아니다. - 이 window 객체를 이용해서 1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다. (ex) - var 로 선언해서 window 객체의 프로퍼티를 만들어야 한다. let과 const는 블록 스코프이기에 window 객체 내부의 블록에서 선언된 것으로 전역 객체의 프로퍼티로 활용될 수 없다.(아래) - 브라우저에서 UI를 볼 수 있는 것은 HTML의 요소를 하나하나 분석해..

Javascript 에서 forEach 함수는 비동기함수를 기다리지 않아요!

🚨 문제 상황 배열에 담긴 요소들을 하나씩 뽑아내는 작업을 할 때 아래와 같은 코드가 있다고 해보자. const allu = new Array(10).fill('dachshund'); const result = [] const asyncFunction = (i) => { return new Promise(resolve => { setTimeout(() => { result.push(i) resolve() }, 1000); }) } allu.forEach(async (_,i)=>{ await asyncFunction(i) }) console.log(result) 위 코드처럼 작성하면 result 값에 원하던 값이 들어가있지 않고 초기의 배열인 빈값이 출력됐다. forEach는 내부에 들어있는 순차적으로배열..

반응형