Array.prototype.forEach()배열의 요소를 하나씩 순회하며 콜백함수를 반복 호출해 실행하는 함수다.항상 undefined를 리턴하며 원본 배열을 변형시키지 않는다. forEach는 순회하는 도중에 break할 수 없다. 만약 for loop 도중 멈춰야하는 일이 있을 땐 forEach를 쓸 수 없다.return을 쓰면 현재 요소를 뛰어넘을 수는 있지만 forEach문을 멈추는 것은 할 수 없다.const items = ["item1", "item2", "item3"];const copyItems = [];// for loopfor (let i = 0; i { copyItems.push(item);}); Array.prototype.map()호출한 배열의 모든 요소를 순회하며 콜백 함수를..
for ... offor (변수선언문 of 이터러블) { ... } - 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.- 내부적으로 Iterator의 next 메서드를 호출해 이터러블을 순회하며 next 메서드가 반환한 리절트 객체의 value 프로퍼티 값을 for ... of문의 변수에 할당한다. for ... infor (변수선언문 in 객체) { ... } - 객체의 모든 프로퍼티를 순회하며 열거한다.- 순회 대상 객체의 프로퍼티뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다.- Symbol을 키로한 프로퍼티는 열거하지 않는다.- 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며..
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..
