JavaScript TIL 07

2021년 7월 1일에 작성된 문서입니다.
javascript 배운 내용을 정리했습니다.

---

원시 자료형과 참조 자료형

원시 자료형 (primitive data types)

객체가 아니면서 메소드를 가지지 않는다. (총 6개 타입!)

• string
• number
• bigint
• boolean
• undefined
• symbol, (null)

• 데이터 보관함(변수) 한 칸에 하나의 데이터만 넣을 수 있다.
• 원시 자료형이 담기는 보관함의 크기는 고정.

변수에는 하나의 데이터만 담습니다.

 const num1 = 123;
 const num2 = 123456789;

변수에는 데이터의 크기와는 관계 없이 하나의 데이터만 담는다.

원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담김.

참조 자료형 (reference data type)

원시 자료형이 아닌 모든 것은 참조 자료형

• 배열 [ ]
• 객체 { }
• 함수 function( ){ }

참조 자료형이 저장되는 특별한 데이터 보관함

• 참조 자료형에는 여러 데이터가 담긴다.

  • 이 데이터가 위치한 곳(메모리 주소)을 가리키는 주소가 변수에 저장.

• 변수에는 특별한 데이터 보관함을 찾아갈 수 있는 주소가 담김.

  • 특별한 데이터 보관함 크기는 동적(dynamic)으로 변한다

• 데이터는 별도로 관리, 우리가 직접 다루는 변수에는 주소가 저장되서 reference type.

  • 이런 특별한 데이터 보관함을 heap이라고 함.

특별한 데이터 보관함은, 왜 동적으로 크기가 변하게 되었을까요?

배열과 객체는 대량의 데이터를 쉽게 다루기 위해서 사용됨.
쉽게 사용할 수 있는 이유는 크기가 고정되어 있지 않고 우리가 데이터를 추가하고 삭제하는 것에 따라서 크기가 달라지기때문.
대량의 데이터가 들어오는 경우 고정된 데이터 공간을 사용하는 것이 비효율적이니까.

참조 자료형이 할당될 때는 보관함의 주소(reference)가 담김.

스코프

스코프와 주요 규칙

변수에 접근할 수 있는 범위

• 범위가 중괄호(블록) 또는 함수에 의해 나뉘어지고, 그 범위가 스코프.
  • 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능.
  • 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용 불가능.

스코프는 중첩이 가능.

• 전역 스코프(Global Scope) : 가장 바깥쪽의 스코프
• 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)
  • 지역 변수는 전역 변수보다 더 높은 우선순위를 가짐.

스코프의 종류

• 블록 스코프(block scope) : 중괄호를 기준으로 범위가 구분
  
• 함수 스코프(function scope): function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듦.
  
• 화살표 함수는 블록 스코프로 취급. 함수 스코프가 아님!
  
  
  
  

---

let, var

• var 키워드로 정의한 변수는 블록 스코프를 무시, 함수 스코프만 따름.
  • (var 보다는 let 으로 변수 선언을 하자.)
• var를 사용하지 않더라도 함수 스코프는 let으로 선언된 변수의 접근 범위를 제한함.
• 블록단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드 작성이 가능
• let 키워드는 재선언을 방지. (변수를 재선언하는 경우는 버그!)
  
  

const

• 변하지 않는 값, 상수(constant)를 정의할 때에는 const를 이용
• 값의 변경을 최소화하여 안전한 프로그램 작성 가능
• 값을 새롭게 할당할 일 없다면 const 사용을 권장
• const는 값의 재할당이 불가능.
  • 값을 재할당할 경우 TypeError를 낸다.

표로 정리

-	let	const	var
유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

---

변수 선언시 주의 사항

브라우저에만 존재하는 window 객체

• 브라우저의 창(window)을 의미하는 객체
• 이와 별개로 전역 영역을 담고 있다.
• 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면, window 객체에서도 동일한 값을 찾을 수가 있다.

var myName = '김코딩';
console.log(window.myName); // '김코딩'

function foo( ){
	console.log('bar');
}

console.log(foo === window.foo); // true

1. 전역 변수에 너무 많은 변수를 선언하면 안 된다.

• 전역 변수: 어디서든 접근이 가능한 변수.
• 편리한 대신, 다른 함수 혹은 로직에 의해 의도되지 않은 변경이 발생할 수 있음.
  • 부수 효과(side effect) 발생

2. let과 const를 주로 사용하자.

• var 키워드는 블록 스코프 무시. 또한 재선언을 해도 에러를 내지 않는다.
  • 같은 스코프에서 동일한 이름의 변수를 재선언 하면 버그 유발

3. 전역 변수를 var로 선언하면 문제가 될 수 있다.

• 전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있습니다.

4. 선언 없이 변수를 할당하지 말자.

선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

Written with StackEdit.