[클로저] 외부 상태 기억과 데이터 캡슐화 제공
·
언어/JAVASCRIPT
function createAdvancedFilter(minValue, maxValue) { return function(arr) { return arr.filter(function(num) { return num > minValue && num  클로저를 한마디로 정의하면  외부 함수 내에서 정의된 내부 함수가 외부 함수의 변수에 접근할수있다. 대표사진에서 보이는 선물 포장의사진은 일종의 감싸는 것을 표현하는거같습니다. (스코프를 감싼) 그렇다면 클로저를 이용하여 구현을하면 좋은 이유가 뭘까요? 클로저를 이용하여 구현하면 좋은 이유는 "상태를 감싸고 안전하게 보호하는" 기능을 제공하기 때문입니다.선물 포장의 이미지처럼, 클로저는 데이터를 감싸서 외부로부터 보호하고, 필요한 부분만 노출시..
[스코프] 내가 정리한 리액트 스코프 완벽 가이드: 변수와 함수의 유효 범위 깊이 이해하기
·
언어/JAVASCRIPT
자바스크립트에서 스코프를 이해하는 것은 매우 중요합니다. 이유를 7가지로 정리하여 설명하겠습니다.1. 변수와 함수의 접근 범위 이해자바스크립트에서 변수와 함수는 특정 스코프 내에서만 접근할 수 있습니다. 스코프를 이해하지 않으면 변수나 함수가 어디서 정의되었고, 어디서 사용할 수 있는지, 혹은 오류가 발생할 가능성이 있는지 알 수 없습니다.예를 들어, 전역 변수와 지역 변수의 차이를 모르고 코드 작성 시 예기치 않은 결과가 발생할 수 있습니다.2. 변수 충돌 방지동일한 이름의 변수를 여러 번 사용하거나, 다른 스코프 내에서 동일한 이름의 변수가 있을 경우 충돌이 발생할 수 있습니다. 자바스크립트에서는 이를 변수 호이스팅(hoisting)과 스코프 체인(scope chain) 개념을 통해 다루지만, 스코프..
9장 타입변환과 단축평가
·
언어/JAVASCRIPT
9.1 타입 변환이란?var x = 10;var str = x.toString();console.log(typeof str, str); // string 10console.log(typeof x, x); // number 10타입변환을 하면 값이 변경되지 않는다.이점은 다시 생각해볼만하다var x = 10;var srt = x + '';console.log(typof str, str); // string 10console.log(typeof x, x); // number 10위의 경우는 자바스크립틍 엔진에의해서 의도적으로 바뀐 암묵적 타입변환이다.이렇게 암묵적타입은 새로운값의 타입을 만들고 단한번 사용하고 버리게된다.드러나지않게 타입이 자동변환되어 예측가능하기 어렵다.예측가능한 코드로 만들기위해 코드를 ..
실행 콘텍스트 (Execution context)
·
언어/JAVASCRIPT
1. 실행 컨텍스트란 실행가능한 자바스크립트 코드 블록이 실행되는 환경이다. 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜스택에 차곡차곡 쌓인다. 그리고 가장위에있는 컨텍스트와 관련 있는 코드를 실행하면서, 전체 코드의 환경과 순서를 보장하게 된다. 아래의 예제로 이해보자 let santa = false; // 전역 컨텍스트 var rudolf = false; function christmas() { let santa = true; function givePresent() { let gift = "cat"; console.log(gift); // cat console.log(santa); // false console.log(rudolf); // false ..
[반복문] for() forEach() map() filter() 어떨때 사용??
·
언어/JAVASCRIPT
이글을쓰게된이유는 forEach()문에서 break 가되지않아서 디버깅하면서 많이 해맸기때문에 포스팅을하게되었다. 이참에 반복문과 데이터를 가공하는 기본을 다져보자 다른블로그에서 퍼온글이다. forEach() 하고 map() 함수는둘다 break가 되지않는거구나 실무에서 많이썻던 map() 부터 먼저살펴보고자한다 1. 새로운배열을 만들땐 -> map()을 사용 // chapter1 let array1 = ["크러쉬", "뷔", "태민"]; let arrayList1 = array1.map(function (item) { return item + "가수"; }); console.log(arrayList1); //결과 [ '크러쉬가수', '뷔가수', '태민가수' ] 새로운배열을 return해서 그변수에 값을..
자바스크립트의 핵심개념
·
언어/JAVASCRIPT
1. 객체 자바스크립트의 거의 모든것은 객체이다. boolean, number, string, null, undefined 빼고 이를 제외한 모든 것은 객체이다. 하지만 boolean, number, string도 객체처럼 다룰수있다. 2. 함수 자바스크립트에서는 함수도 객체로 취급한다 3. 프로토타입 모든객체는 숨겨진링크인 프로토타입을 가진다. 이 링크는 해당 객체를 생선한 생성자의 프로토타입 객체를 가리킨다. 4. 실행 컨텍스트와 클로저 자바스크립트는 자신만의 방법으로 실행 컨텍스트를 만들고 실행이이뤄진다. 이 실행 컨텍스트는 자신만의 유효범위를 갖는데 이과정에서 클로저를 구현할수있다.