2. 변수와 자료형

코드 작성법

세미콜론(semicolon)

• 자바스크립트는 세미콜론을 선택적으로 사용
• 세미콜론이 없으면 ASI(Automatic Semicolon Insertion, 자동 세미콜론 삽입 규칙)에 의해 자동으로 세미콜론 삽입됨

 

들여쓰기와 코드블럭

• 2칸 들여쓰기 사용
• 블럭(block)은 it, for 함수에서 중괄호 { } 내부를 말함
• 중괄호 { }를 사용해 코드 블럭 구분

 

코드 스타일 가이드

• 코딩 스타일의 핵심은 합의된 원칙과 일관성
• 코드의 품질에 직결되는 중요한 요소
  • 코드의 가독성, 유지보수 또는 팀원과의 커뮤니케이션 등 개발 과정 전체에 영향

 

주석

한줄 주석 //

여러줄 주석 /* */

 

 

변수와 식별자

식별자 정의와 특징

• 식별자(identifier)는 변수를 구분할 수 있는 변수명을 말함
• 식별자는 반드시 문자, 달러($) 또는 밑줄(_)로 시작
• 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
• 예약어 사용 불가능
  • 예약어 예시 : for, if, function 등

 

• 카멜 케이스 (camelCase, lower-camel-case)
  • 변수, 객체, 함수에 사용

// 변수
let dog
let variableName

// 객체
const userInfo = { name:'Tom', age:20 }

// 함수
function add() {}
function getName() {}

 

• 파스칼 케이스 (PascalCase, upper-camel-case)
  • 클래스, 생성자에 사용

// 클래스
class User{
    constructor(options) {
        this.name = options.name
    }
}

// 생성자 함수
function User(options) {
    this.name = options.name
}

 

• 대문자 스네이크 케이스(SNAKE_CASE)
  • 상수(constants)에 사용
  • 상수 : 개발자의 의도와 상관없이 변경될 가능성이 없는 값을 의미

// 값이 바뀌지 않을 상수
const API_KEY = 'my-key'
const PI = Math.PI

// 재할당이 일어나지 않는 변수
const NUMBERS = [1, 2, 3]

 

변수 선언 키워드

let foo             // 선언
console.log(foo)    // undefined

foo = 11            // 할당
console.log(foo)    // 11

let bar = 0         // 선언 + 할당
console.log(bar)    // 0

 

Python과 다르게 JavaScript는 변수를 선언하는 키워드가 정해져 있음

1. let
2. 블록 스코프 지역 변수를 선언 (추가로 동시에 값을 초기화)
3. const
4. 블록 스코프 읽기 전용 상수를 선언 (추가로 동시에 값을 초기화)
5. var
6. 변수를 선언 (추가로 동시에 값을 초기화)

 

[참고]

선언, 할당, 초기화

• 선언 (Declaration)
  • 변수를 생성하는 행위 또는 시점
• 할당 (Assignment)
  • 선언된 변수에 값을 저장하는 행위 또는 시점
• 초기화 (Initialization)
  • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

 

블록스코프(block scope)

• if, for, 함수 등의 중괄호 내부를 가리킴
• 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능

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

console.log(x)       // 1

 

변수 선언 키워드 - let

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


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

• 재할당 가능 & 재선언 불가능
• 블록 스코프를 갖는 지역 변수를 선언, 선언과 동시에 원하는 값으로 초기화 할 수 있음

 

변수 선언 키워드 - const

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

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

• 재할당 불가능 & 재선언 불가능 (읽기 전용)
• 선언 시 반드시 초기값을 설정해야 하며, 이후 값 변경이 불가능
• let과 동일하게 블록스코프를 가짐

 

변수 선언 키워드 - var

• 재할당 가능 & 재선언 가능
• ES6 이전에 변수를 선언할 때 사용되던 키워드
• “호이스팅”되는 특성으로 인해 예기치 못한 문제 발생가능
  • 따라서 ES6이후부터는 var대신 const와 let을 사용하는 것을 권장
• 함수 스코프(function scope)를 가짐

 

[참고]

함수 스코프 (finction scope)

• 함수의 중괄호 내부를 가리킴
• 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능

function foo() {
    var x = 5
    console.log(x)   // 5
}

// Reference Error : x is nor defined
console.log(x)

 

호이스팅 (hoisting)

• 변수 선언 이전에 참조할 수 있는 현상
• var로 선언된 변수는 선언 이전에 참조할 수 있으며, 이러한 현상을 호이스팅이라 함
• 변수 선언 이전의 위치에서 접근 시 undefinde를 반환
• JavaScript에서 변수들은 실제 실행시에 코드의 최상단으로 끌어 올려지게 되며 이러한 이유때문에 var로 선언된 변수는 선언 시에 undefined로 값이 초기화 되는 과정이 동시에 일어남
• 반면 let, const는 호이스팅이 일어나면 에러를 발생시킴

console.log(username)  // undefined
var username = '홍길동'

console.log(email)     // Uncaught ReferenceError
let email = 'name@gmail.com'

console.log(age)       // Uncaught ReferenceError
const age = 50

• 변수를 선언하기 전에 접근이 가능한 것은 코드의 논리적인 흐름을 깨뜨리는 행위이며 이러한 것을 방지하기 위해 let, const가 추가되었음
  • 즉 var는 사용하지 않아야 하는 키워드
