언어/JavaScript

[JavaScript]ES5와 ES6의 차이(6) - Destructuring Assignment

ES5와 ES6의 차이(6) - Destructuring Assignment Destructuring Assignment(디스트럭처링 할당) Destructuring이란 비구조화, 파괴를 뜻하는 단어이며 객체나 배열에 사용해서 개별 변수에 할당하는 것임! 오른쪽에 존재하는 자료구조를 파괴하여 왼쪽에 있는 변수들에 각각 할당함!!! 그래서 디스트럭처링인듯??? 배열은 순서를 중요하게 여기고, 객체는 키값을 중요하게 여김(순서바뀌어도 된다는 뜻)

[JavaScript]ES5와 ES6의 차이(5) - Concise Method, Spread

ES5와 ES6의 차이(5) - Concise Method, Spread Concise Method 함수 선언을 더 간편하게! Spread 객체 또는 배열의 복사, 객체에 속성 추가, 배열에 요소 추가를 아주 편하게!!

[JavaScript]ES5와 ES6의 차이(4) - Default Parameter, Rest Parameter

ES5와 ES6의 차이(4) - Default Parameter, Rest Parameter Default Parameter argument 입력받을 때 =으로 초기화해줄 수 있음 Rest Parameter ES6으로 넘어오면서 가변 매개 변수 쌉가능! ...을 이용해주면 됨!!

[JavaScript]ES5와 ES6의 차이(3) - 배열 관련

ES5와 ES6의 차이(3) 배열 관련 다양한 for문이 등장(for of문, forEach문) 배열.map() 메서드 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함!

[JavaScript]ES5와 ES6의 차이(2) - 익명 함수

ES5와 ES6의 차이(2) 익명 함수 그렇다면 인자를 전달받는 경우에는??? - 위 코드의 밑 부분처럼 (익명함수)(arg1, arg2) 이렇게 하면 됨!!! setTimeout() 메서드

[JavaScript]ES5와 ES6의 차이(1) - 변수와 함수

ES5와 ES6의 차이(1) 변수 ES5 ES6 let과 const의 등장! 함수 ES5 ES6 arrow function의 등장

[JavaScript]DOM의 사용법

문서 객체 생성하는 방법 var header = document.createElement('h2'); // 태그 생성 var textNode = document.createTextNode('Hello'); // 'Hello'라는 문자열 생성 header.appendChild(textNode); // 태그에 textNode를 append document.body.appendChild(header); // 문서(document)의 에 문자열이 들어간 태그를 append 주석으로 달아놓은 것을 보면 알 수 있듯이 이렇게 동적으로 문서객체를 생성할 수 있음!!! 문서 객체 lookup하는 방법 id 속성 var takeElement = document.getElementById("id명"); id가 'id명'인..

[JavaScript]DOM(Document Object Model)

DOM(Document Object Model)이란??? DOM이 무엇의 약자인가 보면 Document Object Model의 약자이다. 그대로 해석하면 '문서 객체 모델'이라는 뜻인데 이게 뭐냐고 그래서 ㅋㅋㅋㅋㅋㅋ 이 문서 객체라는 것은 등의 html 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 문서 객체라고 함! 그리고 DOM은 이 문서 객체를 해석하는 방식? 인식하는 방식??? 이라고 보면 된다고 함! 그니까 웹브라우저가 HTML을 인식하는 방식이라고 생각하면 됨! DOM으로 뭐하는건데 그래서? DOM은 이런 트리 형식의 자료구조를 가지고 있음 트리는 맨 위에 있는 애가 루트 노드(root node), 그 아래에 있는 애들이 차일드 노드(child node) 그..