[부트 캠프] 9일차 TIL

WEEK 2-2: JS 깊게 알기

Lesson. Primitive & Reference

1. intro

1) 원시 타입(primitive type) 데이터

• 할당될 때에는 변수에 값(value) 자체가 담긴다
• 고정된 저장 공간(stack)을 차지하는 데이터
• number, string, boolean, null, undefined 등

2) 주소(참조) 타입(reference type) 데이터

• 할당될 때는 보관함(heap)의 주소(reference)가 담긴다
• 저장공간(heap)이 유동적으로 계속 늘어나는 데이터(동적으로 크기가 변하는 특별한 보관함을 사용)
• 배열, 객체, 함수 등의 유형

3) 차이점

• 원시 타입 데이터를 복사하면 각 데이터 값도 복사되기 때문에 원래의 데이터에 영향을 주지 않는다

  let a = 1;
  let b = a
  b = 2;
  console.log(a) // 1

• 참조 타입 데이터를 복사하면 원래 데이터의 주소를 복사하기 때문에 복사한 값에서 데이터를 변경하면 원래의 데이터에도 영향을 준다.

  let e = [10, 20];
  let f = e;
  f[0] = 50;
  console.log(e) // [50, 20]

2. 원시 자료형 깊게 이해하기

1) 정의: 객체가 아니면서 method를 가지지 않는 6가지의 타입 (in js)
-string, number, bigint, boolean, undefined, symbol, (null)
2) 왜 원시 자료형인가?
-원시 자료형은 모두 "하나"의 정보(데이터)를 담고 있다
-옛날에는 데이터 저장소(메모리)의 용량이 제한되어 변수 하나에 데이터 용량이 제한되었고, 그러므로 변수 하나에 데이터 용량이 제한 된 하나의 원시 자료형만을 담을 수밖에 없었다
-원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있고, 이 특징은 참조 자료형이 보관되는 특별한 보관함과는 구분된다.
--컴퓨터가 처음 사용되던 시절에는 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현(e.x. 쉼표 구분 데이터 (csv, (comma-separated values)))
-원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당 가능(e.x. 재할당)
3)

3. 주소(참조) 자료형 깊게 이해하기

1) 정의: 원시 자료형이 아닌 모든 것은 참조 자료형
-대표적으로 배열([])과 객체({}), 함수(function(){})
-대부분의 컴퓨터 언어에는 자바스크립트 처럼 배열(혹은 비슷한)이라는 자료 구조가 구현
-왜 따로 자료 구조를 구현해야만 했을까? 변수에 넣을 수 있는 데이터 크기가 제한되기 때문
-이런 이유로 "데이터의 크기가 동적으로 변하는" 특별한 데이터 보관함이 필요
2) heap: 참조 자료형이 저장되는 특별한 데이터 보관함
-배열([])과 객체({}), 함수(function(){})가 위치한 곳(메모리 상 주소)을 가리키는 주소가 변수에 저장
-즉, 변수에는 특별한 데이터 보관함을 찾아갈 수 있는 주소가 담겨있고, 이 주소를 따라가보면 특별한 데이터 보관함을 찾을 수 있다
-
3) heap은 왜 동적으로 크기가 변하게 되었을까?
-배열과 객체는 대량의 데이터를 쉽게 다루기 위해서 사용
-따라서 크기가 고정되어 있지 않고 우리가 데이터를 추가하고 삭제하는 것에 따라서 크기가 달라지기 때문

Lesson. Scope & Closure

0.intro

1) Scope: 원래 영어에서의 의미는 "범위", 컴퓨터공학, 그리고 자바스크립트에서 조금 더 좁은 의미로 "변수의 유효범위"로 사용
2) Closure: 외부함수의 변수에 접근할 수 있는 내부함수
-함수와 함수가 선언된 어휘적(lexical) 환경의 조합으로, 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성
-자바스크립트에서는 다른 컴퓨터 언어와는 조금 다른 특성

1.Scope

1) 정의: 변수 접근 규칙에 따른 유효 범위로 변수와 그 값이 어디서부터 어디까지 유효한지 판단하는 범위
-우리 눈에 보이지 않더라도 변수에는 유효범위가 존재
-그러므로 변수는 어떠한 환경 내에서만 사용 가능
-프로그래밍 언어는 각각의 접근 규칙이 존재

2) local scope vs. global scope

let greeting = 'Hello';
function greetSomeOne() {
let firstName = 'Josh';
return greeting + ' ' + firstName;
}
greetSomeone(); // 'Hello Josh'
firstName; // Reference Error: firstName is not defined

• function greetSomeOne(){} 안쪽에서 선언된 local scope 변수는 local 밖에서 사용할 수 없다.
• function greetSomeOne(){}이외의 global scope 에서 선언된 변수(e.x. greeting)는 어디서나 사용 가능

3) 특징

• scope는 중첩이 가능
  ->함수 안에 함수를 넣을 수 있다
