클린코드

고규식·2021년 12월 8일

변수 다루기

코드를 깔끔하게 작성하는 것은 중요하다.
이전까지 작성해 왔던 코드작성 방식들을 되돌아보는 시간을 가지려고한다.
이번 챕터는 변수를 어떻게 다루는지 알아보려고한다.

1. var를 지양하자

ES2015이전에는 var를 사용해서 변수를 지정했다.
ES2015이후에 나온 let & const는 자바스크립트가 발전함에 따라 발생한 좋은 예 중 하나이다.

var는 함수단위 스코프
let 과 const 는 블록단위 스코프 - 사용하면 굉장히 안전하게 코드를 작성 할 수 있다.

var 예시)

console.log(name) // undefined 오류 발생하지 않음

var name = "이름";
var name = "이름2"; // 오류 발생하지 않음
var name = "이름3"; // 오류 발생하지 않음
var name = "이름3"; // 오류 발생하지 않음

console.log(name) //이름3

💡 var를 사용하면 편하게 재할당까지 할 수 있고 재할당을 넘어서 재선언(중복선언)까지 가능하다.
😡 하지만 이런 코드들이 1000줄이상 많아진다면 겹치고 겹쳐지면서 어디서 중복됬는지 찾는 것은 정말 헬 일 것이다.

let & const 예시)

let name = "이름3";
let name = "이름3"; // ^SyntaxError : Identifier 'name' has already been declared
let name = "이름3"; 

console.log(name)

💡 let 과 const 를 사용하면 이미 선언한 변수에 대해서는 다시 재선언 할 수 없다.
안전하게 변수를 사용 할 수 있다.

let 예시)

let name; // 먼저 선언
name = "이름";
console.log(name) // 이름

name = "이름2";
name = "이름3";
console.log(name) //이름3

const 예시)

const name; // Uncaught SyntaxError: Missing initializer in const declaration
name = "이름";
console.log(name)

name = "이름2";
name = "이름3";
console.log(name)

💡 let은 먼저 선언하고 그 다음 할당해도 오류가 나지 않고 재할당이 가능하다.
const는 선언과 동시에 할당을 해주어야 하고 재할당이 불가능하다.
(재할당 하지 않을 변수들은 const로 선언합시다!)

2. functional Scope vs block Scope

var는 함수단위 스코프
let 과 const 는 블록단위 스코프

var global = '전역';

if(global === '전역'){
	var global = '지역'
    
    console.log(global); // 지역
}
console.log(global); // 지역

왠걸????;;; if문 블록안에서 global이라는 변수를 재선언 해주었는데, 밖에 있는 global까지 오염 되어 벼렸다. (= 전역공간까지 영향을 미쳤다.)

💡 이유 : var는 함수단위 스코프 인데 if문은 함수가 아니기 때문에 블록단위 스코프 로 바꾸지않는 이상 이 불안한 요소를 가지고 가야한다.

let global = '전역';

if(global === '전역'){
	let global = '지역'
    
    console.log(global); // 지역
}
console.log(global); // 전역

블록단위에 맞는 합당한 역할을 충실하게 하고있다!!!!

💡 결론 : let 과 const는 var 보다 조금 더 안전하게 사람이 생각하듯이 코드를 작성하고 그 코드를 작성한 결과를 예측 할 수 있다.

3. let보다 더 const를 쓰자!

✅ const는 재할당만 안된다.(객체이건 기본형이건)

객체

const person = {
	name : 'jang',
  	age : '30'
}
// const로 선언해도 내부 프로퍼티를 변경하는 것은 가능하다!
person.name = 'lee'
person.age = '22'

console.log(person) // {name : 'lee', age : '22'}

// error 재할당은 불가능하다.
const person = {
	name : 'jang2',
  	age : '31'
}

배열

const personㄴ = [{
	name : 'jang2',
  	age : '31'
}]

person.push({
	name : 'lee',
  	age : '22',
})

console.log(person); // [{name : 'jang2', age : '31'}, {name : 'lee', age : '22'}]