JavaScript12 Closure 클로저(closure)는 직역만으론 작동원리를 이해하기 어렵다. 필자 또한 한 번에 이해하기 어려웠다. 크롬 개발자도구에서 지원하는 디버깅 툴을 통해 하나씩 살펴보고 이해했다. (크롬 개발자 도구는 참 많은 걸 지원한다.) 결론부터 말하자면, 클로저는 반환 된 내부 함수가 자신이 선언 되었을 때 환경을 기억하는 함수다. 클로저를 이해해야 하는 이유는 상태 유지, 고차컴포넌트, 매개변수 함수 등을 위해서다. 물론 클로저에 대한 이해가 없이도 어느정도 알 수 있으나, 접근이나 코드가 복잡해지면 길을 잃기 딱 좋아 보인다. 따라서 미리 이해하고 있고자 정리한다. 위 코드를 실행시키고 개발자도구 소스로 가서 해당 코드 진행 사항을 차근차근히 살펴볼 수 있다. 무엇보다 오른쪽 스코프탭을 통해 클로저 상태도 알 수.. 2022. 10. 18. Primitive type & Reference type Primitive type(원시타입)과 Reference type(참조타입)은 프로그래밍의 근간이다. 이에 대한 이해도가 없다면 for문을 배워도 if를 배워도 금방 한계에 봉착한다. 어려운 것은 아니나, 그렇다고 빠르게 이해할 수 없었떤 두 가지를 정리한다. 간단 비교하고 시작하자면 원시타입은 정수, 실수, 불린 등 실제 데이터를 담은 것이고, 참조타입은 해당 데이터가 담긴 주소를 갖고 있다. Primitive type 원시타입은 객체나 메서드가 아닌 데이터 그 자체를 갖고 있는 것을 말한다. 대부분의 저급 언어가 가진 특징이며, 이미 생성한 원시타입의 값은 불변하다는 특징을 갖는다. 자바스크립트에서 원시타입은 7개만 알면 끝이다(ES6 기준). 원시타입의 종류와 기본 특징은 아래와 같다. string.. 2022. 9. 20. null & undefined 어떤 언어든 프로그래밍을 배운다면 항상 이 두가지는 언급하는 듯하다. 0, null, false, undefined 등... 없는거나 무의식에선 거짓이나 같은게 아닌가 하고 넘어가게 만드는 값들이다. 이중 null과 undefined가 최정점에 있다. 두 값의 공통점과 차이점을 짧게 정리한다. 공통점 1. 자바스크립트를 이루는 원시 값 중 하나다. 2. 불리언 연산에서 거짓으로 취급한다. console.log(Boolean(undefined)) // false console.log(Boolean(null)) // false console.log(null==undefined) // true 차이점 1. null은 '없는' 값이고, undefined는 '존재하지 않는' 값이다. console.log(null.. 2022. 9. 15. let, const, var 자바스크립트를 배우다보면 자주 듣는 말중 하나가 자바스크립트는 자유로운(유연한) 언어라는 거다. 조금 더 나아가면 지멋대로인 언어라는 표현도 있다. 아무래도 C언어 같이 다른 언어에 비해 자료형을 정확히 기재하지 않아도 사용할 수 있기 때문이다. 이 중심에 var이 있었다. var은 ES5까지 주로 쓰였던 변수 선언인데, 자바스크립트를 자유롭게 하는 선언이면서 반대로 얽매는 선언이었다. 이를 보완하고자 나온 게 let과 const다. var, let, const를 하나씩 살펴보자. var var는 자바스크립트가 태어나 ES5까지 메인으로 쓰였다. 모든 선언은 전부 var이였기 때문. 함수든 클래스든 어디든 자바스크립트는 var 하나로 모든 변수 선언이 가능했다. 그러나 독특한 특징 때문에 발목을 잡히기도.. 2022. 9. 14. Destructuring Assignment Destructuring Assignment은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 자바스크립트 표현식이다. 쉽게 말하면 배열이나 객체를 dot notation이나 bracket notation로 쓰지 않고, 그 구조를 풀어서 안에 있는 키 혹은 값을 그대로 쓸 수 있게 한다. 한국말로 구조 분해 할당이라 부른다. 사용 조건 용어 그대로 구조를 분해하는 것이기에 구조가 있는 배열과 객체에서 사용할 수 있다. 사용 방법 1. 객체 const {key1, key2, ...key} = 객체; 기본 표현은 위와 같다. 구조 분해하고 싶은 객체를 할당값으로 주고 앞에 해당 객체에서 가져올 키 값을 중괄호 안에 적는 것. 위와 같이 적을 경우 key1을 출력하는 것만으로도 해당 객체 안에 있는 .. 2022. 9. 13. 이전 1 2 3 다음
