웹프로그래밍/JavaScript

[JavaScript] 구조 분해 할당(Destructuring Assignment)

개 요 JS에서 다른 js모듈을 require할 때나 비즈니스 로직에서도 빈번하게 사용하는 구조 분해 할당에 대해서 포스팅 하려고 한다. 개 념 배열이나 객체의 값, 속성(프로퍼티)을 해체해서 해체한 개별의 값들을 변수에 담을 수 있게 하는 표현식이다. 배열 구조 분해 할당 let [a, b] = [10, 20]; // a = 10; // b = 20; 보다시피 굉장히 간단하다. 각각 위치에 맞게 좌측 변수에 우측 값을 (분해하여) 할당한다. 조금 더 응용해보면 아래와 같은 방법으로도 가능하다. let array = [1, 2, 3]; let [a, b, c] = array; // a = 1, b = 2, c = 3 Rest 파라미터 구조 분해 할당 let array = [1, 2, 3, 4, 5]; l..

[JavaScript] 표준 내장객체 정리(상시 업데이트)

개 념 가령 어떤 프로그래밍 언어든 미리 정의된 내장 메소드(객체)가 있기 마련이다. JavaScript도 마찬가지로 유형(내장 객체)별로 여러가지 내장 메소드가 있는데 MDN을 참고해 이 메소드(객체)들에 대해서 유형별로 정리하려고 한다. 이 포스팅은 상시 업데이트 되는 포스팅입니다. ◆ : 실험 중인 기술 객체명 메소드명 설명 링크 에러관련 AggregateError 다수의 에러가 한 에러로 랩핑되어야 할 때의 오류 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/AggregateError 배열관련 Array 리스트 형태의 객체인 배열 생성 https://developer.mozilla.org/ko/docs/W..

[JavaScript] 프로토타입(Prototypes)의 이해

개 념 MDN의 발췌한 내용은 다음과 같다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 그냥 보기에는 설명이 복잡하고 애매하다. 그래서 예제와 그림등을 사용하여 조금 더 자세히 알아보도록 하겠다. 먼저 JS에는 Class라는 개념이 없다. 때문에 기존 객체를 복사해서 새로운 객체를 생성한다. 이걸 프로토타입 기반 언어라고 하는데, 이렇게 생성된 새로운 객체도 다른 객체의 원형이 될 수 있다. 이걸 프로토타입 체인(prototype chain)이라 부르며 객체지향적인 프로그래밍을 할 수 있게 해준다. JS에서는 객체의 prototype(객체 멤버인 __proto__ 속성으로 접근 가능한)과 생성자의 prototype 속성의 차이를 알아야하는데, 전자는 '개별 객..

[JavaScript] 호이스팅(Hoisting)

개 요 지금의 나는 자바스크립트를 어느정도 사용할 줄은 안다고 하지만 에러발생(특히 휴먼 에러)같은 상황에 직면 했을 때, 아직 JS의 아이덴티티에 대해서는 깊게 모르고 있다는 생각이 들었다. 때문에 JS의 아이덴티티에 대해 차근차근 포스팅해보려고 한다. 개 념 MDN문서에 나와 있는 내용을 그대로 발췌하면 '인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것' 추가적인 설명을 요약해서 덧붙이자면 '함수, 변수(var)와 같은 선언문을 유효 범위의 최상단으로 끌어올린다.' 라고 생각하면 될 것 같다. 따라서 결론적으로 이야기하자면 변수나 함수를 정의하는 코드보다 사용하는 코드가 앞서서 등장할 수 있다. 예를 들면 다음과 같다. // 일반적인 코드 작성 순서 function printNa..