[TIL] #12. 원시자료형&참조 자료형 그리고 스코프

2022.5.12. (목)

1. 오늘의 소감

• 원시자료형과 참조 자료형은 쉽다고 생각했다. 근데 또 막상 실제 메모리 영역의 동작 방식을 생각하면 머리가 복잡해진달까...? 가장 핵심이 되는 명제는 “변수에 원시자료형을 할당하면 ‘값'이 담기고, 참조자료형을 할당하면 ‘주소’가 담긴다”이다. 하지만 또 정확히 말하자면 원시자료형도 메모리 영역에 저장된 후 그 주소가 변수에 저장되는 것은 맞다.... 다만 변수에 재할당을 하면 또 새로운 데이터를 메모리에 저장하고 그 주소를 새로 연결시키니까, 기존 메모리 주소와는 상관이 없어지는 것일뿐.... 내가 말하고 있지만 그림으로 보지 않으면 헷갈릴 수 밖에 없는 파트였다.

2. 학습한 키워드

• 원시 자료형 = 원시 타입, 참조 자료형 = 참조 타입, 값, 주소(reference), 원시 자료형 7가지 - number, string, symbole, bigint, undefined, boolean, (null), 참조 자료형 1가지 - object(배열, 객체, 함수수...), heap
• 스코프, 전역 스코프, 지역 스코프, 전역 변수, 지역 변수, 변수의 접근 규칙, 블록 스코프, 함수 스코프, 화살표 함수는 블록 스코프, var, let, const, window 객체, strict 모드

3. 키워드를 바탕으로 학습 내용 설명해보기

• 자바스크립트는 데이터를 저장하는 방식에 따라 크게 두 가지 자료형으로 나뉜다.
• 원시 자료형(primitive type, 원시 타입) 과 참조 자료형(reference type, 참조 타입)이다.
• 원시 자료형은 총 7가지 이다. number, string, symbole, bigint, undefined, boolean, (null)
• 참조 자료형은 1가지 이다. object(배열, 객체, 함수 도 object 이다.)
• 원시 자료형의 값은 변경 불가능하다. 변수에 다른 값을 재할당할 수 있을 뿐.
• 변수에 원시 자료형을 할당하면 ‘값'이 담긴다.
• 변수에 참조 자료형을 할당하면 ‘주소'가 담긴다.
• 값이 담기느냐, 주소가 담기느냐에 따라 변수를 다른 변수에 복사했을 때 원본에 끼치는 영향이 달라진다.
• 값이 담기는 경우(원시 타입 할당), 변수를 복사한 변수를 변형해도(재할당해도) 원본 변수의 값이 바뀌지 않는다.
• 주소가 담기는 경우(참조 타입 할당), 변수를 복사한 변수를 변형하면 원본 변수의 값이 바뀐다.
• 원시 타입은 동일한 크기의 메모리 하나에 하나의 값만 저장된다.
• 참조 타입은 메모리에 주소값만 저장되고, 그 주소는 특수한 저장 공간인 heap에 연결되어있다. 해당 주소의 heap 에는 다른 값들의 주소가 줄줄이 연결되어 있는 형태이다.
• 참조 타입에는 다량의 데이터를 저장할 수 있다. 저장공간이 유동적이기 때문이다. 따라서 동적인 크기의 데이터를 저장해야한다면 참조 타입이 유리하다.
• 참조 타입끼리는 아무리 형태가 같아도 ‘주소가 다른 두 개의 객체'로 판단하기 때문에 동치 비교에서 false 가 나온다.

[] === []  //false
{} === {}  //false

• 스코프란? 변수의 (접근 규칙에 따른) 유효 범위이다.
• 변수의 접근 규칙 3가지
  • 안쪽 스코프에서 바깥 스코프의 변수에는 접근할 수 있으나, 반대는 불가하다.
  • 스코프는 중첩이 가능하다.
  • 지역 변수는 자신의 스코프 안에서, 전역 변수보다 높은 우선순위를 가진다.
• 변수에 접근할 수 없는 경우 ReferenceError 가 난다.
• 최상위 스코프를 전역 스코프, 그 외의 스코프를 지역 스코프라고 한다.
• 전역 스코프에 있는 변수를 전역변수, 지역 스코프에 있는 변수를 지역 변수라고 한다.
• 블록{} 으로 감싸진 영역을 블록 스코프라하고, 함수로 감싸진 영역을 함수 스코프라고 한다.
• 블록 스코프에 함수 스코프가 속한다. 함수 스코프로 블록{}으로 감싸져 있으니까!
• 화살표 함수는 블록 스코프로 취급된다.
• var 는 함수 스코프이며 블록 스코프는 무시한다. 단, 화살표 함수의 블록은 무시하지 않는다.
• var 는 재선언이 가능하며 오류를 발생시키지 않는다. 재할당도 가능하다.
• let 은 블록 스코프이며 재할당은 가능하나, 재선언시 오류를 발생시킨다.
• const는 블록 스코프이며 재선언과 재할당 모두 불가하다.
• const 는 변하지 않는 상수 변수로 값을 재할당할 필요가 없는 경우에 사용한다.
• const 의 활용은 안정적인 프로그램에 기여할 수 있다.
• 변수 선언 시 주의할 점 4가지
  • window 객체 고려하기
  • 전역 변수 최소화하기
  • let, const 를 이용하기 (var 말고)
  • 선언 없는 변수 할당 금지
• window 객체는 브라우저에만 존재하며, 브라우저 창을 의미하는 객체이다.
• 그러난 브라우저 창과 관계없이 전역 영역을 담고있다.
• 즉, 전역으로 선언된 변수나 함수는 window 객체에 속한다.
• 전역 변수는 다른 함수나 로직에 의해 의도되지않은 변경이 일어날 수 있다. 이를 부수효과(side effect) 라고 한다. 부수 효과를 줄이는 게 버그없는 코드로 가는 지름길이다.
• 따라서 전역 변수는 가능한 적게 써야한다.
• var 변수 선언 키워드 보다는, let 이나 const 를 사용해야한다.
• var은 변수 호이스팅이 일어나고(스코프 최상단에 변수가 선언된 것처럼 작동), 변수 재선언시 에러를 발생시키지 않기 때문에 실수를 예방할 수 없다.
• 선언 키워드 없이 변수를 할당하면 var 로 선언한 전역 변수처럼 취급된다. var 키워드로 써지는 것도 안 좋고, 전역 변수가 되는 것도 안 좋다...
• strict mode를 사용하면 이런 선언 없는 변수 할당 시 에러를 발생시켜준다.
• strict mode 란 js를 더욱 엄격하게 작동되도록 하는 방법이다.
• strict mode 사용하기 - js 파일 최상단에 따옴표까지 붙여서 ‘use strict’; 라고 써주기!