보통 프로미스에서 비동기통신을 한 뒤 then()에서 가져온 데이터를 정제할 때 this 객체를 이용하면 아래와 같이 undefined가 뜨는 것을 볼 수 있다... 샘플코드 결과 this객체는 누가 호출했냐에 따라 동적으로 변한다. Window에서 thisFun()을 호출하였으니, thisFun()에서의 this는 Window가 될 것이며, Window객체가 콘솔에 찍히는 것을 확인 할 수 있다.. 그런데 3번째 라인을 보면 undefined가 콘솔에 찍혔다. 즉 then()안에서는 this가 Window객체를 바라보고 있지 않다는 의미... 왜 then()에서는 this객체가 undefined로 뜰까? 구글링을 해본 결과 this객체는 함수를 호출 하는 "녀석"을 가르키게 되는데 then() 안에서는..

이번에 회사동기 블로그를 보다가 이게 뭐지 하는게 있어서 한번 정리해본다. contextmenu라는 이벤트인데, MDN에도 한글지원하는 문서가 없어서... 간단히 풀어 말하면 "우클릭 했을 때 생기는 메뉴를 사용자가 컨트롤 하겠다" 라는 이벤트이다. 어려운 건 없으니 바로 샘플코드를 보면서 배워보도록 하자~ 샘플코드 컨텍스트 메뉴 테스트 페이지 우클릭 메뉴 데스크탑 모니터 스피커 마우스 코드를 보면 간단하다. 전체화면을 대상으로 하니 document에 addEventListener를 통해 이벤트를 추가해주고 있다. 우클릭 했을 때 실행하고자 하는 이벤트(메뉴 표출)와, 아무곳이나 좌클릭하면 실행하고자 하는 이벤트(메뉴 숨김).. 그리고 스타일을 주는 정도... 어려운 건 없다. 꼭 메뉴가 아니라도, 우클..

오늘은 ES6에서 추가 된 문법인 전개구문( Spread Syntax )에 대해 알아보자. 배열이나 객체를 복사하여, 새로운 배열 및 객체를 생성 할 때 사용하는 문법으로, 연결 및 복사 할 때 유용하게 쓰이는 문법이다. 1. 배열에서의 Spread Syntax ----------------------------------------------------------------------------------------------------------------------------------- ES6에 추가된 문법으로 기존에는 각 배열을 합쳐 새로운 배열을 생성할 때 concat함수를 이용하고는 했는데, 전개구문이 나오면서 더 깔끔하게 구현할 수 있게 되었다. 1) 배열병합 2. 배열복사 2. 객체에서의..

기존 ES5에서의 indexOf와 비슷하지만, ES6에서 findIndex()라는 메서드를 지원하며 더욱 강력한 배열 검색 기능을 지원하게 되었다. 가장 큰 차이점은 indexOf이 특정값만 찾는 데 사용되었다면, findIndex()는 filter등의 다른 함수와 조합하여 더욱 복잡한 조건의 검색도 가능하다는 점이다. findIndex()이란? ----------------------------------------------------------------------------------------------------------------------------------- Array.prototype.findIndex() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니..

문자열이나, 배열에서 특정 값이 있는지 확인 할 때 Includes도 사용하는데, IndexOf도 자주 사용했었다. 정확히 말하면 IndexOf는 true/false를 리턴하는 게 아닌, 값의 위치값을 리턴해주는데.. 값이 없으면 -1을 값이 있으면 0이상을 반환해주기 때문에, -1이 리턴되면 false라고 판단하여 사용을 했었었다.. 함수의 용도는 다르지만, 그때그때 사용자의 방식에 따라 달라지는 것 같다.. IndexOf()란? ----------------------------------------------------------------------------------------------------------------------------------- 문자열 및 배열에 특정값이 있으면 해당 ..

javascript를 이용하다 보면 문자열 및 배열에서 특정값이 있는 지 확인 해야 할 때가 있는데, 그럴 때 Includes()를 활용할 수 있다. Includes()는 ES6에서 추가 된 메서드이다.. MDN에서는 Includes()를 2가지로 나누고 있다. 1. Array.prototype.includes() : 배열이 특정 문자열을 포함하고 있는 지 판별한다. 2. String.prototype.includes() : 하나의 문자열이 다른 문자열에 포함되어 있는 지 판별한다. 결국 판별해주는 함수이기 때문에 둘 다 리턴 되는 값은 true/false이다.. -------------------------------------------------------------------------------..