전체 글40 [JavaScript] 클로저 정리 ※ 본 게시글은 모던자바스크립트 deep dive를 보고 정리한 내용입니다. 틀린 내용이 있다면 댓글로 적어주시면 감사드리겠습니다 (__) 클로저에 대해 공부하고 클로저에 대해 간단히 설명을 해보자면 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션 내부함수로부터 외부함수의 접근 권한을 줌 함수 생성 시점에 언제나 생김 작성한 글을 쭉 읽어보면 무슨 말을 하고 싶은 건지 대강 이해가 될것이다. 렉시컬 스코프 함수를 어디에 정의했는지에 따라 상위 스코프를 결정 -> 렉시컬(정적) 스코프 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조' 에 저장할 참고값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다. 이것이 바로 렉시컬 스코프이다. 함수 객체의 .. 2022. 3. 25. [JavaScript] '?' 옵셔널 체이닝 연산자 ES2020에서 새롭게 등장한 연산자인 옵셔널 체이닝 연산자는 '?.' 형태로 사용되며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만 참조가 null 이거나 undefined여도 에러가 나오지 않고 undefined 값을 리턴한다. 함수 호출시에도 값이 없다면 undefined를 리턴한다. 만약 염색을 하려고 미용실을 가서 어떤 컬러를 할지 결정하기 위해 컬러북을 살펴봤다고 생각해보자 컬러는 무수히 많지만 거기에 나와있는 컬러는 없는 컬러도 있을 것이다. 없는 컬러를 선택했다고 가정하고 코드로 나타내보면 const color = { red : { name : '빨강' } , bl.. 2022. 3. 24. [JavaScript] prototype 정리 ※ 모던자바스크립트 책을 보고 이해가 어려웠던 부분만 정리한 내용입니다. 틀린 내용이 있다면 댓글 달아주시면 수정하겠습니다! 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. ES6에서 js에도 클래스를 제공하여 클래스와 와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 자바스크립트를 이루고 있는 거의 모든것은 객체이며 원시 타입의 값을 제외한 나머지 값들은 모두 객체이다. 자바스크립트에서 객체는 key와 value를 가지는 존재이며 생성자 함수 또한 객체이므로 속성과 값을 가진다. 상속과 프로토타입 자바스크립트에서의 상속은 프로토타입 기반으로 구현을 한다. 예제코드 // 생성자 함수 function Circle(radius) { this.radi.. 2022. 3. 24. [JavaScript] 가비지콜렉션, WeakRef 몇달 전에 나온 ES2021 문법에서 자바스크립트에서도 약한 참조라는 개념이 등장했다고 한다. 이는 가비지콜렉션(Gabage Collection) 과 관련이 있는데 가바지 콜렉션이란 과연 뭘까? 해석을 해보면 '쓰레기수집' 이다. 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다 C를 예로 들면 free()라는 함수로 직접 메모리를 해제해줘야하지만, Java 개발자들은 메모리를 직접 해제해주는 일이 없었을텐데 이는 JVM의 가비지 컬렉터가 불필요한 메모리를 알아서 정리해주기 때문이다. 대신 자바에서는 불필요한 데이터를 표한하기 위해 일반적으로 null 을 선언해준다. Number num = new Nmuber(); num.setNumbe.. 2022. 3. 21. [React] JSX 문법 정리해보자 요즘 리액트와 자바스크립트를 집중적으로 공부하고 있다. 본 포스팅은 김민준 강사님의 누구든지 하는 리액트: 초심자를 위한 react 핵심강좌 라는 강의를 듣고 정리를 해보았다. 강의는 여기! https://www.inflearn.com/course/react-velopert/dashboard 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의 프론트엔드 프레임워크, 리액트(React)를 누구든지 쉽고 재밌게 시작할 수 있도록 만들어진 강의입니다., - 강의 소개 | 인프런... www.inflearn.com 일단 JSX란 뭘까? 얼핏보기엔 HTML 같기도하고 자바스크립트 같기도한데.... JSX(JavaScript XML)은 JavaScript 에 XML을 추가한 확장문법이다... 2022. 3. 2. [ES6] const, let, var 차이점 알아보기 1. var 자바스크립트 ES5 버전까지의 변수 선언 방식 ( 요즘은 사용하지 않는걸 추천한다) 특징 1. var 키워드는 생략이 가능하다. (var) a = 29; console.log(a); //29 2. 재선언과 재할당이 가능하다. var a = 10; console.log(a); // 10 var a = 42; console.log(a); // 42 a = 12312; console.log(a); //12312 3. 함수 레벨 스코프이다. 자바스크립트는 블록레벨 스코프를 사용하는 java나 C와 다르게 함수레벨 스코프이다. 함수레벨 스코프(function level scope) 란 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능하고 함수 외부에서 선언된 모든 변수는 전역 변수로 .. 2022. 3. 2. 이전 1 2 3 4 5 6 7 다음
