[무던한 개발자를 위한 모던한 자바스크립트]시작하면서, 값과 변수 (1)

안녕하세요 Samuel 입니다 : )

해당 책의 내용중 저에게 필요한 일부를 메모하는 방식으로 작성하였으며( +@ 느낀점도 살짝살짝 적어봤어요! ), 추가적으로 구글링과 공식문서를 참고해서 글을 작성해봤습니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

이 책은 이미 분기, 루프, 함수 자료구조, 기본적인 객체지향 프로그래밍을 알고 있다고 가정하고 작성된 책입니다. 구식 기능 설명은 생략하고 최신 자바스크립트를 생산적으로 사용하는 방법에 대해서 설명하는 실용위주의 책입니다. 자바스크립트를 공부하게 된 이유는 간단했습니다. 백엔드의 하나의 언어를 작업하면서 하나 이상의 언어를 다뤄야하는 필요성과 좀 더 재미있는 언어가 무엇이 있을까? 고민하다가 자바스크립트를 고르게 되었습니다. ( 물론 현업에서 많이 사용도 하고 있어서 결정에 큰 이유가 됐습니다. )

그렇다면 한 문장을 통해서 시작해보겠습니다.

💡 “자바 스크립트로 모든 애플리케이션을 구현할 수 있으며 결국 그렇게 될 것이다.” - Jeff Atwood -

다섯 가지 황금 규칙

1. var 대신 let이나 const로 변수를 선언한다.
2. 엄격 모드 strict mode를 사용한다.
3. 형식을 확인하고 자동 형 변환( automatic type conversion )을 피한다.
   • 2*[’21’] → 42
   • 2+[’40’] → ?
4. 프로토타입을 이해하더라도 최신 클래스와 생성자, 메서드 문법을 사용한다.
5. 생성자나 메서드 밖에서는 this를 사용하지 않는다.

+@. Wat를 피하라. ( Wat : 혼동을 유발하는 자바스크립트 코드를 가리키는 말 )

---

값과 변수

null 과 undefined

자바스크립트에서는 두가지 방법으로 값의 부재를 표현합니다. 변수를 선언했지만 초기화하지 않은면 undefined 값을 가집니다. 보통 함수에서 이런 일이 자주 발생하며, 함수를 호출하면서 매개변수를 제공하지 않으면 매개변수는 undefined 값을 가집니다. null 값은 의도적인 값의 부재를 의미합니다.

이를 유용하게 활용할 수 있을지에 대해서는 의견이 분분합니다. 어떤 프로그래머는 두가지 빈 값 (bottom value)이 쉽게 오류를 일으킬 수 있으므로 한가지 값만 사용하는 것을 권장합니다. 이 의견을 따르려면 undefined만 사용해야 합니다. 자바스크립트에서 null은 사용하지 않을 수 있지만 undefined는 피할 수 없기 때문입니다.

반대로 undefined를 값으로 설정하거나 함수에서 이를 반환하지 않고 null을 사용해야 한다는 의견도 있습니다. 그렇게 되면 undefined로 조금 더 심각한 상황이 발생했음을 나타낼 수 있습니다.

💡 undefined나 null 둘 중 하나를 선택해서 사용하자. 그렇지 않으면 undefined와 null을 둘 다 확인해야 하므로 번거로워진다.

null 과 달리 undefined는 예약어(reserved word)가 아닙니다.
undefined는 전역 범위의 변수로 심지어 예전에는 전역변수 undefined에 새로운 값을 할당할 수 도 있었습니다. 물론 이는 나쁜 생각이 었으며, 현재 undefined는 상수입니다.
하지만 여전히 undefined라는 지역변수를 선언할 수 있습니다. 물론 이 역시 나쁜생각입니다.
NaN, Infinity라는 지역변수도 선언하지 않는게 좋습니다.

---

템플릿 리터럴

