TIL) Javascript 핵심 개념과 문법

데이터를 저장하는 방식에 따른 분류

원시 자료형(primitive data type)

• 고정된 저장 공간을 차지하는 데이터
• 원시타입 데이터를 복사한 값은 원본값이 변경돼도 변경되지 않는다.
• 객체가 아니면서 method를 가지지 않는 6가지의 타입 string, number, bigint, boolean, undefined, symbol, (null) 이 있다.

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

const name = eunji;
const num = 111;

• 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

"good morning"
"nice try"
// 여기서 둘다 변경될 수 없는 고정된 값임

let word = "good morning";
word = "nice try";
// 하지만 변수에 재할당해 변수 내용을 변경하는 것은 가능함.


const word = "good morning";
word = "nice try";  //에러 발생
// const는 변수 재할당이 불가능함.

---

참조 자료형(reference data type)

• 대량의 데이터를 다루기에 적합한 배열, 객체, 함수가 대표적이다.

• 주소를 참조한 것이기 때문에 복사본의 데이터에도 영향이 간다.

• 따로 자료 구조를 구현한 이유는 변수에 넣을 수 있는 원시형에서는 데이터 크기가 제한되기 때문이다.

  heap

  원시형과 달리 참조형은 별도의 데이터함에 저장되고 이 데이터 보관함에서는 자기 마음대로 사이즈를 늘렸다가 줄였다가 하는데(동적이라고 할 수 있다) 이를 heap 이라고 한다.

---

스코프

• 변수의 접근 규칙에 따른 유효 범위

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

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

3. 전역 스코프(Global Scope) : 가장 바깥쪽의 스코프

4. 지역 스코프 (local scope) : 전역이 아닌 다른 스코프 전부

5. 지역 스코프 에 선언한 변수는 지역 변수, 전역 스코프 에 선언한 변수는 전역 변수

6. 지역 스코프 는 전역 스코프 보다 더 높은 우선순위를 가짐

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

스코프의 종류

1. 블록 스코프(blck scope)

• 중괄호로 둘러싼 범위(중괄호를 기준으로 범위가 구분됨.)

2. 함수 스코프(function scope)

• 함수로 둘러싼 범위
• function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듦.
• ! 유의할 점
  화살표 함수는 블록 스코프로 취금됨(함수 스코프가 아님)

변수 키워드의 종류

var 키워드

• 블록 스코프를 무시하고 함수 스코프만 따른다.(화살표 함수의 블록 스코프 제외)
• 재선언을 해도 아무런 에러도 내지 않는다.
• 전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있다.

let 키워드

• 블록 스코프를 따른다.
• 재선언을 방지한다.
• 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let 키워드 사용이 권장된다.

const 키워드

• let 키워드와 동일하게 블록 스코프를 따른다.
• 값이 변하지 않는 상수를 정의할때 사용한다.
• 값의 변경을 최소화하여 안전한 프로그램을 만들 수 있다.값을 새롭게 할당할 일이 없다면 const 키워드의 사용이 권장된다.
• 값을 재할당하는 경우, TypeError를 내므로 의도하지 않은 값의 변경을 막는다.

이를 표로 정리하면

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

변수 선언시 주의할 점

• 선언 없는 변수 할당 금지
  ex)

function showName() {
  // name은 전역 변수로 취급됨.
  name = eunji;
  console.log(name); // eunji
}
showName();
console.log(name); // eunji
console.log(window.name); //eunji

-> name은 선언한 적은 없어도 값을 할당하며 마치 var로 선언된 전역 변수처럼 작동함.

• 실수를 방지하기 위해 Strict Mode를 사용할 수 있다.
• Strict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어주고 "선언 없는 변수 할당"의 경우에는 Strict Mode는 에러로 판단한다.
• Strict Mode를 적용하려면, js 파일 상단에 'use strict'라고 입력하면 된다.

'use strict';