-

스프레드 연산자(spread operator)0개 이상의 인수 (함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식이나 문자열과 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장 가능ES6이상 사용 가능/* [구문] */[...배열 또는 문자열]// 반환object스프레드 연산자 활용1. 배열의 결합스프레드 문법을 활용하여 배열 결합 가능const list1 = ['a', 'b', 'c'];const list2 = ['e', 'f', 'g'];const total = [...list1, ...list2];console.log(total); // ⇒ [ 'a', 'b', 'c', 'e', 'f', 'g' ]const str..

Array.from()ES6에서 새로 생긴 메서드배열처럼 보이지만 배열이 아닌 객체를 받아 실제 배열로 반환유사배열을 배열로 변환하여 배열의 메서드 활용 문자열을 받아 각각의 배열로 변환 가능/* [구문] */Array.from(유사배열객체)// 반환object a b c;const list = document.querySelectorAll('.list li'); // Nodelist 객체// Array.from을 통해 배열로 변환하고, 두번째 인수를 활용하여 배열의 map 함수와 동일한 기능 적용 가능const listArr = Array.from(list, val => { return val.textContent;});console.log(listArr); // ⇒ (3) ['a', 'b', ..

디스트럭처링 (Destructuring)디스트럭처링 할당 문법이란 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식을 의미변수로 선언 됨을 인지하여 따옴표를 사용하지 않도록 유의객체 디스트럭처링{ } 를 활용하여 조금 더 간결하게 변수 생성 가능디스트럭처링을 활용하여 객체의 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능/* 형식 */const {객체의 속성 이름, 객체의 속성 이름 } = 객체명 const person = { name : 'John', age : 20, links: { website: { google : 'http://www.google.com' } }}// ES6const { name, age } = person;con..

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

name을 활용 Form 제어name을 활용한 폼 제어 시에는 form 뿐만 아니라 접근하려는 form 요소에 name값을 지정해야 함 Name 배열을 활용한 Form 제어폼 요소의 배열을 사용하여 접근하는 경우, form에 접근은 forms, 요소에 접근은 elements를 사용 docuent.forms[0].elements[0].value select 요소 접근 // 배열 활용 select옵션 접근document.폼 이름.폼 요소이름.options[인덱스]document.폼 이름.폼 요소이름.options[인덱스].value// 선태된 select indexdocument.폼 이름.폼 요소이름.options.seletedIndexdocument.폼 이름.폼 요소이름.options[폼요소이름.sel..

addEventListener() 함수이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수 document 객체, window 객체, 웹 문서, 이미지, 텍스트 등 어디에서든 사용 가능 다중 이벤트 한 번에 처리 대상.add 이벤트 유형 : 처리할 이벤트 유형을 지정, 'on'을 붙이지 않고, 'click', 'mouseover'와 같은 이벤트 이름만 사용 가능함수 : 이벤트가 발생했을 때 실행할 명령을 나열하거나 함수 이름을 지정캡쳐여부 : 이벤트를 캡쳐링하는지 여부를 지정, 생략가능 , true이면 캡처링, false(기본값) 이면 버블링이벤트 캡처링 : DOM의 부모노드에서 자식 노드로 이벤트가 전달이벤트 버블링 : DOM의 자식노드에서 부모노드로 이벤트가 전달

시맨틱 태그HTML5에서는 시맨틱 태그를 사용하여 의미 있는 코드를 작성시맨틱 태그 장점웹 접근성을 개선 : 스크린 리더로 페이지를 읽을 때 보다 필요한 정보에 수월하게 접근 가능검색 엔진 최적화 : 검색 엔진이 태그만 보고도 사이트 내용을 분석하여 카테고리화 한 정보를 보여줘, 사용자의 이용에 도움을 줌유지보수와 가독성 용이 : 시맨틱 태그로 구분되어 소스 가독성 향상 nav문서의 메인 메뉴나 목차 등을 정의모든 내비게이션이 아닌 페이지 주요 내비게이션 링크들만 선언하는 것이 좋음footer안에서 nav 사용은 불필요사이트 전반전인 이동을 위한 내비게이션과 페이지 전체를 이동하는 내비게이션을 각각 기술할 수 있음인라인, 블록 요소 모두 포함 가능section문서의 맥락이 같은 요소들을 주제별로 그룹회해..

데이터 분류1. 원시 타입(Primitive Type)원형데이터로 더 이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태Boolean, String, Number, Undefined, Null, Symbol2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외한 모든 타입이 포함원형 데이터가 아닌 다른 데이터를 참조하는 데이터Array, Object, Date...데이터 타입 종류타입설명number숫자로 된 자료형- 정수와 실수 구분없이 모든 숫자 자료형을 number로 간주string문자열로 된 자료형boolean- true: any other value- false : 0, null, undefined, NaNnull명확하게 빈 값인 경우 ※ type은 object 에 ..

배열자바스크립트의 기본 데이터 타입 객체의 한 종류[] 안에 데이터 입력배열의 요소는 자료형에 제한이 없음 (boolean, 숫자, 문자열, 배열, 객체 등을 가질 수 있음객체와는 달리 데이터를 요소로만 저장하는 형태 배열 초기화// 빈 배열const arr1 = []// 데이터가 있는 배열 정의const arr2 = [2,3,1]// 배열 안에 배열 정의const arr3 = [[11,22], [33,44]]// 배열 안에 객체 정의const arr4 = [{name :'a'}, {name:'b'}]// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)const arr5 = new Array('1', '2')배열 요소 접근메서드설명반환배열[해당 요소의 ind..