자바스크립트에서는 숫자를 어떻게 다룰까? 또한, 태그된 템플릿은 뭘까? 이 글에서 알아볼 것 자바스크립트에서의 Number 객체와, 부동 소수점 BigInt 태그된 템플릿 1. 자바스크립트에서의 Number 객체와, 부동 소수점 자바스크립에서의 Number는 모두 부동 소수점 숫자(Float)로 이루어져있다 즉, 자바스크립트에는 다른 언어의 Integer같은 소숫점이 없는 Number는 존재하지 않는다 모든 Number는 64비트 부동 소수점 수로 저장된다 이러한 Number에는 최대값과 최솟값이 존재하고, 정밀도에도 한계가 존재한다 console.log(Number.MAX_SAFE_INTEGER); // 최대 정수값 => 9007199254740991 (2^53 -1) console.log(Number..
프론트엔드 공부를 시작하고, 인강을 구매하여 처음 자바스크립트를 공부할 때, 자바스크립트를 포기했던 파트다... 물론 앞에 내용들도 어렵고 이해가 가지 않았지만, 반복해서 듣고 따라치고해서 겨우 넘겼다, 하지만 이부분은 도저히 이해가 안갔다. 그 후 바로 리액트로 넘어갔다,,, 지금 다시 공부하면서 그때 왜 그랬을까 생각해보면, 개념 위주의 내용이고, 앞에 기본기가 부족해서 그랬던거 같다. 이렇게 사설을 길게 쓴 이유는, 내가 느끼기에 자바스크립트에서 가장 중요한 개념위주의 파트가 2가지 있는 것 같은데, 그 중 하나이기때문이다. (물론, 모든 파트가 중요하다) 또한, 다시 공부했을 때 내가 여태까지 공부를 잘못된 방향으로 하고있지 않다는걸 간접적으로 느끼게된 파트기도 하다. 이 글에서 알아볼 것 순수함..
개인적인 생각이지만, "나 자바스크립트로 웹페이지 만들수있어요"라고 말할때 가장 티낼수있는 부분이 이벤트 파트라고 생각한다. 웹사이트를 구현했을 때 가장 임펙트있는 부분은 이벤트를 통한 기능일테니까 말이다. 나 또한 처음 이벤트부분을 공부할때 그냥 addEventListener로 이벤트 리스닝하고, 함수 트리거 하면 끝, 이라 생각했고 이렇게만 하면 대충 클릭할때 이벤트 발생 ~, 양식 제출도 할 수 있고~ ... 지금 다시 복습하면서 느낀점은 여기가 절대 단순한 파트가 아니고 여러 원리를 이해해야 진정으로 이벤트를 다룰수 있다고 생각하게 되었다. (예를들어, form으로 양식제출시 event.preventDefault() 사용하긴 했는데,, 그냥 백엔드로 전송되는거 막아준다, 라고만 알고 사용했었다....
이 글에서 알아볼 것 this란? this 사용시 주의점 1. this란? 함수 내에서, 즉 해당 함수가 객체의 일부인지와 상관없이 this 키워드는 해당 함수를 호출한 모든 항목을 참조한다 const newMovie = { info: { title: title, [extraName]: extraValue, }, id: Math.random().toString(), getFormattedTitle: function () { return this.info.title.toUpperCase(); } }; 객체내에서 객체의 프로퍼티에 접근하기 위해서 this를 활용할 수 있다. 2. this 사용시 주의점 앞서 설명했듯이 this는 자동으로 주위에 있는 항목을 참조하는 대신, 해당 함수를 호출한 주체를 참조한다..
자바스크립에는 여러 중요한 데이터 구조들이 존재하지만, 그 중 객체는 가장 중요한 데이터 구조이다. 이번 글에서 알아볼 내용 객체란? 프로퍼티(추가, 수정, 삭제) 객체를 복사하는 두가지 방법 대괄호를 이용한 동적 접근 1. 객체란? 앞서 객체가 가장 중요한 데이터 구조라 하였는데, 왜일까? 현실에 존재하는 개체를 나타낼 때 사용되기 때문이다. 예를들어 아주 복잡한 코드가 존재한다할때..프로그래머가 아닌 다른 사람들이 볼때는 이게 도대체 뭘 의미하는지 모를것이다. 하지만, 아래 코드를 보자 const movieData = { title: "기생충", desc: "ㅁㄴㅇㄹ", rate: 5 } -> 누가 보아도 영화와 관련되어있는 것을 알 수 있다. 이처럼 객체는 현실에 있는 개체를 설명하고, 인간에게 있..
배열에 관한 나머지 내용을 알아보려한다. 이번 내용들은 기초적인 내용이 아닌, 심화 내용이므로 정확한 정리가 필요하다 느꼈다. 이번 글에서 알아볼 내용 reduce() 메서드 스프레드 연산자 배열 구조 분해 1. reduce() 앞서 두 글에서 배열 메서드에 대해 알아보았었다. reduce() 또한 배열 메서드 중 하나인데, 따로 정리하는 이유는 꽤..복잡하기때문이다. 따라서 자세히 알아보려 한다 redcue() 메서드란? 배열을 더 단순한 값으로 줄여주는 메서드 ex) 배열의 모든 숫자의 합등을 구해 단일 숫자로,, 또는 단일 문자열로,, reduce() 구조 const sum = prices.reduce((prevValue, curValue, curIndex, prices) ⇒ {}, 0) 첫번째 인..
앞에 글에서 살펴본 메서드들이 기본적인 메서드들이였다면, 이번에 다룰 메서드들은 조금 심화된 메서드들이다. 1. forEach() 자바스크립트에는 다양한 반복문이 존재한다. (for, for-of, for-in, while...) 이 중 배열에 사용하는 반복문은 for-of문이다. (물론 for, while도 가능하다) forEach() 또한 배열에 사용하는 반복문이다. 그렇다면 왜 for-of 말고 forEach()가 또 있으며, 언제 사용할까? 성능, 코드 길이등등의 이유가 있겠지만, 가장 중요한 for-of와 forEach의 차이점은 어떠한 이유로 인덱스가 필요할 경우 for-of문은 활용될수없다는 점이다. 반면 forEach()는 가능하다 (물론 기본 for문으로도 인덱스에 접근할 수 있지만,,,..
배열이라는 문법은 대부분의 프로그래밍 언어에 존재하고, 당연히 자바스크립트에도 존재한다. 또한, 배열의 활용도는 매우 높고 중요하기 때문에 정확히 알아둘 필요성이 있다. 1. Iterable, 유사 배열 객체 배열을 알기 위해서는 Iterable과 유사 배열 객체를 먼저 알아봐야한다. 1_1. Iterable Iterable이란 반복 가능한 객체로, for-of문을 사용할 수 있는 특징이 있다. 이러한 Iterable에는 대표적으로 배열, Map, Set..등이 존재한다. 1_2. 유사 배열 객체 유사 배열 객체란 배열과 비슷한 형태를 갖고있고, length 프로퍼티를 갖고있는 객체로, 아이템에 엑세스하기 위해 인덱스를 사용하는 객체이다. 이러한 유사 배열 객체에는 대표적으로 NodeList, Strin..
