[JavaScript] Basic Syntax

Yujin·2023년 10월 24일

let

블록 스코프(block scope)를 갖는 지역 변수를 선언
재할당 O, 재선언 X

let number = 10 // 1. 선언 및 초기값 할당
number = 20  // 2. 재할당 (가능)

let number = 10  // 1. 선언 및 초기값 할당
let number = 20  // 2. 재선언 (불가능)

const

블록 스코프를 갖는 지역 변수를 선언
재할당 X, 재선언 X

const number = 10  // 1. 선언 및 초기값 할당
number = 10  // 2. 재할당 (불가능)

const number = 10  // 1. 선언 및 초기값 할당
const number = 20  // 2. 재선언 (불가능)

const nubmer  // const' declarations must be initialized
// 선언시 반드시 초기값 설정 필요

블록 스코프 (block scope)

if, for, 함수 등의 중괄호({}) 내부
블록 스코프를 갖는 변수는 블록 바깥에서 접근 불가능

let x = 1

if (x === 1) {
  let x = 2
  console.log(x)  // 2
}

console.log(x)  // 1

변수 선언

기본적으로 const 권장
재할당이 필요한 변수는 let으로 변경해서 사용

데이터 타입

원시 자료형 (primitive type)

Number, String, Boolean, undefined, null
변수에 할당될 때 값이 복사됨 → 변수 간에 서로 영향을 미치지 X

원본은 변하지 않는다.

const bar = 'bar'
console.log(bar) // bar

bar.toUpperCase()
console.log(bar) // bar

let a = 10
let b = a  // 주소(a가 바라보는 10)가 복사된 게 아니라 10이라는 값을 넣은 것
b = 20
console.log(a) // 10
console.log(b) // 20

String

‘+’ 연산자를 사용해 문자열끼리 결합 가능

곱셈, 나눗셈, 뺄셈 불가능

const firstName = 'Tony'
const lastName = 'Stark'
const fullName = firstName + lastName

console.log(fullName) // TonyStark

템플릿 리터럴 (Template literals)
- 내장된 표현식을 허용하는 문자열 작성 방식
- Backtick(``)을 이용하며, 여러 줄에 걸쳐 문자열을 정의할 수도 있고 JavaScript의 변수를 문자열 안에 바로 연결할 수 있다.
- 표현식은 ‘ $’와 중괄호($ {expression})로 표기
- ES6+부터 지원
null
- 변수의 값이 없음을 의도적으로 표현할 때 사용
```
let a = null
console.log(a)  // null
```
undefined
- 변수 선언 이후 직접 값을 할당하지 않으면 자동으로 할당됨
```
let b
console.log(b)  // undefined
```
- 사실 위의 null처럼 undefined도 let a = undefined와 같이 할당해줄 수 있음
‘값이 없음’에 대한 표현이 null과 undefined 2가지인 이유
- JavaScript의 설계 실수
- null이 원시 자료형임에도 불구하고 object로 출력되는 이유는 JavaScript 설계 당시의 버그를 해결하지 않은 것
  - 이미 null 타입에 의존성을 띄고 있는 수많은 프로그램들이 망가질 수 있기 때문에 해결 X (하위 호환 유지)
```
typeof null // "object"
typeof undefined // "undefined"
```
자동 형 변환 규칙
데이터 타입 false true
undefined 항상 false X
null 항상 false X
Number 0, -0, NaN 나머지 모든 경우
String 빈 문자열 나머지 모든 경우
증가 연산자, 감소 연산자
- 증가 연산자 (++)
  - 피연산자를 증가시키고 (1을 더함) 연산자의 위치에 따라 증가하기 전이나 후의 값을 반환
- 감소 연산자 (—)
  - 피연산자를 감소시키고 (1을 뺌) 연산자의 위치에 따라 감소하기 전이나 후의 갑승ㄹ 반환
- += 또는 -= 같이 보다 명시적인 표현으로 작성하는 것을 권장
```
let x = 3
const y = x++
console.log(x, y)  // 4 3

let a = 3
const b = ++a
console.log(a, b)  // 4 4
```
동등 연산자, 일치 연산자
- 동등 연산자 (==)
  - 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값 반환
  - ‘암묵적 타입 변환’을 통해 타입을 일치시킨 후 같은 값인지 비교
  - 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
```
console.log(1 == 1)  // true
console.log('hello' == 'hello')  // true
console.log('1' == 1)  // true
console.log(0 == false)  // true
```
- 일치 연산자 (===)
  - 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
  - 같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교
  - 엄격한 비교
  - 암묵적 타입 변환이 발생하지 않음
  - 특수한 경우를 제외하고는 동등 연산자가 아닌 일치 연산자 사용을 권장
```
console.log(1 === 1) // true
console.log('hello' === 'hello')  // true
console.log('1' === 1)  // false
console.log(0 === false)  // false
```

데이터 타입	false	true
undefined	항상 false	X
null	항상 false	X
Number	0, -0, NaN	나머지 모든 경우
String	빈 문자열	나머지 모든 경우

참조 자료형 (Reference type)

Objects (Object, Array, Function)

객체를 생성하면 객체의 메모리 주소를 변수에 할당 (주소가 복사됨) → 변수 간에 서로 영향을 미침

const obj1 = { name: 'Alice', age: 30 }
const obj2 = obj1
obj2.age = 40

console.log(obj1.age)  // 40
console.log(obj2.age)  // 40

for…in & for…of

for…in은 object에서만 쓴다. object가 아닌 다른 반복가능한 객체는 for…of를 쓴다.
객체는 순서가 없으므로, for…of을 사용할 수 없다.

break, continue 사용 가능

const capitals = {
  korea: '서울',
  japan: '도쿄',
  china: '베이징',
}

for (const capital of capitals) {
  console.log(capital)  // TypeError: capitals is not iterable
}