본문 바로가기

Language/JavaScript16

[JS] Set 객체 Set 객체 1. 중복되지 않는 유일한 값들의 집합을 말합니다. 2. Set 객체는 이터러블입니다. 따라서 for...of 문으로 순회가 가능하며 스프레드 문법과 배열 디스트럭처링의 대상이 될 수 있습니다. 3. Set 객체는 수학적 집합을 구현하기 위한 자료구조입니다. 따라서 Set 객체를 통해 교집합, 합집합, 차집합, 부분집합 등을 구현할 수 있습니다. 요소 개수 확인 Set.prototype.size Set 객체에서 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용합니다. size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 프로퍼티로 외부에서 수정이 불가능합니다. 요소 추가 Set.prototype.add Set 객체에서 요소를 추가할 때는 Set.pr.. 2021. 8. 19.
[JS] Map 객체 Map 객체는 이터러블 따라서 for...of로 순회할 수 있으며, 스프레드 문법과 구조분해 할당이 가능합니다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 symbol 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성합니다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 합니다. const map = new Map ([['a', 1], ['b' ,2], ['c',3]]) for(const a of map.keys()) console.log(a) // a, b, c for(const a of map.values()) cons.. 2021. 8. 18.
[JS] 타입 변환 타입 변환이란? 자바스크립트의 모든 값은 타입을 가집니다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있는데 이를 명시적 타입 변환 또는 타입 캐스팅이라고 합니다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 합니다. let x = 100 // 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성 let str = x + '' console.log(typeof str, str) // string 100 // x 변수의 값이 변경된 것은 아니다 console.log(typeof x, x) // number 100 타입변환이란, 기존 원시 값을 사용해.. 2021. 8. 11.
[JS] Window, DOM, BOM 주요 BOM 객체 Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소의 최상위 객체 Document 웹 문서에서 태그를 만나면 만들어지는 객체 HTML 문서 정보를 가지고 있다 Frames 현재 브라우저 창의 모든 하위 프레임을 배열과 같은 객체로 나열 History 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체 Location 현재 페이지에 대한 URL 정보를 가지고 있는 객체 Navigator 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체 Screen 현재 사용 중인 화면 정보를 다루는 객체 Window 자바스크립트의 Window 객체는 웹 브라우저 상태를 제어하는 객체로, 자바스크립트 객체 중 최상위이자 기본이 되는 객체입니다 Windo.. 2021. 7. 8.
[JS] 호이스팅이란? 호이스팅 (hoisting) Javascript에서의 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이는 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행될 수 있다 함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상위로 함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는 스크립트 단위의 최상위로 끌어올려진다 -> 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 var, let, const의 변수 선언과 특징 var var는 한번 선언된 변수를 다시 선언할 수 있다 var name = 'Mike' console.log(name) // Mike var name = 'Jane' console.log(.. 2021. 7. 7.
[JS] Promise란? Promise 프로미스는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체 정해진 시간의 기능을 수행하고 정상적으로 기능이 수행이 됐다면 성공의 메세지와 함께 처리된 결과값을 전달 기능을 수행하다가 예상치 못한 문제가 발생했다면 Error를 전달 State : pending(보류) -> fulfilled(이행) or rejected(거부) Promise는 클래스이기 때문에 new라는 키워드를 이용해서 Object를 생성할 수 있다 const promise = new Promise() Promise의 Constructor안을 보면 executor라는 콜백 함수를 전달해 줘야하고 이 콜백 함수에는 또 다른 두 가지의 콜백 함수를 받는다 -> 새 Promise가 생성되면 executo.. 2021. 7. 2.
[JS] undefined, null undefined은 변수를 선언하고 값을 할당하지 않은 상태 null은 변수를 선언하고 빈 값을 할당한 상태 즉, undefined는 자료형이 없는 상태 (독립 자료형이 존재) 자료형 ❓ 1. 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다 2. bigint – 길이 제약 없이 정수를 나타낼 수 있습니다 3. 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다 4. 불린형 – true, false를 나타낼 때 사용합니다 5. null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다 6. undefined – undefined 값만을 위한 독립 자료.. 2021. 6. 24.
[JS] Iterable object, Array-like object Iterable 객체 (= 반복 가능 객체) iterable 객체란 for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체를 의미 배열(Array) 객체는 내장 iterable 객체이기 때문에 for ... of 문법을 이용하여 각 요소를 반복할 수 있다 또한 String 객체, Map 객체, Set 객체도 내장 iterable 객체이다 다음과 같은 조건을 만족하면 배열이 아닌 일반적인 객체도 iterable 객체가 될 수 있다 - 이름이 Symbol.iterator인 메소드를 정의해야 한다(혹은 상위 프로토타입 체인에서 상속받아야 한다) - 해당 메소드는 인자가 없으며, iterator 객체를 반환해야 한다 iterable 객체의 Symbol.iterator 메소드가 반환하는 객체는 .. 2021. 6. 23.
[JS] ES6 특징 ECMAScript란? ES는 자바스크립트를 이루는 코어(Core)스크립트 언어로써, 다양한 환경에서 운용될 수 있게 확장성을 갖고 있기때문에 사용처가 웹환경으로 국한되어 있지는 않습니다. 자바스크립트는 웹브라우저에서 돌아갈 수 있도록 BOM과 DOM을 함께 사용하는 확장성이 됩니다. 이러한 확장성들은 ES 버전에 따른 문법과 기능의 확장을 가능하게 합니다. DOM (Document Object Model) : 문서 객체 모델 문서 객체 모델은 객체지향 모델로써 구조화된 문서를 표현하는 형식입니다 -> 문서, 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리합니다 BOM (Browser Object Model) : 브라우저 객체 BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델입니다.. 2021. 6. 22.
[JS] 프로토타입과 클래스 객체 생성자 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게함 인스턴스가 초기화될 때 실행하는 생성자 함수 function Animal(type, name, sound) { // 생성자 constructor this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } let dog = new Animal('개', '멍멍이', '멍멍') // 인스턴스 instance let cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); // 멍멍 cat.say(); // 야옹 객체 생성자를 사.. 2021. 2. 26.
[JS] OOP OOP (Object Oriented Programming) 배경 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 불림 (C, 포트란 등) 절차적 언어는 순차적인 명령의 조합 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식으로 바뀜 데이터와 기능이 별개로 취급되지 않고, 한번에 묶어서 처리가 가능해짐 특징과 의미 프로그램 설계 철학 모든 것은 '객체'로 그룹화 됨 재사용성을 얻을 수 있음 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론 클래스와 인스턴스 클래스는 일종의 원형(original form)으로, 객체를 생성하기 위한 청사진 인스턴스는 클래스의 사례 클래스는 객체를 만들기 위한 생성자(constructor) .. 2021. 2. 26.
[JS] 구조 분해 객체 구조 분해 구조 분해 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언이 가능합니다. const obj = {a: 1, b: 2 }; const {a, b} = obj; console.log(a); // 1 console.log(b); // 2 함수의 파라미터에서도 구조 분해를 할 수 있습니다 let obj = {a: 1, b: 2}; function print({ a, b}) { console.log(a) console.log(b) } print(obj); // 1 // 2 만약 b값이 주어지지 않았다고 가정한다면 두 번째 출력에서 undefined가 나타납니다 let obj = { a: 1}; function print({ a, b}) { console.lo.. 2021. 2. 25.

티스토리툴바