TIL

위 코드는 문제없이 100을 출력한다. 왜냐하면 자바스크립트 엔진이 소스코드를 실행하기 전에 먼저 평가과정을 거치기 때문이다. 자바스크립트 엔진은 평가과정 때 변수들이 어디에 위치해 있던지간에 다 호이스팅해와서 선언 및 초기화한다. 이 평가과정이 다 끝난 후에야 소스코

함수선언문과 함수 호이스팅 vs 함수 표현식 함수 선언문으로 선언한 함수도 변수 선언과 마찬가지로 호이스팅할 수 있다. 이 때 변수 떄와의 차이점은 호이스팅한 함수 변수는 undefined를 가지는 게 아니라 해당 함수를 값으로 가진다는 것이다. 그러나 함수 호이스

전역변수와 전역객체 전역변수는 어플리케이션과 생명주기가 동일한 변수이다. 전역변수들은 전역객체의 프로퍼티이다. 전역객체는 브라우저 환경에서는 window, 서버사이드(node.js)에서는 global을 의미한다. ES11부터 전역객체는 globalThis로 통일

javascript는 생성자 함수라는 함수형태를 이용해서 객체를 생성할 수 있다.이때, 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.생성자 함수에 의해 객체가 생성되는 과정 (this Binding)new 연산자와 함께 생성자 함수를 호출하면

프로토타입프로토타입 객체프로토타입 객체란?어떤 객체의 부모 객체 역할을 하는 객체이다.자식 객체는 부모 객체의 프로퍼티를 사용할 수 있다.모든 객체는 하나의 프로토타입을 갖는다.프로토타입과 생성자 함수 모든 프로토타입은 생성자 함수와 연결되어 있다. 다시말해, 프로

표준 빌트인 객체ECMAScript 사양에 정의된 객체를 말한다.자바스크립트 실행환경(브라우저 또는 node.js)과 관계없이 언제나 사용가능.표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역변수처럼 언제나 참조할 수 있다.호스트 객

실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행순서 관리를 구현한 내부 매커니즘이다. 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.실행컨텍스트 구성요소:LexicalEnviroment VariableEnviroment렉시컬 환경은 식별자와 식별자에

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.외부 함수보다 내부에 있는 중첩함수가 더 오래 유지되는 경우, 중첩 함수는 외부 함수의 식별자를 참조할 수 있다. 이것이 가능한 이유는, 외부 함수는 끝나서 외부 함수의 실행 컨텍스트는 스택에서 지워졌다 하더라도

화살표 함수는 함수 선언문으로 정의할수 없고, 함수 표현식으로 정의해야 한다.함수 몸체 내부의 문이 값으로 평가 될 수 있는 표현식인 문이라면, 암묵적으로 반환된다.화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.화살표 함수는 인스턴스를 생성할

요소 노드 취득(Id,Tag,Class,CSS선택자 이용)노드 객체의 상태 변경과 상관없이 안전하게 DOM 콜렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.DOM 조작DOM 조작은 새로운 노드를 생성하여

이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것. (개발자는 사용자가 언제 버튼을 클릭하는지 알 수 없지만, 브라우저는 알 수 있으므로 브라우저에게 위임한다)이벤트 드리븐 프

마우스 클릭 등 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

함수가 즉시 실행되도록 하지 않고, 일정 시간이 경과되면 실행되도록 하려면 타이머 함수를 사용하면 된다.자바스크립트는 두 가지의 타이머 생성 함수를 제공한다.setTimeout : 일정 시간 경과 후 예약된 함수 실행. 단 한번만 실행됨.setInterval: 일정 시

요소.style.color = "- 왠만하면 js가 css를 직접 바꾸는 것은 피하는게 좋다.해당 요소에 css 요소를 class 등을 통해 추가/제거한다.나는 색깔을 번갈아 바꾸기 위해서는 class를 추가/제거하는 방식을 사용했고,색깔을 랜덤으로 바꾸기 위해서는 직

페이스북 개발팀이 개발한 자바스크립트 라이브러리.어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라,그냥 기존 뷰를 날려버리고, 처음부터 새로 렌더링하는 방식의 라이브러리.구조가 MVC,MVW인 프레임워크와는 달리, 오직 V(View)만 신경쓰는 라이브러

properties를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소이다.props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.props의 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있다.비구조화 할당 문법(구조 분해 문법

모든 리액트 컴포넌트에는 라이프 사이클이 존재한다.컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다.라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다.라이프 사이클은 크게 마운트, 업데이트, 언마운트 이렇게 3부분으

Hooks는 리액트 v16.8에 새로 도입된 기능으로 1\. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState,2\. 렌더링 직후에 수행할 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수

webpack은 여러 파일을 하나의 파일로 합쳐주는 번들러이다.https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html님이 정리하신 글을 읽어보면 왜 webpack이 필요한지 알 수 있다.내

모든 자바스크립트는 타입스크립트 이지만, 일부 자바스크립트(그리고 타입스크립트)만이 타입 체크를 통과한다.자바스크립트 런타임으로 돌리면 정상 동작하지만, 타입체커는 통과못해서 문제점이 표시되는 코드 예시타입 스크립트 컴파일러는 크게 두 가지 역할을 수행한다.최신 타입스

컴포넌트의 리렌더링을 방지할 때는 shoudComponentUpdate라는 라이프사이클을 사용하면 된다.하지만, 함수형 컴포넌트에서는 shoudComponentUpdate같은 라이프사이클 메서드를 사용할 수 없다.대신에 React.memo라는 함수를 사용하여,컴포넌트의