• 다만, 아직까지도 많은 기존의 JavaScript 코드는 ES6이전의 문법으로 작성되어 있으므로 호이스팅에 대한 이해가 필요

키워드	재선언	재할당	스코프	비고
let	X	O	블록 스코프	ES6부터 도입
const	X	X	블록 스코프	ES6부터 도입
var	O	O	함수 스코프	사용 X

• 어디에 변수를 쓰고 상수를 쓸지 결정하는 것은 프로그래머의 몫
• Airbnb 스타일 가이드에서는 기본적으로 const 사용을 권장
  • 재할당해야 하는 경우만 let
• 다만, 실습에서는 편의를 위해 재할당이 가능한 let을 기본적으로 사용해도 됨

 

데이터 타입

• JavaScript의 모든 값은 특정한 데이터 타입을 가짐
• 크게 원시 타입(Primitive type)과 참조 타입(Reference type)으로 분류됨

 

Number

정수 또는 실수형 숫자를 표현하는 자료형

const a = 13
const b = -5
const c = 3.14    // float 숫자표현
const d = 2.998e8    // 2.998 * 10^8 = 299,800,000
const e = Infinity
const f = -Infinity
const g = NaN  // Not a Number를 나타내는 값

 

NaN

• Not-A-Number(숫자가 아님)를 나타냄
• Number.isNaN()의 경우 주어진 값의 유형이 Number이고 값이 NaN이면 true, 아니면 false를 반환

NaN을 반환하는 경우

1. 숫자로서 읽을 수 없음 (parseInt(”어쩌구”), Number(underfined))
2. 결과가 허수인 수학 계산식 (Math.sqrt(-1))
3. 피연산자가 NaN (7**NaN)
4. 정의할 수 없는 계산식 (0*Infinity)
5. 문자열을 포함하면서 덧셈이 아닌 계산식 (”가”/3)

 

String

• 문자열을 표현하는 자료형
• 작은 따옴표 또는 큰 따옴표 모두 가능

const sentence1 = 'single quote'   // single quote
const sentence2 = "double quote"   // double quote

console.log(sentence1)
console.log(sentence2)

• 곱셈, 나눗셈, 뺄셈은 안되지만 덧셈을 통해 문자열을 붙일 수 있음

const firstName = 'firstName'
const lastName = 'lastName'
const fullName = firstName + lastName

console.log(fullName)

• Quote를 사용하면 선언 시 줄 바꿈이 안됨
• 대신 escape sequence를 사용할 수 있기 때문에 \n를 사용해야 함

// Bad
const word = "안녕
하세요" // Uncaught SyntaxError: Invalid or unexpected token

// Good
const word1 = "안녕 \n하세요"
console.log(word1)

• Template Literal 을 사용하면 줄바꿈이 되며, 문자열 사이에 변수도 삽입도 가능

(단, escape sequence를 사용할 수 없다) == Python의 “f-string”

const word2 = `안녕
들 하세요`
console.log(word2)

const age = 10
const message = `홍길동은 ${age}세 입니다.`
console.log(message)

 

Template literals (템플릿 리터럴)

• 내장된 표현식을 허용하는 문자열 작성 방식
• ES6+부터 지원
• Backtick(’ ‘)을 이용하며, 여러 줄에 걸쳐 문자열을 정의할 수도 있고 JavaScript의 변수를 문자열안에 바로 연결할 수 있는 이점이 생김
• 표현식을 넣을 수 있는데, 이는 $와 중괄호($ {expression}) 로 표기

const age = 10
const message = `홍길동은 ${age}세 입니다.`

 

Empty Value

• 값이 존재하지 않음을 표현하는 값으로 JavaScript에서는 null과 undefinde가 존재
• 동일한 역할을 하는 이 두개의 키워드가 존재하는 이유는 단순한 JavaScript의 설계 실수
• 큰 차이를 두지 말고 interchangeable하게 사용할 수 있도록 권장함

 

nulll

• null 값을 나타내는 특별한 키워드
• 변수의 값이 없음을 의도적으로 표현할 때 사용하는 데이터 타입

let lastName = null
console.log(lastName) // null - 의도적으로 값이 없음을 표현함

 

undefined

• 값이 정의되어 있지 않음을 표현하는 값
• 변수 선언 이후 직접 값을 할당하지 않으면 자동으로 할당됨

let firstName  // 선언만 하고 할당하지 않음
console.log(firstName)  // undefined

 

null과 undefinde

• null과 undefinde의 가장 대표적인 차이점은 typeof 연산자를 타입을 확인했을 때 나타남

typeof null   // "object"
typeof undefined // "undefined"

• null이 원시 타입임에도 불구하고 object로 출력되는 이유는 JavaScript 설계 당시의 버그를 지금까지 해결하기 못한 것
• 쉽게 해결할 수 없는 이유는 이미 null타입에 의존성을 띄고 있는 많은 프로ㅡ램들이 망가질 수 있기 때문 (하위 호환 유지)

 

Boolean

• true와 false
• 참과 거짓을 표현하는 값
• 조건문 또는 반복문에서 유용하게 사용
  • 조건문 또는 반복문에서 boolean이 아닌 데이터 타입은 자동 형변환 규칙에 따라 true또는 false로 변환됨

 

ToBoolean Conversions (자동 형변환)

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