[Achievement Goal]

1. 원시자료형(primitive type) vs 참조자료형(reference type)의 차이 알기

2. 스코프의 의미와 왜 적용하는지 이해하기.

• 전역 스코프 ,지역 스코프
• 전역 변수, 지역 변수간의 우선순위
• 중첩규칙, block 스코프, 함수 스코프

3. let/ const / var 의 차이.

1.원시자료형(primitive type) vs 참조자료형(reference type)

(1) 원시 자료형이란 ?

string, number, boolean, undefined, null 등 이 있다. 이들 모두 데이터가 하나의 정보를 담고 있으며 특정 메소드를 갖지 않는다. 즉, 변수 하나에 하나의 정보(데이터) 만 갖고 있으며 값 자체에 대한 변경은 불가능한 immutable 타입들이다.

하지만 변수(let,var)에 저장된 정보는 다시 재할당 하여 내용을 변경할 수 있다.
(상수 const 는 재할당 불가)

let num = 3
num = 5 // let 은 재할당 가능
const word = 'coding is very difficult '
word = 'coding is very fun' // const 는 재할당 불가. 

(2) 참조 자료형이란 ?

배열, 객체, 함수 종류가 있으며, 이들의 공통점은 하나의 변수 안에 여러 데이터가 담긴 "주머니"가 담길 수 있다는 것이다. 헷갈리지 말아야 할 점은, 변수에는 무조건 한개의 데이터만 올 수 있다. 그러므로 여러가지의 데이터들을 한데 묶어 줄 주머니 역할이 필요한 것이다. 이 주머니 역할들을 배열, 객체, 함수가 해준다. 이 주머니들은 참조 자료형을 읽을 때 'heap' 이라는 저장공간에 자리를 차지하여 저장된다.

// 각각의 주머니에 담긴 데이터는 여러 메소드를 통하여 데이터값 변동 가능.
const participant = ['sally','sook','bob','carry','tom']
const person ={
  name : 'sally',
  age : 30,
  city : 'vancouver'
}

🤔 헷갈리기 쉬운 reference type .

'배고파' === '배고파' // true => 원시타입
['배고파','밥줘'] === ['배고파','밥줘'] // false => 참조,주소타입

둘다 눈으로 보기엔 같은값을 할당해 주고 있는것 같은데
결과는 true / false 로 다르다.
그 이유는 원시타입은 변수 하나에 정적인 데이터 값 하나만 들어가기 때문에
눈으로 보이는 값이 같다면 true 가 될 수 있다.
하지만 참조타입은 데이터가 담긴 주머니/주소 의 개념이다.
heap 이라는 공간안에 각 주머니를 차지하고 있기 때문에 같아질 수 없다.
[] !== [] 빈 배열또한 같아질 수 없는 이유와 같다.

레퍼런스타입 + 레퍼런스 타입 끼리 뭉치면 서로 영향을 받고,
레퍼런스타입 + 원시타입 끼리 뭉치면 원시타입은 레퍼런스 타입에 영향을 끼치지 않는다!
아 .. 알겠다 .. !

2. 스코프의 개념 알기

(1) 스코프란 ?

무언가 제한 된 범위를 보기위해 사용되는 개념. 즉, 변수의 유효 범위를 볼 때 사용된다.

(2) 전역 변수 / 지역 변수

스코프는 중괄호 또는 함수를 기준으로, 바깥 스코프와 내부 스코프로 크게 나눌 수 있는데 이를 전역 스코프, 지역 스코프라고 정의하며, 전역 스코프 이하의 것은 모두 지역 스코프이다.
전역 스코프와 지역 스코프에서 각각 정의된 변수를 전역 변수, 지역 변수라고 한다.
전역 변수(바깥 스코프에 정의된 변수) -> 지역 변수(내부 스코프에 정의된 변수)
반대로, 내부 스코프에서 정의된 변수는 바깥 스코프 변수에 영향을 끼치는 것은 불가하다.

예시 👇🏼

let num = 30; <!--바깥 스코프-->

