오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

어떠한 nav바를 클릭했을 시 다른 상태를 보여줘야 한다고 생각합니다. 어떻게 할 수 있을까요? 일일히 버튼이 에스프레소 버튼, 프라푸치노 버튼이 클릭될 때마다 이벤트를 줘야할까요? $('americano').addEventListener('click', e => { ... }) $('frappuccino').addEventListener('click', e => { ... }) $('blended').addEventListener('click', e => { ... }) 이렇게 한다면 굉장히 비 효율적일 것입니다. 이럴 때 이벤트 위임을 이용할 수 있습니다. 이벤트 위임에는 이벤트 버블링과 캡쳐링이 있습니다. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의..

데이터 타입을 단일 데이터를 담을 수 있는 원시(primitive)타입과 복합 데이터를 담을 수 있는 객체(object)타입 두 가지로 나눌 수 있습니다. 원시 타입 원시 타입에는 number, string, boolean, null, undefined, Symbol 객체 타입 객체 타입에는 object(arrray나 다양한 자료구조들), function string 이스케이프 표현 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String 원시 타입 vs 객체 타입 원시 타입은 값 자체가 메모리 셀에 저장이 되지만 객체 타입은 **메모리 주소(참조값)**를 저장합니다. let a = 1 let b = a 이렇게..

자바스크립트에서 정말 헷갈리는 개념으로, 자바스크립트를 다루는데 있어서 굉장히 중요한 역할을 하기 때문에 반드시 이해하여야 한다. 정의 자바스크립트의 모든 객체는 자신의 "원형(Prototype)" 이 되는 객체를 가지며 이를 프로토타입이라고 한다. 보이지 않는 속성인 [[Prototype]] 이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 한다. .prototype과 [[Prototype]] 프로토타입이 헷갈리는 이유는 그 명명법과 연결방식에 있는데, 모든 객체는 은닉 속성인 [[Prototype]] 을 갖는데 특별히 함수 객체 는 접근할 수 있는 속성인 protot..

이터레이션 프로토콜 반복 가능한 규격, 약속, 인터페이스이다 팁 오브젝트 이름을 지을때는 명사로 짓고 인터페이스의 경우는 able을 붙이고 있습니다. // Iterable 하다는건! 순회가 가능하다는 것 // [Symbol.iterator](): IterableIterator // 심볼정의를 가진 객체나, 특정한 함수가 IterableIterator를 // 리턴한다는 것은 순회 가능한 객체다! 라는것을 의미한다. // 순회가 가능하면 무엇을 할 수 있나? // 바로 반복문, 연산자들을 사용할 수 있습니다. const arr = [1, 2, 3] console.log(arr.values()) // Object [Array Iterator] {} console.log(arr.entries()) // Obje..

이터레이터를 조금 더 간편한 방식으로 만들 수 있게 해줍니다. // 제너레이터를 만들기 위해서는 함수를 만들어야 하는데 이때 *를 같이 입력해야합니다. function* multipleGenerator(){ try{ for(let i = 0; i < 10; i++){ // 사용자가 next를 사용할 때까지 기다렸다가 하나하나씩 리턴해줍니다. // 즉 사용자가 next를 호출해줘야 i는 0에서 1로 증감한다. yield i ** 2 } } catch(err){ console.log(err) } } const multiple = multipleGenerator let next = multiple.next() console.log(next) next = multiple.next() console.log(nex..

// Iterable 하다는건! 순회가 가능하다는 것 // [Symbol.iterator](): IterableIterator // 심볼정의를 가진 객체나, 특정한 함수가 IterableIterator를 // 리턴한다는 것은 순회 가능한 객체다! 라는것을 의미한다. // 순회가 가능하면 무엇을 할 수 있나? // 바로 반복문, 연산자들을 사용할 수 있습니다. const arr = [1, 2, 3] console.log(arr.values()) console.log(arr.entries()) console.log(arr.keys()) // iterator 사용해 보기 // values는 iterableIterator를 리턴합니다. const iterator = arr.values() while (true)..

Inheritance (상속) 부모 class에 있는 모든 것들이 자식 class에 포함이 됨 공통되어지는 값들을 extends 키워드로 재사용 할 수 있다 부모 class의 값을 변경하면 자식(상속 받은) class의 값들도 자동으로 변경됨 부모의 constructor가 2개일 때 class Animal { constructor(color,eat) { this.color = color this.eat = eat } eat() { console.log('먹자!') } sleep() { console.log('잔다') } } class Dog extends Animal { constructor(color,eat ,ownerName) { super(color, eat) this.ownerName = owne..

class User { // 생성자 필드 constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; // get을 정의하는 순간 this.age는 메모리의 값이 아닌 get을 호출합니다. // get을 정의하는 순간 this.age는 메모리의 값이 아닌 get을 호출합니다. } // getter get age() { return this._age; }//값을 리턴 // setter set age(value) { // 값을 설정할 수 있습니다. // 값을 받으면 그 값을 value로 설정 // if (value < 0) { // throw Error(`-1은 안됩니다....

||(OR) 'OR" 연산자는 두 개의 수직선 기호로 만들 수 있습니다. let bool = a || b; 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. || 은 if문에서 자주 사용됩니다. 주어진 조건 중 하나라도 참인지를 테스트하는 용도로 말이죠. let hour = 9; if (hour 18) { alert( '영업시간이 아닙니다.' ); } 첫 번째 truthy를 찾는 OR 연산자 '||' 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다. 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다. 피연산자 모두를 평가한 경우(모든 피..

foreach, for in, for of의 차이 foreach와 for of는 array를 반복하여 작업을 수행합니다. let items = [10, 20, 30]; items.forEach(function(item) { console.log(item);// 10, 20, 30 }); for (let value of items) { console.log(value); // 10, 20, 30 } for in는 객체의 속성들을 반복하여 작업을 수행합니다. for in 구문에서는 key 값에 접근할 수 있고 let obj = {a:1, b:2, c:3} for(let key in obj){ console.log(key) //"a", "b", "c" console.log(obj[key])// 1, 2, 3 }