Variables

IT쿠키·2021년 11월 1일
0

2. Variables - let, const

2-1. let

2-1-1. 소개

let a = 1
function f () {
  console.log(a, b, c)
  a는 내부 블록스코프에서 선언한게 없기 때문에 상위에서 찾아가고
  그다음에 b가 나오므로 이거는 레퍼런스 에러 뜸
  c또한 없으므로 레퍼런스 에러
	let b = 2
	console.log(a, b, c)
  a는 1이 나오고 전역 변수 선언
  b 같은 경우 블록스코프 내분에 있으므로 2
	if (true) {
		let c = 3
		console.log(a, b, c)
    123
	}
	console.log(a, b, c)
  123
}
f()
for (let i = 0; i < 5; i++) {
  console.log(i)
}
console.log(i)

2-1-2. let 상세

1) 재할당 가능

let a = 1
a = 2
console.log(a)

2) 반복문 내에서의 함수 실행시

var funcs = []
// 배열 생성
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
포문이 전부다 돌고 나서 
funcs.forEach(function (f) {
  f()
})
포이치가 돌게됨ㅈ
// 무슨 값이 나올까?
1010번나옴
var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push((function (v) {
    return function () {
      console.log(v)
    }
  })(i))
}
funcs.forEach(function (f) {
  f()
})
let funcs = []
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
	  console.log(i)
  })
}
funcs.forEach(function (f) {
  f()
})
var가 아닌 let인 경우 블록 스코프가 생성되서 즉시실행함수를 굳이? 알아볼 필요가 없음

2-2. const

2-2-1. const 상세

constant varialbe 상수 변수라고 하는데 이게 뭘까?

1) 재할당

const PI = 3.141593
PI = 3.14
파이는 원래부터 정해진 정의
그 순간부터 애는 상수가 되는거임
즉 어떤값이 상수다 라는 건 "절대"적인거 인데 이거는 언제가 정하는 순간
상수-> 절대적으로 변하지 않는 수가 아니다 값을 할당 해줘야 상수가 되는것

2) 최초 선언시 할당하지 않으면

const PI
PI = 3.14

3) 참조타입 데이터의 경우

obj한테 객체를 할당 했는데?

const OBJ = {
  prop1 : 1,
  prop2 : 2
}
OBJ.prop1 = 3
console.log(OBJ.prop1)
const ARR = [0, 1, 2]
ARR.push(3)
delete ARR[1]
console.log(ARR)

해결방안: Object.freeze(), Object.defineProperty()

const OBJ = {}
Object.defineProperty(OBJ, 'prop1', {
  이게 무엇이냐 오브젝트에 있는걸 얼려라 라는걸 뜻함
  value : 1,
  writable: false,
  configurable: false
})

const OBJ2 = {
  prop1 : 1
}
Object.freeze(OBJ2)
오브젝트 2 자체를 얼려버림

여전히 남는 문제점: nested Object의 경우...
네스트한 즉 자식 요소 같은 경우는 어떨까?

const OBJ = {
  prop1 : 1,
  prop2 : [2, 3, 4],
  prop3 : { a: 1, b: 2 }
}
Object.freeze(OBJ)
OBJ.prop1 = 3
OBJ.prop2.push(5)
OBJ.prop3.b = 3
console.log(OBJ)

Object.freeze(OBJ.prop2)
OBJ.prop2.push(6)
console.log(OBJ)

4) 반복문 내부에서의 상수

var obj = {
  prop1: 1,
  prop2: 2,
  prop3: 3
}
객체 obj가 있고 
for (const prop in obj) {
  console.log(prop)
}
// for in 문에 const를 사용하는 이유
// 값을 변경하는 것을 막기 위함
for문에 있는 것도 블록스코프에 영역이다.
// prop -> prop1
           prop2
           prop3
내부에서 어떻게 동작 하냐면
let keys = object.keys(obj);
for(let i=0; i<keys.length; i++){
  const prop = obj[keys[i]];
  console.log(prop);
}
for (const i = 0; i < 5; i++) {
  console.log(i)
}

let const 공통사항

2-3. 공통사항

1) 유효범위

블록스코프 내부가 유효범위로 한다.
tdz가 걸리니 조심

{
  let a = 10
  {
    const b = 20
    console.log(b)
  }
  console.log(a)
  console.log(b)
}
console.log(a)

2) 재선언 (재정의)

요거는 살짝 다른 얘기

var a = 0
var a = 1
console.log(a)

let b = 2
let b = 3
// let b는 이미 선언된 값이 있으므로 안됨
console.log(b)

const c = 4
const c = 5
console.log(c)

var d = 4
let d = 5
const d = 6
var를 쓰지말아라 es6를 사용하는 경우에는 let const를 사용해라
병행해서 사용하면 속도가 느려진다.
왜 느려짐?
궁금한데
console.log(d)

그러면 let하고 const 둘중에 뭐가 좋아?
let은 값 자체의 값이 변경이 가능 그러므로 변경이 필요한 경우면 ㅇㅋ
const는 야 이건 절대 변경하면 안돼라는 경우

3) 초기화되기 전 호출

{
  console.log(a)
  let a = 10
  {
    console.log(b)
    let b = 20
  }
}

{
  console.log(a)
  const a = 10
  {
    console.log(b)
    const b = 20
  }
}

=> hoisting X ?
호이스팅은 되나 변수명만 불러오고 값은 안불러옴

3) TDZ (Temporal Dead Zone, 임시사각지대)

{
  let a = 10
  {
    console.log(a)
    let a = 20
  }
}
{
  const a = 10
  console.log(a)
  {
    console.log(a)
    const a = 20
    console.log(a)
  }
}

4) 전역객체의 프로퍼티?

var a = 10
console.log(window.a)
console.log(a)
delete a
console.log(window.a)
console.log(a)
delete.window.a
이거하면 false 나옴
window.b = 20
console.log(window.b)
console.log(b)
delete b
console.log(window.b)
console.log(b)

let c = 30
console.log(window.c)
console.log(c)
delete c
console.log(window.c)
console.log(c)

const d = 40
console.log(window.d)
console.log(d)
delete d
console.log(window.d)
console.log(d)

전역공간에서 var로 선언한 변수는 전역변수임과 동시에 전역객체의 프로퍼티가 됩니다.
즉 이게 뭔 소리냐? 전역객체의 프로퍼티가 이미 됐으므로 삭제가 어렵다.
false를 내버리는 이유

profile
IT 삶을 사는 쿠키

0개의 댓글