프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

주는 파일(Export) /** * CommonJS (Export) */ function Person(name, age, location) { this.name = name; this.age = age; this.location = location; this.getName = function () { return this.name + '입니다'; }; } module.exports = Person; 받는 파일(Import) - require 을 사용한다. /** * CommonJS (Import) */ const Person = require('./02-CommonJS-person'); const me = new Person('jang', 10, 'Korea'); const you = new Person..

- 어떠한 객체가 만들어지기 위해 객체의 모태가 되는 원형 - 자바스크립트는 일반적인 객체지향 언어와는 다르게, 프로토타입을 이용한 복사를 통해 새로운 객체 생성 - 일반적인 객체 생성 방식 : 속성은 생성자, 메서드는 프로토타입에서 정의 // 생성자 속성 정의 function Person(name, age) { this.name = name; this.age = age; }; // prototype을 이용한 Person 메서드 정의 Person.prototype.isAdult = function() { return this.age > 18; }; // 객체 생성 const p1 = new Person("kitty", 22); const p2 = new Person("james", 18); console..

classList.contains(string) 해당 요소의 클래스의 유무를 확인하여 true / false 로 구분 장바구니 책상 의자 노트북 필통 교과서 공책 장바구니라는 목록을 만들었는데 ul 목록을 이용하여 정렬 하였다. click이벤트를 적용하려 하는데 부모인 ul에 class="classN1" 을 지정하였다. classN1을 querySelector로 전부 지정을 하고 이름을 items로 하겠다. 그리고 items에 addEventListener를 이용하여 click 이벤트를 걸도록 하겠다. event의 속성에 대해 알아보기 위해 제일 처음 event의 dir을 알아보고 그 안에 target이 있다는 것을 알아냈다. 그리고 target 안에는 classList가 있다는 것을 알아냈다. 여기서 ..

거듭제곱 Math.pow(base, exponent); console.log(Math.pow(2, 3)); // output: 8 console.log(Math.pow(4, 0.5)); // output: 2 console.log(Math.pow(6, -2)); // output: 0.027777777777777776 // (1/36) console.log(Math.pow(-7, 0.5)); // output: NaN 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/pow 제곱근 Math.sqrt(x) 숫자가 음수이면 NaN을 반환한다. Math.sqrt(9); // 3 Math.sqrt(2); ..

함수를 사용하여 오름차순, 내림차순을 하는 이유는 array의 값들이 한자리 숫자가 아닐 경우엔 앞자리 숫자만을 비교하기 때문에 정렬이 제대로 안되기 때문이다. 오름차순 let array = [30, 48, 20, 1, 158, 15]; let result = array.sort((a,b) => a - b); console.log(result); 내림차순 let array = [30, 48, 20, 1, 158, 15]; let result = array.sort((a,b) => b - a); console.log(result);

배열 내 모든 요소가 콜백 함수의 조건을 만족한다면 true, 아니면 false 반환 빈 배열일 경우 true Array.every(function(item, index, array){}) item : 배열 요소 index : 배열 위치 array : 배열 let users = [ {name : "bob", age : 17, job : false}, {name : "hi", age : 27, job : false}, {name : "sky", age : 21, job : true}, ]; let some_job = users.every(function(user) { return user.job == false; }); console.log(some_job); let some_age = users.ever..

배열 내 하나라도 콜백 함수의 조건을 만족하는 요소가 있다면 true, 아니면 false를 반환 (빈 배열일 경우 false) Array.some(function(item,index,array){}) item : 배열 요소 index : 배열 위치 array : 배열 let users = [ {name : "bob", age : 17, job : false}, {name : "hi", age : 27, job : false}, {name : "sky", age : 21, job : true}, ]; let some_job = users.some(function(user) { return user.job == false; }); console.log(some_job); let some_age = users..

Array.from() 유사배열객체나 반복가능객체를 얕은 복사하여 새로운 배열 객체를 만들어 준다. 유사배열객체(Array-like object) : length 속성과 index element를 가지는 객체 반복가능객체(Iterable object) : 배열을 일반화한 객체 ex) Map, Set HTML 삽입 미리보기할 수 없는 소스 전개 연산자 ES6의 문법으로 배열이나 문자열과 같이 반복 가능한 객체를 하나씩 펼쳐서 리턴한다. ex) [...set] HTML 삽입 미리보기할 수 없는 소스 forEach() forEach 반복문과 push 함수를 이용하여 새로운 배열 arr에 넣어주었습니다. HTML 삽입 미리보기할 수 없는 소스

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c" of의 대상자로 array1을 주고 변수로 element를 주게되면 element로 array1의 데이터 하나하나가 들어가게 된다.

slice() 메서드는 어떤 배열의 begin부터 end까지(end미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "d..