FrontEnd/JavaScript
![[JS] fill 2차원배열 주의점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoSxQa%2FbtslbP5DyVR%2FWNidtKMRuGhQjD5Yr3ZaD0%2Fimg.png)
[JS] fill 2차원배열 주의점
fill 함수를 통해서 2차원 배열을 만들때 문제가 생길 수 있다. const ary = new Array(10).fill([false, false, false, false]); console.log(ary); ary[0][2] = true; console.log(ary); 다음과 같이 fill을 통해서 false가 담긴 2차원 배열을 만들었다고 생각해보자. 3라인과 같이 0번째 라인의 2번째 값을 true로 바꾸면 위와같이 모든 부분이 다 true로 바뀌게 된다.. 코딩테스트를 준비하다가 해당 부분때문에 골머리를 많이 썩였다. fill같은 경우, 하나의 값이 아닌 배열을 넣는경우 하나의 배열을 생성하고 그 주소값을 참조한 배열들을 넣기때문에 우리 눈에는 다 다른 배열같지만 실제로는 같은 배열이 담기기 ..
[JS] 원시값의 메서드
자바스크립트에선 원시값 (문자열,숫자 등등)을 객체처럼 다룰 수 있다. 문자열에 내장된 substring,toUpperCase 와 같은 내장 메서드를 활용할 수 있다. 그렇다면 자바스크립트에서는 원시형들을 객체로 보고 있는 것일까?? 결론부터 말하면 조금 다르다. 원시값은 string , number , bigInt , boolean , symbol , null , undefined 총 7가지가 있는데, 이런 원시형들은 하나의 값으로써 이를 다루는 작업이 많기 때문에 가볍고 빨라야한다. 그렇다면 어떻게 우리는 원시형의 내장 메서드들을 활용할 수 있을까? 자바스크립트는 아래와 같은 방식으로 이를 해결하였다. 1. 원시값은 단일값 형태를 유지한다. 2. 각 원시값의 메서드에 접근할 때 오류가 나지 않도록 처..
[JS] Symbol
[ 본글은 https://ko.javascript.info/symbol 글을 정리한 글입니다 ] Symbol이란 자바스크립트에서 객체의 Key로 올수 있는 2가지 자료형 중 하나이다. Symbol혹은 문자형만 올 수 있다. 지금까지 JS를 사용할 경우에는 항상 Key가 문자형인 경우만 대부분 사용했었다. 하지만 Symbol을 활용하면 문자형 말고도 객체형의 키를 사용할 수 있다. Symbol은 아래와 같이 만든다. // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); Symbol의 가장 큰 특징은 유일성이 보장된다는 것이다. 문자형은 두형태가 같으면 중복되지만, Symbol로 만들면 설명이 같아도 다르게 취급한다. let id1 = Symbol("id"); let i..
[JS] 옵셔널 체이닝 ?.
옵셔널 체이닝 ?. 은 비교적 스펙에 추가된지 얼마 안된 문법으로, 구식 브라우저에 사용하기 위해서는 폴 리필이 필요한 문법이다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 위와같은 경우에, user의 address정보가 없기 때문에 자바스크립트에서 오류를 내보내게 된다. 그 외에 아래와 같이 브라우저에 없는 요소를 접근하려 할때도 오류가 발생하곤한다. // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; 따라..
가비지 컬렉션
자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 코드를 동작시키면 결국 거의 모든것은 메모리를 사용하게 된다. 값 , 변수 , 함수 ,배열 , 객체 등등 우리가 코드를 짜면서 사용하게 되는 거의 모든 것들 말이다. 그렇다면 쓸모없어진 값들을 처리하는 방법이 필요할 것인데 JS 엔진은 어떤 방식으로 이를 해결할까? JS는 reachability ( 도달 가능성 ) 이란 개념을 활용해서 메모리를 관리한다. 쉽게 생각해서 현재 접근할 수 있는 값이라면 삭제하지 않는다. 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 위 값들은 선언 하면서부터 사라질 일이 없기때문에 명백한 이유 없이는 절대 삭제되지 않는다. 이런 값들을 루트 라..
[JS] 폴리-필(Polyfill) , 바벨
자바스크립트는 현재도 계속 끊임없이 진화하고 있는 언어이다. 현재도 정기적으로 여러가지 제안들이 등록,분석되고 있으며 그 중 의미있는 제안들은 수용되고 받아들여지기도 한다. https://github.com/tc39/ecma262/issues GitHub - tc39/ecma262: Status, process, and documents for ECMA-262 Status, process, and documents for ECMA-262. Contribute to tc39/ecma262 development by creating an account on GitHub. github.com 위 깃헙 이슈들을 보면 JS관련된 여러가지 제안들을 확인할 수 있다. 해당 내용들 중에서 의미있다고 판단되는 내용들이 ..