if(num){
  let name = 'sook' <!-- 내부 스코프 -->
  let introduce =`hello, i'm ${name} of ${num}'s $`
  console.log(introduce) // `hello, i'm sook of 30's $`
}

console.log(introduce) <!-- reference error!-->

이렇게, 바깥 스코프에 있던 num = 30 변수는 if 문 안에 있는 introduce 변수에 반영되어 콘솔로그에 찍히지만,
바깥에 있는 콘솔로그의 introduce 변수는 내부 스코프의 introduce 변수에 영향을 받을 수 없어 레퍼런스 에러가 나게 된다.

🤔 헷갈리기 쉬운 scope .

전역 변수는 지역 변수에 영향을 끼치지만 그 반대는 불가하기 때문에, 지역 스코프로 갈 수록 사용 가능한 범위가 넓어진다. (지역 스코프의 우선순위가 더 높다.)
즉, 지역 스코프에서 전역 스코프로 접근할 수 있으며 그 반대는 불가하다.

(3) 블록 스코프 / 함수 스코프

블록 스코프는 중괄호를 기준으로 구분하는 범위를 뜻하며,
함수 스코프는 함수(function) 키워드안에 들어있는는 함수 선언식 및 표현식의 범위를 뜻한다.
예외적으로, 함수 실행문 중 화살표 함수 ()=>{} 는 블록 스코프에 해당된다.

블록 스코프의 예시 👇🏼

let name = 'sook'
if(name) {
let age = '30'
console.log(my name is ${name} of ${age}
}

함수 스코프의 예시 👇🏼

let name = 'sook'
function name(){
let age = '30'
console.log(my name is ${name} of ${age}
}

3. let / var / const 의 차이.

(1) let vs var

let 과 const 가 나오기 전, 개발자들은 변수 var 를 사용해왔다.
그렇다면 정확하게 var 는 어떤 변수일까?

앞서, 블록/함수 스코프를 기준으로 지역변수는 전역변수에 영향을 끼치지 못한다고 설명하였다. 하지만 블록스코프에서 var 를 쓰면 이를 무시하고 가장 최신에 썼던 변수명이 최종 리턴되어진다. (함수 스코프는 let과 동일.)

예시👇🏼

for(var i = 0; i < 5; i++){
console.log(i) // 1,2,3,4,5
}
console.log(i) // 5

let 대신 var 를 썼더니 전역스코프에서 실행시켜도 블록스코프를 무시한 채 결과값 5가 출력되었다.

이러한 방식은 지역스코프 바깥을 벗어나도 실행이 되기 때문에 코드가 많이 들어가는 하나의 프로젝트를 진행 할 때 오류를 발생시키기 쉽다.
그리고 그럴일은 드물겠지만 let 키워드는 var 키워드와 다르게 재 선언을 방지하는 기능이 있다. 그렇기 때문에 안전성의 이유로 var 대신 let 키워드를 쓰는것을 추천한다.

(2) const

const 는 변수가 아닌, 상수이다.
이말은, 변하지 않는 값을 말하며 한번 할당 시 재할당이 불가하다.
그럼에도 쓰는 이유는, 값의 변경을 최소화 하여 안전한 프로그램을 만들 수 있기 때문에 값이 재할당 될 일이 없다면 const 사용이 권장 된다.

const div = document.queryselector('div')
const section () => { ~~ }

let이든 const 든, 변수명은 명확하게 명확하게 입력해주도록 한다.
만약 변수명을 작성하지 않는다면 작동은 하겠지만 모든 것을 var 로 받아들여
원치않은 결과를 초래 할 수 있다.
혹시모를 사태를 방지하고 싶다면 'use strict' 를 먼저 선언한 후 코딩을 시작해도 좋다.

name = 'sook' // var = 'sook' 으로 인식

🤔 헷갈리기 쉬운 const .

const p = document.queryselector('p')
p.textContent = 'hi'

p 는 const 로 선언해서 재할당이 불가한것으로 알고있는데 어떻게 hi 가 될까?
엄밀히 말하면 p는 재할당 된것이 없다.
p의 textContent 가 'hi' 로 재할당 된 것일뿐!