Javascript 세부 개념정리
Updated:
javascript의 여러가지 개념 이해하기
호이스팅
호이스팅이란?
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
자바스크립트 함수는 실행되기 전에 함수안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 것은 아니며, 자바 스크립트 parser 내부적으로 끌어올려서 처리 하는 것이다.
호이스팅의 대상
var 선언과 함수 선언문에서만 호이스팅이 일어난다.
할당, let. const, 변수 선언과 함수 표현식에서는 발생하지 않는다.
이벤트 버블링
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모의 핸들러가 동작한다. 가장 최상단의 요소를 만달때 까지 이 과정이 반복되면서 각각에 할당된 핸들러가 동작한다.
<form onclick="a()">
<div onclick="b()">
<p onclick="c()"></p>
</div>
</form>
FORM > DIV > P 형태로 동작한다.
즉 c, b, a 순으로 동작하고 document 객체를 만날때 까지 onclick 핸들러가 동작합니다.
거의 모든 이벤트는 버블링 된다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다.
캡처링
캡쳐링 단계 - 이벤트가 하위요소로 전파되는 관계 타킷 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
스코프
스코프란 ‘변수에 접근할 수 있는 범위’ global, local 이 있다.
전역 스코프란 말 그대로 전역에 선언되어 있어 해당변수에 접근할 수 있다는 의미 지역 스코프란 해당 지역에서만 접근 할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.
함수를 선언할 때 마다 새로운 스코프를 생설하게 된다.
프로토타입
class를 대신해 존재한다. 그러므로 상속 기능이 없다. 보통 프로토 타입을 가반으로 상속을 흉내내도록 구현해 사용한다.
function Person(){}
var a = new Person();
person 이라는 함수가 생성되고 Person.prototype 이라는 빈 object가 어딘가 존재하고, 이함수로 부터 생성된 객체(a)들은 어딘가 존제하는 object에 들어있는 값을 모두 가저다 쓸쑤 있습니다.
shadow DOM
Dom은 html 의 구조적인 표현이다. 이것은 브라우저가 페이지에 무엇을 렌더링 할지 결정하기위해, 자바스크립트 프로그램이 페이지의 콘텐츠 및 구조, 스타일을 수정하기 위해 사용된다.
shadow dom 은 원래의 dom 트리에서 완전히 분리되고, 외부의 노출되지 않는, 고유의 요소와 스타일을 가진 dom 트리이다.
특징
- 외부의 style은 적용되지 않는다.
- shadow dom을 추가하거나 접근하기 위해섣는 별도의 방뻡이 필요하다.
- 데코레이터에서 만들어진 shadow dom은 스크립트로 접근, 수정 불가.
- 커스텀 엘리먼트로 만들어진 shadow dom은 스크립트로 수정 가능.
- 일반적인 dom은 트리가 렌더링된 후 dom 트리가 수정되서 비용이크지만, shadow dom은 shadow host를 만난느 순간 렌더링 되기 따문에 비용을 줄일 수 있다.
strict
ES5 “use strict” 암묵적인 “느슨한 모드”를 해제하고, JS의 제한된버전을 선택함으로써 런타임 시, js 코드에 대해, 향후 버전의 ECMA script 에서 사용될 수 있는 일부 구문의 제외하는 등 보다 엄격한 parsing 및 error handling을 자발적으로 시행하도록 적용함으로써 일반적인 코딩 실수나 안전하지 않은 동작을 포착하는 엄격 모드 사용 방법
전역으로 사용 할 수도 있고, 함수 내에서 적용 할 수도 있다.
참고
-
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
- https://medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023
- https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
- https://m.blog.naver.com/on21life/221654555798
Comments