Code States 12일차

오늘의 키포인트

원시 자료형, 참조 자료형
스코프
클로저

나의 이해

원시 자료형 : 고정된 곳에만 저장
참조 자료형 : 고정된 장소에 주소만 저장, 실제 저장 장소는 사이즈가 동적
스코프 : {} 처럼 변수의 유효범위를 나누는것
클로저 : 함수를 리턴하는 함수 // 클로저함수 : 외부 함수의 변수에 접근할 수 있는 내부함수

문법 및 중요

원시 자료형, 참조 자료형

primitive type data(원시 타입 데이터) : number, boolean, null, undefined, string, bigint, symbol
  고정된 곳에 저장
feference type data(참조 타입 데이터) : array, object, function
  고정된 곳은 주소값만 저장, heap이라는 공간에 동적(사이즈가 바뀜)으로 저장됨

 

이전에 궁금해 했던, 배열에서 b=a 하고 b에 pop()을 하는등의 변경시에 a또한 바뀌는 이유가 참조 타입 데이터라서 주소값을 받아오기 때문이다  또한 b[0]=10을 해도 a[0]이 10이 되지만 b=10처럼 재할당을 해주면 a와 b는 달라진다

 

scope

scope : 변수의 유효범위
안쪽 scope는 바깥쪽에서 못씀 // 성처럼 생각 내부에선 외부 나가지만 외부 침략 방어
중첩 사용가능
가장 바깥 스코프는 global scope(전역 스코프), 그 외는 local(지역) 스코프
스코프는 {}이거 범위 즉, 지역 스코프에서 선언한 변수는 지역 변수
지역 변수는 전역 변수보다 더 높은 우선순위

 

block scope : 중괄호 기준으로 범위 구분
  화살표 함수는 블록 스코프 취급

function scope : 함수 스코프

함수 스코프는 함수의 실행부터 종료까지, var 선언은 함수 스코프의 최상단에 선언, 선언 키워드 없는 선언은 최고 스코프에 선언됨

함수 내에서 선언 키워드 없는 선언은 함수의 실행 전까지 선언되지 않은 것으로 취급함

let, const, var
let  // 재할당 가능 // 재선언 금지
재선언 방지

var // 재할당 가능 // 재선언 가능
블록 스코프 무시(화살표 함수의 블록 스코프는 무시 안함) // 블록 스코프 무시, 재선언해도 에러안냄, 전역변수로 사용시 브라우저의 내장기능을 못쓸 수 있음  그러므로 let이 좋음

const // 재할당 금지 // 재선언 금지
변수를 상수화 시켜서 재할당 금지

 

for( let i = 0 ; i < 3 ; i++){}
console.log(i);
let이라면 블록 스코프를 벗어 났기 때문에 에러가남
그런데 for안에 let을 var로 바꿔주면 i=2가 나옴
var은 블록 스코프 무시 하기 때문(화살표 함수의 블록 스코프는 무시안함)

선언 없이 변수를 할당시 함수안에 할당을 하더라도 그 변수는 전역변수로서 var로 선언한거 처럼됨
이러한 에러를 방지하려면 js 파일 상단에 ‘use strict’ (따옴표 포함)을 입력하면 엄격하게 작동하게함

브라우저에는 window 객체가 존재
브라우저의 창을 의미하지만 전역 영역을 담고 있기도 함
함수 선억식으로 함수를 선언하거나 var로 전역 변수를 만들면 여기에도 들어감

side effect : 여러 사람이 같이 개발시 전역변수를 많이 쓰게 되다보면 이름을 동일하게 지을 수 있음 // 그러니까 전역변수는 최소화하는게 좋음

 

클로저

 

const add = (x, y) => x + y; // 이거 와
const add = x => y => x + y; // 이거 와
const add = function (x) {
  return function (y){
    return x + y;
  }
}   // 이렇게 3개는 같은 의미

즉 클로저 함수는 함수를 리턴하는 함수 // 변수의 접근 범위를 닫는 폐쇄가 핵심
사용하는 의미는 y보다 x가 바깥 스코프에 있음
내부 함수는 외부 함수에 선언된 변수에 접근이 가능

클로저는 외부 함수의 실행이 끝나도 외부 함수 내 변수가 메모리에 저장

const add = function (x) {
  return function (y){
    return x + y;
  }
}
이거를
add로 호출하면
f(x) {
  return function (y){
    return x + y;
  }
}
이렇게 전체가 다 나오지만
add()로 호출하면
ƒ (y){
    return x + y;
  }
안쪽꺼만 나옴
그래서 const add5 = add(5); 하면
x는 5가 고정되어있고 y함수만 남아서 계산하는듯

 

--클로저 모듈 패턴--
const count = () =>{
    let value = 0;   
    return{
        up: () =>{
            return value +=1;
        },
        down: () => {
            return value -=1;
        },
        getValue: () => value
    }
}

이렇게 해 놓으면
외부 스코프에선 내부 스코프 못 변경하므로 value값 못 바꿈
이것이 정보의 접근 제한(캡슐화)
const counter = count()  // 로 선언해 놓고
counter.up()   // 이런식으로 value값 간접적으로 조작
이런식으로 함수 재사용성을 극대화해서 함수 하나를 독립적인 부품 형태로 분리하는 것을 모듈화

 

--html 문자열 생성--

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`
const divMaker = tagMaker('div'); // 
divMaker('hello') //<div>hello</div>
divMaker('codestates') // <div>codestates</div>

const anchorMaker = tagMaker('a');
anchorMaker('go')  // <a>go</a>
anchorMaker('urclass') // <a>urclass</a>

함수를 리턴하는 함수/ 원리 : 스코프를 외부 내부 나누어서 변수의 접근 범위를 나눔/ 유용성 : 함수 하나를 모듈화 시켜서 여러곳에 사용가능
가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것

 

새로 안것

if() 안에 0을 제외한 숫자, 그리고 문자가 있으면 true

 

이전에 궁금해 했던, 배열에서 b=a 하고 b에 pop()을 하는등의 변경시에 a또한 바뀌는 이유가 참조 타입 데이터라서 주소값을 받아오기 때문이다  또한 b[0]=10을 해도 a[0]이 10이 되지만 b=10처럼 재할당을 해주면 a와 b는 달라진다