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] 프로토타입(Prototypes)의 이해

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

[JavaScript] 호이스팅(Hoisting)

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

[JavaScript] 불변 객체 만들기(const, Object.freeze())

개요 카카오 코딩테스트 문제를 풀다가 임의 객체 A를 배열B에 Push한 후 객체 A의 내용을 바꿨는데 배열B에 Push 되어 있던 객체 값이 바뀐 결과가 발생했다. 이 때 나는 배열에 push한 값은 value로 들어간다고 착각했고, 설마 주소값이 들어가는 것 인가? 예상해보았지만 그 결과는 정확히 맞았다. 이미 선언된 객체를 변하지 않는 불변 객체로 만들면 되지 않을까? 라는 생각에 불변 객체에 대해 알아보고 남기는 포스팅이다. (코딩테스트 문제에서는 이 방법을 사용하지는 않았지만...) 불변 객체 먼저 불변(immutability)이란 뭘까? 단어에서 유추해볼 수 있다시피 '변하지 않는' 뜻이라고 생각하면 되겠다. 그럼 '불변 객체'란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 ..