-

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객체에 포..

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

값에 의한 전달 (Copy by Value)값에 의한 전달기본적으로 모든 primitive 값은 copy by value원본 데이터와 복사본의 데이터가 서로 따로 제어 됨let origin = 'hi'let clone = originclone +=' john'console.log(origin); // hiconsole.log(clone); // hi john참조에 의한 전달(Copy by Reference)참조에 의한 전달원본 데이터와 복사본의 데이터가 같이 제어 됨const newObj = { name :'john'}originObj.name = 'Mike'console.log(originObj.name); // Mikeconsole.log(cloneObj.name); // Mikeconsole.l..

데이터 분류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..

문자열 길이이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용메서드설명결과문자열.length문자열의 길이정수Array.from(문자열).length문자열의 길이정수 '😋'.lengthArray.from('😀').length // ⇒ 1문자열 길이형식문자열이 지정한 길이가 될 때까지 작업을 반복지정한 길이가 실제 문자열 길이보다 짧은 경우 변한없이 기존 문자 반환추가문자열 생략하면 공백으로 입력메서드설명결과문자열.padStart(전체길이, [추가문자열])해당 문자열의 시작부터 전체길이가 될때까지 추가 문자열을 반복문자문자열.padEnd(전체길이, [추가문자열])해당 문자열의 끝부터 전체길이가..

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..