DEV Note

문서 객체 모델 (DOM) 문서 객체 모델 (Document Object Model, DOM)은 말그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고 document를 자유롭게 다루기 위해서 객체화하고자 구현된 개념이 DOM이라고 생각할 수 있다. 그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다. 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다. document 객체는 전역 객체인 window 객체의 바로 아래에 있는데 window 객체는 앞에 window를 생략해도 되..

JavaScript의 변수 선언은 var로만 할 수 있었지만 ES6(ES2015)부터 let과 const가 추가되었다. 예전의 var가 최신의 let(변수), const(상수)로 분리 되었다고 생각할 수 있으나 내부 사정은 다르다. 여전히 var도 함께 사용할 수 있다. var, let, const 차이점 변수명 중복 선언 가능 여부 재할당 가능 여부 변수 스코프 유효범위 변수 호이스팅 방식 전역객체 프로퍼티 여부 [ 1 ] 변수명 중복 선언 var : 변수명 중복 선언이 가능하다. // 첫번째 변수 선언+초기화 var a = 10; console.log(a); // 10 // 두번째 변수 선언+초기화 var a = 20; console.log(a); // 20 // 세번째 변수 선언(초기화X) var ..

Rest Parameter (나머지 매개변수)란? 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인자(argument)들의 목록을 배열로 전달받는다. function example(a,b ...rest) { console.log(Array.isArray(rest)); //true console.log(rest); //[3, 4, 5], } example(1, 2, 3, 4, 5); 함수의 마지막 파라미터의 앞에 ...을 붙여 (사용자가 제공한) 모든 나머지 인수를 자바스크립트 배열로 대체한다. 마지막 파라미터만 Rest Parameter가 될 수 있다. function example (a, b, ...array){} //매개변수 a,b를 제외..

단축 평가 논리 계산법이란 논리 연산자를 사용해서 코드를 더 짧게 작성하는 것을 의미한다. 예제 const dog = { name: "멍멍이", }; function getName(animal) { if (animal) { return animal.name; } return undefined; } const name = getName(dog); console.log(name); // 멍멍이 위 코드는 getName 함수의 파라미터인 animal이 있으면 그 객체의 name을 출력해주고 없을 경우 undefined를 출력하는 코드이다. const dog = { name: "멍멍이", }; function getName(animal) { return animal && animal.name; } const n..

Class class는 객체를 생성하기 위한 템플릿이다. class를 통해 원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다. 쉽게 생각해 [클래스 = 붕어빵기계 , 객체 = 붕어빵]으로 생각하면 된다. class는 javascript에서 ES6이후에 생긴 개념으로 직관적으로 쉽게 코드를 읽을 수 있도록 만들어 줄 뿐만 아니라, 작성하기도 쉽고 class 기반 언어에 익숙한 개발자가 더 빠르게 적응할 수 있는 장점이 있다. class class Me { constructor(name){ this.name = name; } wow(){ console.log("WOW!"); } } let person = new Me("Jason"); person.wow() // WOW! clas..

JavaScript는 프로토타입(Prototype) 기반 언어이다. JAVA와 같은 클래스(Class) 기반 객체지향 프로그래밍 언어는 사전에 미리 클래스를 정의해두고, 필요한 시점에 new 연산자와 미리 정의해둔 클래스를 사용하여 객체(Instance)를 생성한다. 하지만 JavaScript는 프로토타입(Prototype) 기반 언어이다. 자바스크립트에는 클래스라는 개념이 없다는 소리다. 하지만 많은 개발자들은 자바스크립트로 객체 지향 프로그래밍을 하기 위해 부단한 노력을 했고, 클래스 없이(Class-less) 객체를 생성하는 여러가지 방법을 찾아냈다. 객체 리터럴 Object 생성자 함수 생성자 함수 ⚠ ES2015부터 class 키워드를 지원하기 시작했으나, 새로운 객체지향 모델을 제공하는 것이 ..

배열 관련 더 자세한 내용은 [JavaScript] - [JavaScript] #10 - 배열 (Array) [JavaScript] #10 - 배열 (Array) 배열은 같은 자료들을 담는 자료구조 중 하나이다. 객체는 어떤 개체에 대한 정보를 클래스로 틀을 만들고 그 클래스로 여러 개체들에 대한 정보를 담는것으로 배열과는 다르다. 예를들어 객체 yoonddo.tistory.com 자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적해 하나의 결과값을 반환한다. arr.reduce(callback[, initialValue]) callback function 다음 4가지의 인수를 가진다. 1. accumulator : accumulator는 callback함..

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다. 생성자가 존재하지 않아서 따로 인스턴스를 생성하지 않더라도 Math 객체의 모든 method나 property를 바로 사용할 수 있다. 함수 종류 Math.min(x,y,z....) 가장 작은 값 반환 Math.max(x,y,z....) 가장 큰 값 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.round(x) 소수점 첫 번째 자리에서 반올림 후 반환 Math.floor(x) 인수와 같거나 작은 수 중에서 가장 큰 정수 반환 Math.ceil(x) 인수와 같거나 큰 수 중에서 가장 작은 정수 반환 Math.abs(x) x의 절댓값 반환 Math.sqrt(x..

배열은 같은 자료들을 담는 자료구조 중 하나이다. 객체는 어떤 개체에 대한 정보를 클래스로 틀을 만들고 그 클래스로 여러 개체들에 대한 정보를 담는것으로 배열과는 다르다. 예를들어 객체는 사람이라는 개체에 대한 정보를 담는 틀을 클래스로 만든다고 가정하면 이름, 키, 몸무게, 성별 ..등 다양한 정보를 사람이라는 공통된 개체에 대한 정보를 클래스로 만들어 마이크, 엘리스, 존 ..등 여러 객체를 찍어낼 수 있고 다양한 자료형을 담을 수 있다. 반면 배열은 단순하게 같은 자료형의 나열이라고 보면된다. 사람이라는 객체들을 나열할 수도, 정수를 나열할 수도 있다. 자바 스크립트는 다양한 자료형을 섞어 배열에 담을 수는 있지만 되도록 사용하지 않는다. 선언 (Declaration) const arr1 = new..

Object.defineProperty() Object.defineProperty을 사용하면 프로퍼티의 속성(attribute)을 정의할 수 있으며 이를 통해 객체에 값만 저장하는 방법 이외에도 변경 가능 여부 및 열거 가능 여부 등을 설정할 수 있다. 사용법 Object.defineProperty( 대상 객체, '프로퍼티 key', {프로퍼티 디스크립터 객체}); 프로퍼티 디스크립터 객체는 프로퍼티의 속성을 나타내주는 객체이다. 코드 예시 const person = {}; // 데이터 프로퍼티의 정의 Object.defineProperty(person, 'firstname', { value: 'Hyenjae', writable: true, enumerable: true, configurable: tru..