23.01.02 - 원시 자료형과 참조 자료형, 스코프

1. 원시 자료형

객체가 아니면서 메서드를 가지지 않는 데이터.

원시 자료형은 모두 데이터가 하나의 정보를 담고 있다. 데이터 보관함 한칸 안에 하나의 데이터를 넣을 수 있는 것이다. 

 

1) 원시 자료형의 종류

• String
• Number
• Bigint
• Boolean
• Undefined
• Symbol
• null

2) 원시 자료형의 특징

- 모든 원시 자료형은 하나의 데이터를 담고 있다. 

- 모든 원시 자료형의 값은 변경이 불가능하지만 변수에 다른 데이터를 할당할 수는 있다.

- 원시 자료형의 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 

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

 

📂 정리

let a = 10;
let b = a;
b = 100;

// a의 값은? => 10
console.log(a);
// a와 b는 모두 원시 자료형이다. 
// 원시 자료형이 변수에 할당될때는 변수의 값(value) 자체가 담기고 그 값은 변경이 불가능하다.

 

 

2. 참조 자료형

하나의 주제가 있지만 서로 다르고 여러개의 데이터를 가질 수 있다. 

참조 자료형은 코드를 작성하는 방법에 따라 보관되는 데이터의 양이 달라진다. 따라서 원시 자료형처럼 크기가 고정되는 것이 아닌 크기가 동적으로 변할 수 있는 저장소가 필요하다. 

그리고 이 특별한 보관함을 heap이라고도 부른다. 

 

🤔 참조 자료형의 데이터 보관함은 왜 동적으로 변해야 하지? 

배열과 객체는 대량의 데이터를 쉽게 다루기 위해 사용된다. 

쉽게 사용할 수 있는 이유는 크기가 고정되지 않고 데이터를 추가 삭제하는 것에 따라서 크기가 달라지기 때문이다. 

따라서 크기가 상황에 따라 커지거나 작아질 수 있는 데이터 저장소가 필요하다. 

데이터가 언제 늘어나고 줄어들지 모르기 때문에 별도의 저장공간을 마련하여 따로 관리하는 것이다. 

 

1) 참조 자료형의 종류

• 배열
• 객체
• 함수

2) 참조 자료형의 특징

- JavaScript에서 원시 자료형이 아닌 모든 것은 참조 자료형이다. 

- 참조 자료형은 변경이 가능하다. 

- 참조 자료형을 변수에 할당할때는 값이 아닌 주소를 저장한다. 

- 참조 자료형이 할당될 때는 보관함의 주소가 담긴다. 

- 참조 자료형은 동적으로 크기가 변하는 데이터 보관함을 사용할 수 있다. 

 

📂 정리

let obj = { a : 1 };
let test = obj;
test.a = 2;

// obj.a의 값은? => 2
console.log(obj.a);
console.log(obj === test);
// obj와 test는 참조 자료형이다.
// 참조 자료형은 변수에 할당될때 값이 아닌 해당 값이 저장된 메모리의 주소를 변수에 할당한다. 
// 따라서 obj와 test는 같은 주소가 할당되어있다. ((obj === test)를 하면 true가 나온다)
// 그러므로 test.a를 변경할 경우 obj또한 같은 주소가 핟당되어 있으므로 변경된 값이 출력될 것이다.

 

3. 스코프

변수 접근 규칙에 따른 유효 범위를 말한다. 

범위는 중괄호(블록) 또는 함수에 의해 나뉘어진다. 

 

1) 스코프 규칙

• 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 그 반대(바깥쪽 스코프에서 안쪽 스코프)는 불가능하다.
• 스코프는 중첩이 가능하다. 
• 전역 스코프(Global Scope) : 가장 바깥의 스코프
• 지역 스코프(Local Scope) : 전역 스코프 외의 스코프
• 쉐도잉(Variable Shadowing) : 지역 스코프 내에서는 지역변수가 전역변수보다 우선 순위가 높기 때문에, 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에게 가려지는 현상을 말한다. 

2) 스코프의 종류

• 블록 스코프(Block Scope) : 중괄호를 기준으로 범위 구분. 블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는 즉시 접근할 수 없게 된다. 
• 함수 스코프(Function Scope) : function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다. 
  주의 할 점은, 화살표 함수는 블록 스코프로 취급된다는 점이다. 화살표 함수는 함수 스코프가 아니다! 

3) 스코프와 변수 선언 

(1) var, let, const

	var	let	const
유효범위	함수 스코프 (화살표 함수를 제외한 블록 스코프 무시)	블록 스코프 & 함수 스코프	블록 스코프 & 함수 스코프
값 재할당	불가능	가능	불가능
재선언	가능	불가능	불가능
기타 특징		훨씬 예측가능한 코드 작성이 가능하기때문에 var 보다 let 사용을 권장	상수를 정의할때 사용

 

(2) 변수 선언시 주의할 점

• window 객체
  • window 객체는 브라우저 창을 대표한다. 그러나 브라우저 창과 관계없이 전역 항목도 담고 있음
  • var로 선언된 전역 변수와 전역 함수는 window 객체에 속한다. 
• 전역변수는 최소화 할것
  • 전역변수 : 가장 바깥 스코프에 정의한 어디서든 접근이 가능한 변수.
  • 편리한 대신 다른 함수 또는 로직에 의해 의도치 않은 변경이 생길 수 있다.(= side effect 발생)
• let 과 const 사용
  • var는 블록 스코프를 무시하며 재선언을 해도 에러를 내지 않는다. 
  • 전역변수를 var로 사용할 경우 문제가 생길 수 있다. window 내장 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수도 있다. 
• 선언 없는 변수는 할당 금지
  • 선언 없이 변수를 할당할 경우 그 변수는 var로 선언한 전역 변수처럼 취급된다.
  • 이를 방지하기 위해 strict mode를 사용할 수 있다. 
  • js 파일 상단에 'use strict'를 작성하면 strict mode를 사용할 수 있다. 

 

 

 

 

 

 

**********************

 

원시 자료형, 참조 자료형, 스코프에 대해서 공부했다. 

처음에 참조 자료형은 변수에 값이 아니라 데이터의 주소가 저장 된다는 부분이 좀 헷갈렸는데 

혼자 예제를 만들어보면서 해보니 이해가 좀 더 잘 되는것 같다. 

역시 안될때는 혼자서 예제코드를 많이 만들어보고 연습해보는게 도움이 된다! 

변수는 요즘 주로 let으로 먼저 선언을 하는 편인데, 이게 const를 쓰는게 나은지 헷갈릴 때가 있다. 

그래서 지금은 const로 주로 선언을 하되 추후에 값이 바뀔 것 같은 변수는 let을 쓰는 방향으로 정리해보고 있다.