본문 바로가기

👩🏻‍💻STUDY/JavaScript

(13)

[JavaScript] 비구조화(구조분해) 할당 보호되어 있는 글입니다.

[JavaScript] e.target , e.currentTarget e.target , e.curentTarget 차이점 결론부터 말하자면, e.target :: 실제 이벤트가 발생하는 요소 (나만 이벤트 발생) e.currentTarget :: 이벤트 리스너가 달린 요소 (자식 클릭해도 부모도 이벤트 위임) outer inner button const outer = document.getElementById('outer'); const inner = document.getElementById('inner'); const button = document.getElementById('button'); function printLog(e) { const { target, e.currentTarget } = e; console.log(`target: ${target.id}, ..

[JavaScript] 참조에 의한 객체 복사 참조에 의한 객체복사 객체와 원시타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장·할당되고 복사된다. let message = 'Hello'; let cloneMessage = message; cloneMessage = 'CloneHello'; console.log(message, cloneMessage); // Hello CloneHello 객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다. let user = { name: 'John'; } let admin = user; admin.name = ..

[JavaScript] 객체 상수객체 const로 선언된 객체는 수정 될 수 있다. const user = { name: 'John' }; user.name = 'Pete'; console.log(user.name); // Pete const는 한 번이라도 값을 할당한 변수가 변경되는 걸 막는다. 변수 user는 객체 참조 값을 저장하고 있는데, const는 이 값이 변경되는걸 막는 것이지, 객체의 내용 (프로퍼티)을 변경하는 건 막지않는다. 계산된 프로퍼티 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있을 경우, 이를 계산된 프로퍼티 (computed propery) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?', 'appl..

[JavaScript] nullish 병합 연산자 ?? nullish 병합연산자 ?? 최근에 추가됨. 스펙에 추가된지 얼마안된 문법. 구식 브라우저는 폴리필이 필요하다. nullsh 병합연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; ??와 ||의 차이 ||는 첫 번째 truthy값을 반환. ??는 첫 번째 정의된(defined) 값을 반환. null과 un..

[JavaScript] return이 하는 일 값을 반환하는데 사용. 지역변수의 값을 아는데 사용. 현재 진행중인 함수를 중지(escape). 1. 값을 반환하는데 사용 + 2. 지역변수의 값을 아는데 사용. [예제1] var test = function() { var x = 1; } test(); console.log(test()); // undefined 위의 함수는 실행되지 않는다. 내부 구문들을 실행(test())하였으나 반환할 값이 선언되지 않았다. x를 얻기 위해선 return을 사용하여 값을 반환해야 한다. var test = function() { var x = 1; return x; } var test2 = test(); console.log(test2); test() 함수를 실행할 경우 해당함수는 1을 반환한다. 반환값을 사용하기 ..

[JS] script async/defer *parsing :: https://solog4something.tistory.com/13 (+)21.10.26 추가 파싱은 해당 언어의 문법검사기라고 할 수 있다. 네트워크로 받은 HTML과 CSS 파일을 토큰화 시키고 Parse Tree를 생성한다. 이 Parse Tree를 DOM 트리로 만들어 렌더하게 된다. 하지만 HTML을 화면에 보이기 위해 파싱하는 도중에 파싱을 멈추는 경우가 발생한다. 아래 스크립트를 보자. script 자바스크립트는 *parser blocking resource(파서 차단 리소스)이다. 기본 모드로 브라우저는 문서를 파싱해 읽다가 자바스크립트를 만나면 진행하고 있었던 파싱을 멈추고, 스크립트를 다운 > 파싱 > 실행 한 후 다시 HTML 문서를 파싱하게 된다. 스크립트는 ..

[JavaScript / ES6] let, const와 블록 레벨 스코프 ES5까지 var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 하지만 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 함수 레벨 스코프(Function-level Scope) 함수의 코드 블록만 스코프 인정. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다. var 키워드 생략 허용 암묵적 전역 변수를 남발할 가능성이 크다. 변수 중복 선언 허용 의도하지 않은 변수값의 변경이 일어나 혼란을 높일 수 있다. 변수 호이스팅 변수를 선언하기 이전에 참조할 수 있다. ES6는 이러한 var 키워드의 단점을 보완하기 위해 let..

이전 1 2 다음

티스토리툴바