JS 핵심개념

황지웅·2021년 11월 28일
0

javascript

목록 보기
4/9
post-custom-banner

원시자료형과 참조자료형


원시자료형과 참조자료형

1.변수에는 하나의 데이터만 담는다.
2. 왜 자료구조를 따로 구현해야 할까?
변수에 넣을 수 있는 데이터 크기가 제한되기 때문.

3.원시타입데이터의 저장 방식
stack이라는 사물함이있다 사물함에 이름을 붙이는 것을 선언이라고 한다. 변수에 값을 할당하면 사물함안에 값이 저장된다. 또 이저장된 값은 이름을통해 사물함안의 값을 찾아 반환한다
원시타입을 복사하는경우 값을 복사하기때문에 복사한 값을 변경해도 기존값에는 영향을 주지 않는다

4.참조자료형의 저장 방식
참조 자료형(reference type data)은 사물함에 이름을붙이고 그안에는 주소를 할당한다.그리고 heap이라는 공간에 값을 저장하고 stack에저장된 주소를통해 heap을 참조할수 있다.이 저장공간은 동적으로 사이즈가 바뀔수 있다.
참조타입데이터를 복사하는경우 주소를 복사하기때문에 복사한값을 변경한경우 기존값에도 영향을 미친다

3)헷갈리기 쉬운 것
console.log([1,2,3] === [1,2,3]); //flase
console.log({ foo: 'bar' } === { foo: 'bar' });//false

위와같은경우 비교연산자는 주소가 같은지를 비교하게된다


변수/호이스팅/TDZ


변수의 종류와 특징

1.var

  • 함수스코프()
  • 생성과정 //선언과 할당을 따로해도됨
    1)선언 및 초기화
    2)할당`
  • 재선언이 가능하다.
  • 값을 재할당할 수 있다

2.let

  • 블럭스코프
  • 생성과정//선언과 할당을 따로해도됨
    1)선언
    2)초기화
    3)할당
  • 재선언은 불가능하다
  • 값을 재할당할 수 있다

3.const

  • 블럭스코프
  • 생성과정
    1)선언,초기화,할당 //선언 할당을 동시에 해주어야함
  • 재선언 재할당 모두 불가능

호이스팅

1.호이스팅은 스코프 내에서일어남
2.스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
3.변수들을 호이스팅시 선언만 호이스팅시키고 할당은 호이스팅 시키지 않음
그래서 var같은경우 할당과동시에 초기화 진행으로인해 할당되지 않은상태에서 사용하여도 error를 뿜지않음

TDZ

변수가 호이스팅으로 선언이 할당되어도 값이 할당되지 않은경우 TDZ(Temproal Dead Zone)에 영향을 받는다


스코프


스코프란 무엇인가?

변수에 접근할 수 있는 범위가 존재하고, 이 범위를 우리는 스코프라고 부른다

스코프의 규칙

1.안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.

2.스코프는 중첩이 가능하다

  • 가장 바깥쪽의 스코프: 전역스코프 / 전역이 아닌 스코프:지역스코프
  • 전역스코프에서 선연한 변수: 전역변수 / 지역스코프에서 선언한변수:지역변수

3.지역변수>전역변수(우선순위)

  • 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.
  • 지역변수선언후 할당한경우
    함수내에서 새로선언했기때문에 이름은 같아도 함수내에만 존재하는 새로운 변수가 생성됨

    //김코딩
    //박해커
    //김코딩
  • 지역변수가 선언되지않고 할당한경우
    function안에 선언하지않고 name에 값을 할당했기때문에 전역변수를 그대로가져와 값을 할당하게됨.결국 전역변수name은 '박해커'로 수정할당됨

    //김코딩
    //박해커
    //박해커

스코프의 종류

1.중괄호로 둘러싼 범위(block scope:블록 스코프)

  • if문
  • for문
  • 화살표함수

2.함수로 둘러싼 범위(fuction scope:함수 스코프)

  • 함수선언문
  • 함수 표현식

3.각 변수의 특징과 따르는 스코프

4.어떤 변수를 사용하는게 좋은가?
var는 구시대적 선언방식이다.블록스코프를 무시하고 함수 스코프만 따르기에 특성을 제대로 알지못하면 에러코드에 빠지기쉽다.
반면 let은 블록스코프와 함수스코프를 따르며 재선언도 방지해준다.
블록 단위로 스코프를 구분했을때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let키워드의 사용이권장된다
하지만 옛날에 쓰여진 코드를 봐야할 일이 많기때문에 var의 특성도 꼭 알고 있어야한다
const의 사용은 값의 변경을 최소화 해주기때문에(값을 재할당하는 경우,TypeError) 보다 안전한 프로그램을 만들수 있다

5.변수 선엔에서 주의할 점

1)var로 선언된 전역변수및 전역함수는 window객체에 속하게 된다
  • 어디서든 접근 가능한 변수와 함수가 되지만, 다른함수 혹은 로직에 의해 의도하지않은 변경이 발생할 수 있음
    (side effect)
2)var로 선언된 전역 변수가 window기능을 덮어씌워 내장 기능을 사용 못하게 만들 수 있음
3)선언 없이 변수를 할당하지 말라
  • 선언 없이 변수를 할당하면,해당 변수는var로 선언한 전역 변수처럼 취급된다

클로저


클로저함수란 무엇인가?

1.클로저의 정의
클로저는 함수와 함수가 선언된 어휘적 환경(Lexical environment)의 조합이다.

  • 어휘적 환경 :변수 및 함수 선언의 형태가 들어가있는 공간? 이라고 일단생각
    2.클로저의 핵심
  • 스코프를 이용해, 변수의 접근 범위를 닫는것에 있다.
  • 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해줍니다.

클로저함수의 특징

1.클로저 함수는 '함수를통해 리턴되는 함수'이다
2.클로저 함수는 외부 함수의 변수에 접근 가능한 내부함수이다

클로저함수가 가지는 장점

1.데이터를 보존하는 함수

  • 클로저는 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장됩니다.
    (렉시컬 환경에 저장됨)
  • 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해줍니다

2.클로저 모듈 패턴

  • 여러개의 클로저함수를 담은 객체를 저장
  • 외부에서 내부스코프로 접근할 수 없기에 'value'를 직접 수정 불가능 //정보의 접근 제한(캡슐화)

    makeCounter()를 어떤 counter1 ,counter2에 넣어줄때 이들은 각각 서로다른 렉시컬 환경을 가지게 된다
    따라서 counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존할 수 있습니다.

post-custom-banner

0개의 댓글