본문 바로가기
반응형

전체 글276

JavaScript String startsWith, 특정문자열 시작하는지 체크 1. String startsWith란 무엇인가? startsWith()는 문자열이 지정된 문자열의 문자로 시작하는 경우 true를 반환합니다. 그렇지 않으면 false가 반환됩니다. 다음은 startsWith() 메서드의 구문을 보여줍니다. String.startsWith(searchString [,position]) 2. Arguments searchString은 이 문자열의 시작 부분에서 검색할 문자입니다. position은 searchString을 검색할 시작 위치를 결정하는 선택적 매개변수입니다. 기본값은 0입니다. 3. String startsWith() 사용법 다음과 같이 title이라는 문자열이 있다고 가정합니다. const title = 'Jack and Jill Went Up the H.. 2022. 7. 7.
JavaScript Object.is() 사용방법 1. JavaScript Object.is() 무엇인가? Object.is()는 두 가지 차이점이 있는 === 연산자처럼 작동합니다. -0 and +0 NaN 2. Negative zero === 연산자는 -0과 +0이 같은 값으로 취급됩니다. let amount = +0, volume = -0; console.log(volume === amount); Output: true 그러나 Object.is()는 +0과 -0을 다른 값으로 취급합니다. 예를 들어: let amount = +0, volume = -0; console.log(Object.is(amount, volume)); Output: false 3. NaN === 연산자는 NaN과 NaN이 다른 값이라고 간주합니다. NaN은 자신과 같지 않은 .. 2022. 7. 7.
JavaScript Object.assign() 사용방법 1. JavaScript Object.assign() 무엇인가? 다음은 Object.assign() 메서드의 구문을 보여줍니다. Object.assign(target, ...sources) Object.assign()은 소스 개체에서 대상 개체로 모든 열거 가능한 속성과 자체 속성을 복사합니다. 대상 객체를 반환합니다. Object.assign()은 소스 개체의 getter와 대상의 setter를 호출합니다. 새 속성을 복사하거나 정의하지 않고 속성만 할당합니다. 2. Object.assign()을 사용하여 객체 복제하기 다음 예제에서는 Object.assign() 메서드를 사용하여 개체를 복제합니다. let widget = { color: 'red' }; let clonedWidget = Object... 2022. 7. 7.
JavaScript Array findIndex() 사용방법 1. JavaScript Array findIndex() 란 무엇인가? ES6은 findIndex()라는 새로운 메소드를 Array.prototype에 추가했습니다. 이를 통해 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소를 찾을 수 있습니다. findIndex() 메서드는 테스트 기능을 충족하는 요소의 인덱스를 반환하거나 테스트를 통과한 요소가 없으면 -1을 반환합니다. 다음은 findIndex() 메서드의 구문을 보여줍니다. findIndex(testFn(element[, index[, array]])[, thisArg]) findIndex()는 두 개의 인수를 취합니다. 1) testFn testFn은 요소가 발견되었음을 나타내는 true를 반환할 때까지 배열의 각 요소에 대해 실행하는 함수입.. 2022. 7. 7.
JavaScript Array find() 함수 사용법 1. Array find() 란 무엇인가? ES5에서 배열의 요소를 찾으려면 indexOf() 또는 lastIndexOf() 메서드를 사용합니다. 그러나 이러한 메서드는 일치하는 첫 번째 요소의 인덱스만 반환하기 때문에 매우 제한적입니다. ES6에서는 Array.prototype 객체에 find()라는 새로운 메서드가 추가되었습니다. find() 메서드는 제공된 함수를 충족하는 배열의 첫 번째 요소를 반환합니다. 다음은 find() 메서드의 구문을 보여줍니다. find(callback(element[, index[, array]])[, thisArg]) 2. Arguments find()는 콜백 함수와 콜백 함수 내에서 this에 사용할 선택적 값의 두 인수를 허용합니다. 1) callback 콜백은 배.. 2022. 7. 7.
JavaScript Array.from()란 무엇인가? 1. JavaScript 배열 Array.from() 메서드 소개 ES5에서 배열과 유사한 객체에서 배열을 생성하려면 모든 배열 요소를 반복하고 다음과 같이 중간 배열에 각 요소를 추가합니다. function arrayFromArgs() { var results = []; for (var i = 0; i < arguments.length; i++) { results.push(arguments[i]); } return results; } var fruits = arrayFromArgs('Apple', 'Orange', 'Banana'); console.log(fruits); Output: [ 'Apple', 'Orange', 'Banana' ] 더 간결하게 만들기 위해 다음과 같이 Array.prototy.. 2022. 7. 6.
JavaScript Array.of()란 무엇인가? 1. Array.of() 메서드 소개 ES5에서 배열 생성자에 숫자를 전달하면 JavaScript는 길이가 숫자와 동일한 배열을 생성합니다. 예를 들면 다음과 같습니다. let numbers = new Array(2); console.log(numbers.length); // 2 console.log(numbers[0]); // undefined 그러나 Array 생성자에 숫자가 아닌 값을 전달하면 JavaScript는 해당 값을 가진 하나의 요소를 포함하는 배열을 만듭니다. 예를 들면 다음과 같습니다. numbers = new Array("2"); console.log(numbers.length); // 1 console.log(numbers[0]); // "2" 이 동작은 Array 생성자에 전달하는.. 2022. 7. 6.
JavaScript Set object란 무엇인가? 1. JavaScript Set object란? ES6은 모든 유형의 고유 값 모음을 저장하는 Set이라는 새로운 유형을 제공합니다. 새 빈 집합을 만들려면 다음 구문을 사용합니다. let setObject = new Set(); Set 생성자는 또한 선택적 반복 가능한 객체를 허용합니다. 반복 가능한 객체를 Set 생성자에 전달하면 반복 가능한 객체의 모든 요소가 새 집합에 추가됩니다. let setObject = new Set(iterableObject); 2. Useful Set methods 유용한 Set 메소드 Set 개체는 다음과 같은 유용한 메서드를 제공합니다. add(value) – 지정된 값을 가진 새 요소를 집합에 추가합니다. Set 개체를 반환하므로 이 메서드를 다른 Set 메서드와 .. 2022. 7. 6.
JavaScript Map 이란 무엇인가? 1. JavaScript Map 객체 소개 ES6 이전에는 키를 모든 유형의 값에 매핑하여 맵을 에뮬레이트하기 위해 객체를 자주 사용했습니다. 그러나 객체를 지도로 사용하면 몇 가지 부작용이 있습니다. 객체에는 항상 프로토타입과 같은 기본 키가 있습니다. 객체의 키는 문자열 또는 기호여야 하며 객체를 키로 사용할 수 없습니다. 개체에는 지도의 크기를 나타내는 속성이 없습니다. ES6은 이러한 결함을 해결하는 Map이라는 새로운 컬렉션 유형을 제공합니다. 정의에 따라 Map 객체는 모든 유형의 값을 키 또는 값으로 사용할 수 있는 키-값 쌍을 보유합니다. 또한 Map 객체는 키의 원래 삽입 순서를 기억합니다. 새 맵을 만들려면 다음 구문을 사용합니다. let map = new Map([iterable]);.. 2022. 7. 6.
JavaScript Promise Error Handling Promise Error Handling Promise를 반환하는 getUserById()라는 함수가 있다고 가정합니다. function getUserById(id) { return new Promise((resolve, reject) => { resolve({ id: id, username: 'admin' }); }); } Normal error 먼저 getUserById() 함수를 변경하여 promise 외부에서 오류를 발생시킵니다. function getUserById(id) { if (typeof id !== 'number' || id { resolve({ id: id, username: 'admin' }); }); } 둘째, then() 및 catch() 메서드를 모두 사용하여 약속을 처리합니다.. 2022. 7. 5.
JavaScript Promise Chaining(Promise 연쇄사용법) Introduction to the JavaScript promise chaining(promise chaining 란?) 경우에 따라 다음 작업이 이전 단계의 결과로 시작되는 두 개 이상의 관련된 비동기 작업을 실행하려고 합니다. 예를 들어: 먼저 3초 후에 숫자 10으로 확인되는 새 약속을 만듭니다. let p = new Promise((resolve, reject) => { setTimeout(() => { resolve(10); }, 3 * 100); }); setTimeout() 함수는 비동기 작업을 시뮬레이션합니다. 그런 다음 약속의 then() 메서드를 호출합니다. p.then((result) => { console.log(result); return result * 2; }); then().. 2022. 7. 5.
JavaScript Promises 무엇인가? Why JavaScript promises(promises 무엇인가?) 다음 예제는 사용자 객체 목록을 반환하는 getUsers() 함수를 정의합니다. function getUsers() { return [ { username: 'john', email: 'john@test.com' }, { username: 'jane', email: 'jane@test.com' }, ]; } 각 사용자 개체에는 username과 email의 두 가지 속성이 있습니다. getUsers() 함수에서 반환된 사용자 목록에서 사용자 이름으로 사용자를 찾으려면 다음과 같이 findUser() 함수를 사용할 수 있습니다. function findUser(username) { const users = getUsers(); cons.. 2022. 7. 4.
JavaScript yield란 무엇인가? Introduction to the JavaScript yield keyword(yield 키워드 소개) yield 키워드를 사용하면 생성기 함수(function*)를 일시 중지하고 다시 시작할 수 있습니다. 다음은 yield 키워드의 구문을 보여줍니다. [variable_name] = yield [expression]; 이 구문에서: 표현식은 반복 프로토콜을 통해 생성기 함수에서 반환할 값을 지정합니다. 표현식을 생략하면 yield는 undefined를 반환합니다. variable_name은 iterator 객체의 next() 메서드에 전달된 선택적 값을 저장합니다. JavaScript yield examples(예제) yield 키워드를 사용하는 몇 가지 예를 들어보겠습니다. 1. Returning .. 2022. 7. 2.
[JavaScript] JavaScript Generators(자바스크립트 생성기) Introduction to JavaScript Generators (JavaScript 생성기 소개) JavaScript에서는 실행 후 완료 모델을 기반으로 일반 함수가 실행됩니다. 중간에 일시 중지할 수 없으며 일시 중지된 위치에서 계속됩니다. 예를들면 다음과 같습니다. function foo() { console.log('I'); console.log('cannot'); console.log('pause'); } foo() 함수는 위에서 아래로 실행됩니다. foo()를 종료하는 유일한 방법은 foo()에서 반환하거나 오류를 발생시키는 것입니다. foo() 함수를 다시 호출하면 위에서 아래로 실행이 시작됩니다. foo(); Output: I cannot pause ES6은 일반 함수(regular f.. 2022. 6. 30.
[JavaScript] JavaScript 반복자에 대한 필수 가이드 The Essential Guide to JavaScript Iterators (JavaScript 반복자에 대한 필수 가이드) 반복문 문제점 데이터 배열이 있는 경우에는 일반적으로 for문을 사용/반복하여 요소 위로 이동합니다.예를 들어 다음과 같습니다. let ranks = ['A', 'B', 'C']; for (let i = 0; i < ranks.length; i++) { console.log(ranks[i]); } for 루프는 변수 i를 사용하여 순위 배열의 인덱스를 추적합니다. I의 값은 I의 값이 순위 배열의 요소 수보다 적다면 루프가 실행될 때마다 증가합니다. 이 코드는 간단합니다. 그러나 다른 루프 내부의 루프를 중첩하면 복잡성이 커집니다. 또한 루프 내부의 여러 변수를 추적하는 것이 .. 2022. 6. 29.
[JavaScript] Symbol 에 대한 궁극적인 가이드(Symbol Guide) The Ultimate Guide to JavaScript Symbol (JavaScript Symbol 에 대한 궁극적인 가이드) Creating symbols ES6은 새로운 기본 유형으로 Symbol을 추가했습니다. number, boolean, null, undefined, string과 같은 다른 기본 유형과 달리 Symbol() 유형에는 리터럴 형식이 없습니다. 새 Symbol를 만들려면 다음 예제와 같이 전역 Symbol() 함수를 사용합니다. let s = Symbol('foo'); Symbol() 함수는 호출할 때마다 새로운 고유 값을 생성합니다. console.log(Symbol() === Symbol()); // false Symbol() 함수는 설명을 선택적 인수로 받아들입니다. 설.. 2022. 6. 29.
[JavaScript] When You Should Not Use Arrow Functions When You Should Not Use Arrow Functions (화살표 기능을 사용하면 안 되는 경우) 화살표 함수에는 자체 this 값과 arguments 객체가 없습니다. 따라서 이벤트 핸들러, 객체 리터럴의 메서드, 프로토타입 메서드 또는 인수 객체를 사용하는 함수가 있는 경우에는 사용하지 않아야 합니다. 1) Event handlers 다음 입력 텍스트 필드가 있다고 가정합니다. 그리고 사용자가 사용자 이름을 입력할 때 요소에 인사말 메시지를 표시하려고 합니다. 사용자가 사용자 이름을 입력하면 입력의 현재 값을 캡처하고 이를 요소에 출력합니다. const greeting = document.querySelector('#greeting'); const username = document.q.. 2022. 6. 28.
[JavaScript] JavaScript 화살표 함수(Arrow Functions) 소개 JavaScript 화살표 함수 소개 ES6 화살표 함수는 함수 표현식에 비해 더 짧은 구문을 작성할 수 있는 대안을 제공합니다. 다음 예제는 두 숫자의 합을 반환하는 함수 표현식을 정의합니다. let add = function (x, y) { return x + y; }; console.log(add(10, 20)); // 30 다음 예는 위와 동일합니다. add()함수 표현식이지만 대신 화살표 함수를 사용하십시오. let add = (x, y) => x + y; console.log(add(10, 20)); // 30; 이 예에서 화살표 함수에는 하나의 표현식이 있습니다. x + y따라서 표현식의 결과를 반환합니다. 그러나 블록 구문을 사용하는 경우 다음을 지정해야 합니다. return 예시: let.. 2022. 6. 27.
Introduction to JavaScript new.target Metaproperty JavaScript new.target 소개 ES6은 new.targetnew 연산자라는 메타 속성을 제공합니다. new.target은 new 키워드, 점, target 속성으로 구성됩니다. new.target은 모든 기능에서 사용할 수 있습니다. new.target은 주변 함수에 속한 것입니다. new.target은 함수가 함수로 실행되는지 생성자로 실행되는지 여부를 런타임에 검사하는 데 매우 유용합니다. 부모 클래스 내에서 new 연산자를 사용하여 호출된 특정 파생 클래스를 확인하는 것도 편리합니다. JavaScript 함수의 new.target Person생성자 함수: function Person(name) { this.name = name; } 다음과 같이 new 연산자를 사용하여 Person 함.. 2022. 6. 27.
JavaScript Inheritance Using extends & super extends그리고 super 사용하여 JavaScript 상속 구현 ES6 이전에는 적절한 상속을 구현하기 위해 여러 단계가 필요했습니다.가장 일반적으로 사용되는 전략 중 하나는 프로토타입 상속입니다. 다음 예시는 다음과 같습니다.Bird에서 속성을 상속합니다.Animal원형 상속 기법을 사용하여 다음을 수행합니다. function Animal(legs) { this.legs = legs; } Animal.prototype.walk = function() { console.log('walking on ' + this.legs + ' legs'); } function Bird(legs) { Animal.call(this, legs); } Bird.prototype = Object.create(Animal.. 2022. 6. 27.
JavaScript Computed Property JavaScript 계산 속성 소개 ES6에서는 괄호 안의 식을 사용할 수 있습니다.[]그런 다음 식 결과를 개체의 속성 이름으로 사용합니다. 예를 들어 다음과 같습니다. let propName = 'c'; const rank = { a: 1, b: 2, [propName]: 3, }; console.log(rank.c); // 3 이 예에서는[propName]의 계산 속성입니다.rank물건.속성명은 다음 값에서 파생됩니다.propName변수. 에 액세스 할 수 있는c의 특성rank오브젝트, JavaScript 평가propName속성 값을 반환합니다. 오브젝트 리터럴과 마찬가지로 클래스의 getter 및 setter에 대해 계산된 속성을 사용할 수 있습니다. 예를 들어 다음과 같습니다. let name .. 2022. 6. 27.
JavaScript Static Properties JavaScript 정적 속성 소개 정적 메서드와 마찬가지로 정적 속성은 클래스의 모든 인스턴스에서 공유됩니다. 스태틱 속성을 정의하려면 static키워드 뒤에 다음과 같은 속성 이름을 붙입니다. class Item { static count = 0; } 정적 속성에 액세스하려면 다음과 같습니다. console.log(Item.count); // 0 스태틱 메서드로 액세스하려면 다음과 같습니다. class Item { static count = 0; static getCount() { return Item.count; } } console.log(Item.getCount()); // 0 클래스 생성자 또는 인스턴스 메서드의 정적 속성에 액세스하려면 다음 구문을 사용합니다. className.staticP.. 2022. 6. 27.
JavaScript Static Methods JavaScript 정적 메서드 소개 정의상 정적 메서드는 해당 클래스의 인스턴스가 아닌 클래스에 바인딩됩니다.따라서 정적 방식은 도우미 또는 유틸리티 방식을 정의하는 데 유용합니다. ES6 이전에 정적 메서드를 정의하려면 클래스 생성자에 직접 추가합니다.예를 들어, 다음과 같은 데이터가 있다고 가정합니다.Person다음과 같이 입력합니다. function Person(name) { this.name = name; } Person.prototype.getName = function () { return this.name; }; Code language: JavaScript (javascript) 다음은 다음과 같은 정적 메서드를 추가합니다.createAnonymous()에게Person입력: Person... 2022. 6. 26.
JavaScript Class Expressions JavaScript 클래스 식 소개 함수와 마찬가지로 클래스에도 식 형식이 있습니다.클래스 식을 사용하면 새 클래스를 정의할 수 있습니다. 클래스 표현식에서는 다음 ID가 필요 없습니다.class키워드를 지정합니다.또한 변수 선언에서 클래스 식을 사용하여 인수로 함수에 전달할 수 있습니다. 예를 들어, 다음은 클래스 식을 정의합니다. let Person = class { constructor(name) { this.name = name; } getName() { return this.name; } } Code language: Python (python) 작동 방식. 표현 왼쪽에는Person변수.클래스 표현식에 할당되어 있습니다. 클래스 식은 다음 키워드로 시작합니다.class이어서 클래스 정의를 입력합.. 2022. 6. 26.
JavaScript Getters and Setters JavaScript getters 및 setters 소개 Person: class Person { constructor(name) { this.name = name; } } let person = new Person("John"); console.log(person.name); // John Code language: JavaScript (javascript) 그Person클래스는 속성이 있습니다.name그리고 건설업자.컨스트럭터가 초기화를 실시합니다.name속성을 문자열로 지정합니다. 가끔, 당신은 그 일을 원하지 않는다.name다음과 같이 직접 액세스해야 합니다. person.name Code language: CSS (css) 이를 위해, 여러분은 두 가지 방법을 생각해 낼 수 있습니다.name소유.. 2022. 6. 26.
JavaScript 클래스 JavaScript 클래스는 개체를 만들기 위한 Blueprint입니다.클래스는 데이터를 조작하는 데이터와 함수를 캡슐화합니다. 자바나 C#과 같은 다른 프로그래밍 언어와는 달리 JavaScript 클래스는 시제품 상속을 위한 구문설탕입니다.즉, ES6 클래스는 단지 특수 기능일 뿐입니다. Classes prior to ES6 revisited ES6 이전에 JavaScript에는 클래스 개념이 없었습니다.클래스를 모방하기 위해 다음 예시와 같이 생성자/프로토타입 패턴을 사용하는 경우가 많습니다. function Person(name) { this.name = name; } Person.prototype.getName = function () { return this.name; }; var john = .. 2022. 6. 26.
JavaScript 란? JavaScript는 웹 페이지 요소와 상호 작용하도록 설계된 프로그래밍 언어입니다.웹 브라우저에서 JavaScript는 세 가지 주요 부분으로 구성됩니다. ECMAScript는 핵심 기능을 제공합니다. 문서 객체 모델(DOM)은 웹 페이지의 요소와 상호 작용하기 위한 인터페이스를 제공합니다. Browser Object Model(BOM)은 웹 브라우저와 상호 작용하기 위한 브라우저 API를 제공합니다. JavaScript를 사용하면 웹 페이지에 인터랙티브를 추가할 수 있습니다.일반적으로 HTML 및 CSS와 함께 JavaScript를 사용하여 폼 검증, 대화형 맵 작성, 애니메이션 차트 표시 등의 웹 페이지 기능을 강화합니다. 웹 페이지가 로드되면(HTML 및 CSS 다운로드 후) 웹 브라우저의 Jav.. 2022. 6. 26.
[JavaScript] 속성(property) 값(value)으로 객체 배열을 정렬(sort)하는 방법 JavaScript에서 속성(property) 값을 기준으로 객체 배열을 정렬하는 것은 실제로 매우 쉽습니다. 이 포스트에서 우리는 자바스크립트에서 속성(property) 값을 기준으로 객체 배열을 정렬하는 방법에 대해 다룰 것입니다. JavaScript에서 속성(property) 값으로 객체 배열을 정렬하는 것은 Array.prototype.sort 메서드 덕분에 실제로 매우 간단합니다. Array.prototype.sort 배열에 있는 각 항목의 순서를 결정하기 위해 실행되는 콜백 함수를 허용하며 이것이 JavaScript에서 속성(property) 값으로 개체 배열을 정렬하는 방법을 확인하는 데 사용할 것입니다. 정렬 방법은 콜백을 제공하지 않고 배열에서 호출할 수 있습니다. 이는 알파벳순으로 정렬.. 2022. 6. 22.
[JavaScript] forEach 문 , for in 문 , for of문 목차 1. forEach 문 var arr = ["1", "2", "3"]; // ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태) arr.forEach(item => { // item 변수는 배열 각각의 요소들을 순환합니다. console.log(item); }); // forEach 함수의 원형 그대로 사용하기 arr.forEach(function(item, index, arr2) { // item : 배열 각각의 요소 // index : 배열 인덱스 // arr2 : 배열 자체(반복문 돌리는 배열을 통째로 참조해야할 경우 사용) }); 2. for...in 문 for...in문은 객체의 속성을 반복하기 위해서 열거형과 함께 사용되며, EcmaScript.. 2022. 6. 16.
[JavaScript] var, let, const 차이점을 정리해보겠습니다. 자바스크립트는 진화하고 있습니다. 하나의 결과를 갖고 여러 스타일의 코딩 방법이 사용되고, 개발자의 코드 스타일이 다르기 때문에 수많은 형태의 코드를 만들 수 있습니다. var로 기본 변수를 쭉 사용해왔지만, let/const를 알게 되었을 때 잘못된 코드를 여태 쥐어짜고 있었구나 느끼게 되었습니다. var let const에 관하여 정리된 글을 기반으로 다시 정리해보겠습니다. 목차 var를 사용하여 함수 수준 변수 선언 과거에 변수 선언을 하게 되는 가장 일반적인 방법이며, var 선언한 변수는 함수 수준입니다. 즉, 선언된 위치에 함수를 그대로 두는 한 변수는 유효하지 않게 됩니다. 예를 들면 다음과 같습니다. function foo() { var a = 23; console.log(a); } foo.. 2022. 6. 15.
반응형

티스토리툴바