[클로저] 외부 상태 기억과 데이터 캡슐화 제공
·
언어/JAVASCRIPT
function createAdvancedFilter(minValue, maxValue) { return function(arr) { return arr.filter(function(num) { return num > minValue && num  클로저를 한마디로 정의하면  외부 함수 내에서 정의된 내부 함수가 외부 함수의 변수에 접근할수있다. 대표사진에서 보이는 선물 포장의사진은 일종의 감싸는 것을 표현하는거같습니다. (스코프를 감싼) 그렇다면 클로저를 이용하여 구현을하면 좋은 이유가 뭘까요? 클로저를 이용하여 구현하면 좋은 이유는 "상태를 감싸고 안전하게 보호하는" 기능을 제공하기 때문입니다.선물 포장의 이미지처럼, 클로저는 데이터를 감싸서 외부로부터 보호하고, 필요한 부분만 노출시..
[스코프] 내가 정리한 리액트 스코프 완벽 가이드: 변수와 함수의 유효 범위 깊이 이해하기
·
언어/JAVASCRIPT
자바스크립트에서 스코프를 이해하는 것은 매우 중요합니다. 이유를 7가지로 정리하여 설명하겠습니다.1. 변수와 함수의 접근 범위 이해자바스크립트에서 변수와 함수는 특정 스코프 내에서만 접근할 수 있습니다. 스코프를 이해하지 않으면 변수나 함수가 어디서 정의되었고, 어디서 사용할 수 있는지, 혹은 오류가 발생할 가능성이 있는지 알 수 없습니다.예를 들어, 전역 변수와 지역 변수의 차이를 모르고 코드 작성 시 예기치 않은 결과가 발생할 수 있습니다.2. 변수 충돌 방지동일한 이름의 변수를 여러 번 사용하거나, 다른 스코프 내에서 동일한 이름의 변수가 있을 경우 충돌이 발생할 수 있습니다. 자바스크립트에서는 이를 변수 호이스팅(hoisting)과 스코프 체인(scope chain) 개념을 통해 다루지만, 스코프..
쿠키, 세션 스토리지, 로컬 스토리지가 어떻게 다른지 그리고 어떤상황에 사용하면 좋을까?
·
언어/개발용어
1. 쿠키 (1) Client → Server클라이언트가 서버에 처음으로 Request 전송(2) Server서버에서 쿠키 생성(3) Server → ClientHTTP 응답 헤더에 쿠키 포함시켜 응답(4) Client브라우저 종료되어도 쿠키 만료 기간 지나지 않았다면 클라이언트에서 보관(5) Client → Server같은 요청 하는 경우 HTTP 헤더에 쿠키 함께 보냄(6) Server → Client서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요 있을 때 쿠키 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답  2. 쿠키의 특징 1. 쿠키는 몇가지 특징이 있는데 쿠키는 도메인에 한정적입니다. 예를 들어 구글에서 사용자를 인식하기  위해 사용자에게 준 쿠키는 네이버에 보낼 수 없습니다. ..
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해서 그변수에 값을..