ES6 문법 중 정말 많이 사용하는 문법들 위주로 정리했다. let, const keywordlet, const, var 키워드에 대해서는 따로 자세하게 정리할 예정이다.간단하게 살펴만 보자 var : 재정의와 재선언이 모두 가능하다.let : 재정의는 가능하나, 재선언은 불가능하다.const : 재정의와 재선언 모두 불가능하다.// varvar a = 2;a = 5;var a = 7;console.log(a); // 7// letlet x = 1;// let x = 2; // SyntaxError: Identifier 'x' has already been declared{ let x = 4; console.log(x); // 4}console.log(x); // 1// const{ const y ..
문서 객체 모델 문서 객체 모델(DOM)은 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법으로, Document Object Model의 약자이다. 즉, 웹 문서의 텍스트, 이미지, 표 등 모든 요소는 모두 객체이다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. h1태그입니다. p태그입니다. DOM은 body는 h1, p의 부모요소이고 h1, p는 body의 자식 요소로 구조화한다. 이 구조화된 그림을 DOM트리라고 부른다. 위의 그림에는 HTML 요소만 표현되어 있지만, DOM트리는 웹 문서의 HTML 요소만 표현하지는 않는다. HTML의 요소가 가지고 있는 텍스트, 이미지도 자식으로 간주하여 DOM트리에 표현한다. 위의..
IIFE IIFE는 '즉시 실행 함수 표현식'으로, Immediately Invoked Function Expression의 약자이다. 정의를 함과 동시에 바로 실행이 되는 함수를 말한다. 어떻게 사용하나요? 우리가 사용하는 함수 표현식은 아래와 같다. function add(a, b) { return a + b; } add(1, 5); 함수를 정의하고, 이후에 호출을 해야 함수가 실행된다. 호출을 하지 않고 함수를 바로 실행할 수 있는 방법이 바로 IIFE이다. 위의 add 함수를 아래와 같이 바꾸면 된다. (function add(a, b) { return a + b; })(); 아주 간단! 아래와 같이 화살표 함수로도 작성이 가능하다. (() => { ... }(); 익명 함수로 작성하는 것이 일반..
querySelectordocument.querySelector(selectors);document.querySelector는 'selectors'와 일치하는 문서 내의 첫 번째 element를 반환한다. 일치하는 요소가 없다면 null 반환. getElementByIddocument.getElementById(id);document.getElementById는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾아 이를 나타내는 element 객체를 반환한다. 일치하는 요소가 없다면 null 반환.id가 없는 요소에 접근하려면 querySelector를 사용한다. 차이점querySelector보다 getElementById가 더 빠르다.querySelector는 다양한 선택자를 사용할 수 있다. (ge..
