Front-end/JavaScript

Front-end/JavaScript

[JavaScript] innerHTML, innerText, textContent 차이점

innerHTML 요소의 내부 HTML을 포함한 모든 내용을 설정하거나 가져올 수 있다. 즉 HTML태그를 포함한 텍스트를 설정하거나 가져올 수 있다. 자바스크립트로 HTML 페이지를 동적으로 생성할 때 간편하게 내용을 추가할 수 있기 때문에 많이 사용하는 속성이다. ex) 안에 있는 HTML 전체 내용을 가져온다 innerText 요소의 렌더링된 텍스트를 설정하거나 가져온다. 즉 CSS 스타일이 적용된 상태의 텍스트를 다룬다. 비교 예시 See the Pen Untitled by qeqqer (@qeqqer) on CodePen. textContent 요소의 텍스트 내용을 설정하거나 가져올 때 HTML 태그를 해석하지 않는다. 따라서 텍스트 내용만 다룬다. HTML 태그가 필요하지 않고( 나 )텍스트만..

Front-end/JavaScript

호이스팅과 Temporal Dead Zone

호이스팅 (Hoisting) 자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 한다. 즉, 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것이다. var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. test(); function test() { console.log("test."; } //result: "test." TDZ (Temporal Dead Zone) TDZ는 일시적인 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다. TDZ에 있는 값에 접근하게 되면 ReferenceError: Cannot access 'xxx' befo..

Front-end/JavaScript

[JavaScript] var, let, const의 차이점

var, let, const 차이점 5가지 Preview중복선언 가능 여부재할당 가능 여부변수 스코프 유효범위 (유효한 참조 범위)변수 호이스팅 방식전역객체 프로퍼티 여부 varletconst중복 선언OXX값의 재할당OOXScopefunction-levelblock-levelblock-level변수 호이스팅발생발생발생전역객체의 프로퍼티OXX1. 중복선언 가능 여부var: 중복 선언이 가능//1st var declare & initializevar a = 10;console.log(a) //10//2nd var declare & initializevar a = 20;console.log(a) //20//3rd var declarevar a;console.log(a) //20var로 선언한 변수는 중복해서 ..

Front-end/JavaScript

const도 수정할 수 있다?

분명 const는 재선언, 재할당이 안된다고 했는데 어째서 수정이 가능하다고 하는거지? const arr = ['a', 'b', 'c', 'd', 'e']; arr = ['111', '222']; //TypeError 위와 같이 const인 arr 전체를 재할당 하는 것은 불가능 하다. 하지만 이런식으로 배열 내부 요소를 수정하는 것은 가능하다. const arr = ['a', 'b', 'c', 'd', 'e']; arr[0] = '111'; console.log(arr); //['111', 'b', 'c', 'd', 'e']; const는 어떤 경우에도 새로운 값을 할당하지는 못한다. 그러나 const에 객체가 할당되면 객체 내부의 속성이나 배열의 요소는 수정할 수 있다.

_dawn_
'Front-end/JavaScript' 카테고리의 글 목록 (3 Page)