• 범위 비교: global scope > local scope
  -> 안쪽 scope에서 바깥 변수/함수를 접근하는 것은 가능
  -> 바깥쪽 scope에서 안쪽 변수/함수를 접근하는 것은 불가능
• 우선 순위:
  -> global scope는 최상단의 Scope로 전역 변수 어디서든 접근 가능
  -> 그러나 함수 내에서 local scope가 global scope보다 더 높은 우선순위
  

2.변수 선언과 scope

1) 변수 선언과 Scope의 차이 비교 예시

(A)
let name = "Richard";
function showName() {
let name = "Jack"; // 지역 변수로 showName() 함수 안에서만 접근 가능
console.log(name); // Jack
}
console.log(name); // Richard
showName();
console.log(name); // Richard

(B)
let name = "Richard";
function showName() {
name = "Jack"; //let 키워드가 없는 전역 변수로 바깥 scope에 있는 name 변수
console.log(name); // Jack
}
console.log(name); // Richard
showName();
console.log(name); // Jack

2) fucntion Scope VS. Block Scope

• block : 중괄호로 시작하고 끝나는 단위

  if (true) {} // 중괄호로 시작하고 끝나는 단위
  for (let i = 0; i < 10; i++) {} // 중괄호로 시작하고 끝나는 단위
  {console.log('it works');} // 중괄호로 시작하고 끝나는 단위

• 예시

  for(let i = 0; i < 5; i++) {
  console.log(i); //다섯번 iteration
  }
  console.log('final i:', i) //reference Error

• block범위를 벗어나는 즉시 변수를 사용할 수 없기 때문

3) var 키워드 VS. let키워드

(1) var키워드

• 변수를 정의하는 또 다른 키워드
• 기본적으로 함수 단위로 자신만의 scope를 갖는다(기본값)
  -> (;old way)

(2) let키워드

• 함수 단위로 자신만의 scope를 가지는 var키워드와 반대
• block단위로 Scope를 구분했을 때에 예측하기 쉬운 코드 작성 가능
• var키워드보다 let키워드를 추천

(3) 예시

for(var i = 0; i < 5; i++) {
console.log(i); //다섯번 iteration
}
console.log('final i:', i) // 5

• var키워드를 통해 block범위를 벗어나도 같은 function scope에서 사용 가능하기 때문
  -> 해당 예시에서는 따로 function은 없지만 이 자체가 하나의 function Scope에 해당
  

function greetSomeone(fistName) {
var time = 'night';
if(time === 'night') {
var greeting = 'Good Night';
}
return greeting + ' ' + firstName;
}
greetSomeone('Steve'); // Good Night Steve

• 개발자 도구를 통회 조회하면 scope창에 global / local scope가 모두 존재
• var 키워드 사용
• (window 값을 갖는 this를 제외하면) Local Scope에는 세 개의 변수 (fistName, greeting, time)가 존재
• 함수 안에 정의된 모든 변수를 Local Scope에서 사용 가능

function greetSomeone(fistName) {
let time = 'night';
if(time === 'night') {
let greeting = 'Good Night';
}
return greeting + ' ' + firstName;
}
greetSomeone('Steve');

• let 키워드 사용
• Local Scope에 greeting이 없음
• 결과적으로 greeting 변수가 없으므로 Reference Error발생
• greeting 변수는 if문의 block 안에서 접근 가능

(4) const키워드

• 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용
• let 키워드와 동일하게 block scope를 따름
• 값을 재정의하면 typeError가 발생

(5) 선언 키워드와 특징 비교

• var키워드를 사용한 재선언시, 아무런 에러도 나지 않는다
  -> 그러나 실제 코딩에서 재선언이 필요한 경우는 극히 드물고,
  -> 오히려 var키워드를 사용함으로써 인식하지 못한 재선언으로 버그가 생김
  -> let키워드를 권장하는 이유

3. 전역변수와 window객체

1) window

• 정의: 전역범위를 대표하는 객체

• global Scope에서 선언된 함수, var키워드를 이용해 선언된 변수는 window객체와 연결 된다

  var myName = 'paul';
  myname === window.myName // true

• 주의: 전역 범위에 너무 많은 변수를 선언하지 않아야 한다
  -> 어떤 라이브러리에서 어떤 변수를 사용할지 모르기 때문에 서로 같은 변수명을 사용할 경우 어떤 충돌이 일어날지 모름
  -> let 키워드를 권장하는 이유

2) 선언 없이 초기화된 전역 변수

function showAge() {
age = 90; // 전역 변수로 취급
console.log(age);
}
showAge(); // 90
console.log(age); // 90

• 선언 키워드 (var, let, const) 없이 변수를 초기화 해서는 안 된다
• 에러를 내지 않기 때문에 버그를 만들어낼 수 있다
• • 'use strict' : strict model을 적용해 문법적으로 실수할 수 있는 부분을 에러로 판단

'use strict' //
function showAge() {
age = 90; // 전역 변수로 취급 x
console.log(age);
}
showAge();
console.log(age);

Socrative