본문 바로가기

자바스크립트 hasOwnProperty const parent = { name: 'parent-name' }; const child = { action: 'child-action', __proto__: parent }; console.log(child.hasOwnProperty('name')); ---> false console.log(child.hasOwnProperty('action')); ---> true상속이 아닌 자신만의 프로퍼티인지
ES6 상속 const parent = { name: 'parentName', func() { console.log(this.name) } }; /** ES5 상속 */ const es5Child = Object.create(parent); /** ES6 상속 */ const es6Child = { __proto__: parent };
ES6 메서드 프로퍼티 축약 표기법 예전부터 얼핏 보이던, 메서드(객체에 속해있는 함수) 선언법이 갑자기 궁금해져서 찾아봤다. 타입스크립트 문법인줄 알았지만, ES6의 축약법이다.const obj = { funcOrg: function () { }, /** 위 내용을 축약한 것 */ funcEs6() { } };
자바스크립트 화살표 함수 특징 화살표 함수는 항상 익명이다.this, super, arguments, new.target을 사용할 수 없다. const a = () => { console.log(this.name); }; const test = { }; test.name = 'sdfafasfsf'; test.testFunc = a; test.testFunc(); a.bind(test); 위와같이 억지로 바인드 시킬수도 없다. 따라서 메서드 함수가 아닌 함수에 제일 적합하다.(메서드 함수: 특정 객체에 종속되는 함수.. --> why? this는 자신을 호출한(속한) 객체를 가리키기 때문)
ES6 날짜 추출,(배열 비구조화) ES6에는 객체와 배열에서 비구조화(destructuring)할당이라는 선언법이 존재한다. 위 문법에 대한 설명 포스트는 아니고,,날짜관련해서 조금 더 축약해서 쓸 수 있는 방법이 존재해 적어둔다.const today = new Date(); / Tue May 21 2019 22:19:42 GMT+0900 (한국 표준시) const formattedDate = today.toISOString().substring(0, 10); / "2019-05-21" const [year, month, day] = formattedDate.split('-'); console.log([year, month, day]); / [ '2019', '05', '21' ]
ES6 let, const 놓치기 쉬운 사실 1. let - 호이스팅이 일어나지 않는 것은 아니다.변수를 메모리에 할당하고, 선언하는 과정 때문에 마치 호이스팅이 일어나지 않는 것 처럼 보이지만, block 스코프 내에서 호이스팅이 일어난다.const a = () => { console.log(foo); /** --> Uncaught ReferenceError: Cannot access 'foo' before initialization 발생 */ let foo; console.log(foo); }; a(); 2. const - '객체'의 변경을 보호하는 것이 아니다.const라는 이름 때문에 착각하기 쉽다. 변수의 재선언이 불가능 한것은 맞지만,할당되는 값이 객체일 경우, 그 객체의 내용의 변경(프로퍼티의 추가, 변경, 삭제)을 막아주지는 않는다...
순수 자바스크립트 유휴시간 체크(check idle time) 사용자가 일정시간 반응이 없을때, 자동으로 로그아웃 처리를 해주거나 혹은, 비디오 컨트롤러 영역을 숨기는 등 유휴시간을 체크해야 할 경우가 종종 있다. 위를 간단하게 구현해 줄 수 있는모듈도 많고, 바닐라js(순수 자바스크립트)로 구현하는 방법도 다양하다.( jquery에서도 지원해준다.) 실무에서도 구현해본 적이 있었는데, 노드 모듈을 써서 해결을 하긴 했는데자바스크립트 time관련 메서드(setTimeOut(), setInterval() ..)들이 특정한 ID값을 리턴해준다는 것을 몰라서 헤맸다. 개인 프로젝트 도중, 일정시간이 지난 후, 컨트롤러 영역을 숨겨야 하는 기능이 필요했는데,다른 사람들은 어떻게 하는지 한번 더 찾아봤다. setInterval 메서드로도 해결할 수 있지만,아래 방법이 깔끔해..
로그인 처리 관련 http status 처리 크롬에서는 폼 전송시 응답코드가 200이면비밀번호 저장 안내 메세지가 뜬다. 인증관련 처리시 http status도 바꿔주자