혼자 적어보는 노트

key in object const obj = { name: "Jay", age: 29, }; console.log("name" in obj); // true console.log("age" in obj); // true console.log("gender" in obj); // false Object.hasOwnProperty const obj = { name: "Jay", age: 29, }; console.log(obj.hasOwnProperty("name")); // ture console.log(obj.hasOwnProperty("age")); // ture console.log(obj.hasOwnProperty("gender")); // false

Javascript에는 탐색하는 함수들이 여럿 존재한다. 그 중 배열에 관련된 Array.prototype에는 여러 메소드들이 존재하는데 Array.prototype.every는 모든 원소가 해당 함수를 만족한다면 true를 반환하고, 전체를 탐색하면서 하나라도 만족하지 않는 원소가 있다면 false를 반환한다. Array.prototype.some은 요소들 중에 하나라도 true가 있다면 배열 탐색을 종료하고 바로 true를 반환한다. Array.prototype.every const array = ["10", "20", "30", "40"]; const checkNumber = array.every((num) => num >= 20); console.log(checkNumber); // false c..

빈 배열 확인은 배열의 length를 체크하여 확인을 할 수 있지만 객체는 length를 확인할 수 없다. 그렇다면 빈 객체는 어떻게 체크할 수 있을까? Object.keys 사용 object.keys를 이용하여 object를 배열로 변경하여 확인을 할 수 있다. const obj = {}; const obj2 = { name: "Jay" }; console.log(Object.keys(obj).length); // 0 console.log(Object.keys(obj2).length); // 1 JSON.stringify() 사용 object를 문자열로 변환하여 확인할 수 있다. const obj = {}; const obj2 = { name: "Jay" }; console.log(JSON.string..

this란 무엇인가? 자바스크립트를 배우게되면서 this에 대해 많이 접해보았는데 내가 알고있는 개념이 맞는지, 책이나 유튜브 등 여러가지로 알아보게 되었는데 초심자인 내가 이해한 방식으로 적어보겠다. this를 제대로 이해하려면 실행컨텍스트, 스코프, 객체라는개념, 프로퍼티, 프로토타입, 활용된 사례 등 밀접하게 연결되어 있는 부분을 이해해야 하는 듯 하다. 개인적으로 this자체가 어렵다기 보다는 연결된 다른 개념들을 이해해야해서 복잡했던 것 같다. ES6문법부터 시작해서 그런지 이전의 개념들이 와닿지 않았던 것들도 있었다 자바스크립트에서의 this는 실행컨텍스트가 생성될 때 결정되는 것이다. 즉 함수를 호출할 때 결정이 되며. 호출자가 누구냐에 따라 달라진다. 전역공간에서의 this console...

new Date()함수를 쓰거나 날짜데이터를 받아서 쓸 때 예쁘게 노출하는 방법 ex) Tue Dec 21 2021 10:27:27 GMT+0900 (한국 표준시) >> 2021-12-21 function formatDate(date) { let month = "" + (date.getMonth() + 1); let day = "" + date.getDate(); let year = date.getFullYear(); if (month.length < 2) month = "0" + month; if (day.length < 2) day = "0" + day; // 월, 일이 한자리일 경우 0을 붙여준다 return [year, month, day].join("-"); } function formatDat..

실행컨텍스트란? 실행할 코드의 환경 정보들을 모아놓은 객체 실행컨텍스트를 구성하는 방법은 기본적으로 함수를 실행하는 것이다. 실행 컨텍스트는 아래와 같은 정보들을 담고있다. - variable Environment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경정보 Lexical Environment : 처음에는 VariableEnvironment와 동일하다. 변경사항이 반영됨. 그리고 variable Environment와 LexicalEnvironment에는 두 가지의 정보가 담겨있다. - environment Record: 현재 컨텍스트와 관련된 코드의 식별자 정보들을 순서대로 저장 outer Environment reference: 상위의 LexicalEnvironment를 참조하는 포..

ES6 객체 리터럴의 확장 기능 프로퍼티 축약표현 프로퍼티의 값으로 변수를 사용할 때 변수이름과 프로퍼티 키가 동일할 경우 값을 생략할 수 있다. let x = 1, y = 2; const obj = {x, y} console.log(obj); // {x: 1, y: 2} 계산된 프로퍼티 이름 프로퍼티의 key를 대괄호로 묶어 계산된 형식으로 생성 가능 const name = "Jay"; const obj = { [1 + 1] : 2 [`${name} 1`] : name, } console.log(obj) // {2: 2, Jay 1: 'Jay'} 메서드 축약 표현 const obj = { name: 'Jay', sayHi() { console.log('Hi!' + this.name) } /* es5 s..

부모요소와 자식요소가 각각의 클릭이벤트를 가지고 있을 때 자식요소 클릭시에 부모 요소의 해당 이벤트가 실행된다. e.target 과 e.currentTarget을 이용한 방법 function parantClick(e) { if (e.target !== e.currentTarget) return; console.log("부모클릭"); } function childClick(e) { console.log("자식클릭"); } parent.addEventListener("click", parantClick); child.addEventListener("click", childClick); if (e.target !== e.currentTarget) return; 위의 코드처럼 진행 시 자식요소 클릭 시 부모요소..