템플릿 리터럴은 표현식을 포함할 수 있으며 여러 행으로 확장할 수 있는 문자열 입니다. 템플릿 리터럴 문자열은 백틱(backtick ...으로 구분합니다.

//일반 문자열
let destination = 'world'
//템플릿 리터럴
let greeting = `Hello, ${destination.toUpperCase()}!`

>>>
Hello,WORLD!

${...} 표현식 안에 템플릿 리터럴을 중첩할 수 있습니다.

greeting = `Hello, ${firstname.length > 0 ? `${firstname[0]}. `: ''} ${lastname}`

---

객체

자바스크립트 객체는 클래스를 사용하는 자바, C++ 같은 언어와는 많이 다릅니다. 자바스크립트 객체는 다음과 같이 이름/값 쌍 또는 프로퍼티(property)의 집합입니다.

{ name : 'Samuel Park', age: 30 }

이런 종류의 객체는 공개 데이터만 포함할 수 있으며 캡슐화가 불가능하고 동작을 포함할 수 없습니다. 자바스크립트 객체는 특정 클래스의 인스턴스가 아닙니다. 따라서 자바스크립트 객체는 전통적인 객체지향 프로그래밍의 객체와 전혀 다릅니다. (자바스크립트에서도 클래스와 메서드를 선언할 수 있습니다. ) 하지만 이는 대부분의 다른 객체지향 언어와 방식이 완전히 다릅니다.

물론 다음과 같이 변수에 객체를 저장할 수 있습니다.

const samuel = { name : 'Samuel Park', age: 30 }

변수에 객체를 할당하고 나면 다음의 점 표기법으로 객체 프로퍼티에 접근할 수 있습니다.

let samuelAge = samuel.age

기존 프로퍼티의 값을 바꾸거나 새 프로퍼티를 추가할 수 있습니다.

samuel.age = 20
samuel.hopeSalary = 80000

• 변수 samuel은 const로 선언했고 samuel이 참조하는 객체의 ㄱ밧은 바꿀 수 있지만 const 변수에 다른 값을 할당할 수 없습니다.
• 즉, const는 자바의 final과 같지만 C++의 const와는 완전히 다릅니다.

const sally = { name : 'Sally Lee' }
//sally가 참조하는 객체 변경
sally.age = 28
//const 변수에 다른 값 할당 불가하므로 오류 발생
sally = { name : 'Sally Albright' }

delete 연산자로 프로퍼티를 삭제합니다.

delete samuel.salary

존재하지 않는 프로퍼티에 접근하면 undefined가 반환됩니다.

let boss = samuel.supervisor

>>> undefined

계산 결과를 프로퍼티 이름으로 사용할 수 있습니다. 다음과 같이 대괄호로 프로퍼티 값에 접근합니다.

let field = 'Age'
let samuelAge = samuel[field.toLowerCase()]

---

참고문서

무던한 개발자를 위한 모던한 자바스크립트

---

+@ var, const, let의 차이점에 대해서 확실히 알아보자

JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해서 알아보자.

변수 선언 방식

var

var name = 'samuel'
console.log(name)
>>> samuel

var name = 'sangwoo'
console.log(name)
>>> sangwoo

똑같은 변수를 똑같이 선언하고 다른 값을 각각 넣어주더라도 다른 값이 출력된다.

코드양이 많아지면 가장 큰 취약점으로 나타나므로 사용하지 않는 것이 좋다.

let / const

let name = 'samuel'
console.log(name)
>>> samuel

let name = 'sangwoo'
console.log(name)
>>> Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'yoona'
console.log(name)
>>> yoona

• let & const
  • 이미 선언했다는 에러 메세지가 나온다. ( const 도 마찬가지 )
• let
  • 동일한 변수에 값을 재할다잉 가능하다.
• const
  • 변수를 재선언, 재 할당 모두 불가능 하다.

const name = 'sameul'
console.log(name)
>>> samuel

const name = 'js'
console.log(name)
>>> Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'yoona'
console.log(name)
>>> Uncaught TypeError: Assignment to constant variable.

---

Hoisting

Hoisting이란 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말합니다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언 ( var, let, const, function, function*, class)을 호이스팅합니다.

하지만, var로 선언된 변수와는 달리 let로 선언된 변수는 선언문 이전에 참조하면 참조 에러 (ReferenceError)가 발생합니다.

console.log(foo) // undefined
var foo

console.log(bar)
let bar // Error: Uncaught ReferenceError: bar is not defined

이는 let로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대 (Temporal Dead Zone; TDZ)에 빠지기 때문입니다.

참고로, 변수는 선언단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데

var으로 선언된 변수는 선언단계와 초기화 단계가 한번에 이루어 집니다. 하지만,

// 스코프의 선두에서 선언단계와 초기화 단계가 실행됩니다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있습니다. 

console.log(foo)// undefined
var foo
console.log(foo)// undefined
foo = 1         // 할당문에서 할당 단계가 실행된다.
console.log(foo)// 1

let로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행됩니다.

// 스코프의 선두에서 선언 단계가 실행됩니다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았습니다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없습니다.

console.log(foo)// ReferenceError: foo is not defined

let foo // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo) // undefined
foo = 1 // 할당문에서 할당 단계가 실행된다.
console.log(foo) //1

---

전략

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해서 let을 사용하는 것이 좋습니다.

그리고 객체를 재할당하는 경우는 생각하는 것 보다 흔하지 않습니다. const를 사용하면 의도치않은 재할당을 방지해주기 때문에 보다 안전합니다.

• 재할당이 필요한 경우에 한정해 let을 사용합니다. 이때, 변수의 스코프는 최대한 좁게 만듭니다.
• 재할당이 필요 없는 상수와 객체에는 const를 사용합니다.

---

참조문서

let, const | PoiemaWeb

javascript var, let, const 차이점