-

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..

const func = (x) => (x = x + 1); let a = 10; // 함수 내 처리결과는 원시 타입 변수값에 영향을 주지 않음 func(a); console.log(a); // ⇒ 10 const func2 = (x) => (x[0] = 1); let b = [0, 2, 3]; // 함수 내 참조타입의 경우 값 변경됨 func2(b); console.log(b); // ⇒ [ 100, 2, 3 ] 데이터 분류 1. 원시 타입(Primitive Type) 원형데이터로 더이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태 Boolean, String, Number, Undefined, Null, Symbol 2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외..

배열자바스크립트의 기본 데이터 타입 []안에 데이터 입력타입에 상관없이 사용 가능배열에 배열, 객체도 저장 가능배열 초기화// 빈 배열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')배열 길이 확인메서드설명결과배열.length배열 길이 반환숫자배열 요소 추가/삭제배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환메서드..

문자열 길이 이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남 4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용 메서드 설명 결과 문자열.length 문자열의 길이 정수 Array.from(문자열).length 문자열의 길이 정수 '😋'.length Array.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 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

클래스 객체 지향 프로그래밍언어에서 객체를 효율적으로 사용가능하게 하는 문법 추상화 : 프로그램에서 필요한 요소만을 사용하여 객체를 표현하는 것 객체 지향 프로그래밍 : 객체들을 정의하고 객체를 활용하여 프로그램을 만드는 것 인스턴스(객체) : 클래스를 기반으로 생성한 객체 클래스 생성 클래스를 기반으로 만든 객체를 기본적으로 인스턴스(객체)라고 부름 // [형식] 클래스 생성 class 클래스명 { // 클래스명은 대문자로 시작 } // 클래스 생성 [형식] const temp = new 클래스명 생성자 (Constructor) 객첼를 초기화하고 클래스의 속성을 설정 객체가 클래스로 부터 생성될 때 자동으로 호출 생성자 이름은 항상 constructor로 정의 생성자의 주요역할 1. 객체 초기화 : 클..

구문오류 (Syntax error) 프로그램 실행 전에 발생하는 오류 괄호, 문자열 기재 누락으로 인한 오류 예외 / 런타임 오류 오타 등으로 인해 코드 실행 중간에 발생하는 오류 자바스크립트에서 구문 오류 이외의 모든 오류는 예외로 분리(Type Error, Reference Error, Range Error) 예외 처리 기본 예외 처리 : 조건문을 사용하여 에러가 발생하지 않게 만드는 것 document.addEventListener('DOMContentLoaded', () => { const h1 = document.querySelector('h1') if (h1) { h1.textContext = 'hi' } else { // 기본 예외 처리 return 0 } }) 고급 예외 처리 : try c..