JavaScript 기초 문법을 익혀보자!

변수와 식별자

식별자 정의와 특징

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

카멜 케이스(camelCase)

• 변수, 객체, 함수에 사용

// 변수
let dog
let variableName

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

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

파스칼 케이스(PascalCase)

• 클래스, 생성자에 사용

// 클래스
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]

변수 선언 키워드

• JavaScript는 변수를 선언하는 키워드가 정해져 있다.
  • let, cosnt, var

선언, 할당, 초기화

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

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

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

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

let

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

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

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

const

• 블록 스코프 읽기 전용 상수를 선언
• 선언 시 반드시 초기값을 설정해야 하며, 이후 값 변경이 불가능
• 재할당 불가능 & 재선언 불가능

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

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

블록 스코프 (block scope)

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

let x = 1

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

console.log(x)  // 1

var

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

함수 스코프 (function scope)

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

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

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

호이스팅 (hoisting)

• 변수를 선언 이전에 참조할 수 있는 현상
• var로 선언된 변수는 선언 이전에 참조할 수 있으며, 이러한 현상을 호이스팅이라고 함
• 변수 선언 이전의 위치에서 접근시 undefined 반환

console.log(name)  // undefined -> 선언 이전에 참조

var name='홍길동'  // 선언

// 위 코드를 암묵적으로 아래와 같이 이해함
var name  // undefiend로 초기화
console.log(name)

var name='홍길동'  // 선언

• 즉, JavaScript에서 변수들은 실제 실행시에 코드의 최상단으로 끌어 올려지게 되며 (hoisted) 이러한 이유 때문에 var로 선언된 변수는 선언 시에 undefined로 값이 초기화 되는 과정이 동시에 일어남
• 반면 let, const는 호이스팅이 일어나면 에러를 발생시킴
  • Uncaught ReferenceError
• 변수를 선언하기 전에 접근이 가능한 것은 코드의 논리적인 흐름을 깨뜨리는 행위이며 이러한 것을 방지하기 위해 let, const가 추가되었음
  • 즉, var는 사용하지 않아야 하는 키워드!
• 다만, 아직까지도 많은 기존의 JavaScript 코드는 ES6 이전의 문법으로 작성되어 있으므로 호이스팅에 대한 이해 필요

변수 선언 키워드 정리

• Airbnb 스타일 가이드에서는 기본적으로 const 사용을 권장
  • 재할당해야 하는 경우에만 let

데이터 타입

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

원시 타입(Primitive type)

Number

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

const a = 13
const b = -5
const c = 3.14
const d = 2.998e8  // 2.998*10^8
const e = Infinity
const f = -Infinity
const g = NaN  // Not a Number

• NaN을 반환하는 경우
  • 숫자로서 읽을 수 없음
  • 결과가 허수인 수학 계산식
  • 피연산자가 NaN
  • 정의할 수 없는 계산식
  • 문자열을 포함하면서 덧셈이 아닌 계산식

String

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

const sentence1 = 'Ask and go to the blue'  // single quote
const sentence1 = "Ask and go to the blue"  // double quote

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

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

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

console.log(fullName)

• 따옴표를 사용하면 선언 시 줄바꿈 불가능
  • 대신 escape sequence를 사용할 수 있기 때문에 \n 사용

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

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

• Template Literal(백틱 )을 사용하면 줄바꿈 가능, 문자열 사이에 변수도 삽입 가능
  • 표현식은 $와 중괄호(${expression})로 표기

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

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

null

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

let lastName = null
console.log(lastName)  // null

undefined

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

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

[참고] null vs undefined

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

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

• null이 원시 타입임에도 불구하고 object로 출력되는 이유는 JavaScript 설계 당시 버그를 해결하지 못한 것
  • 이미 null 타입에 의존성을 띄고 있는 많은 프로그램들이 망가질수 있기 때문에 해결하기 어려움

Boolean

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

참조 타입(Reference type)

객체 (Object)

• 이름과 값을 가진 속성(property)들의 집합으로 이루어진 자료구조
  • 중괄호 내부에 key와 value의 쌍으로 표현
• key
  • 문자열 타입만 가능
  • key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현
• value
  • 모든 타입(함수포함) 가능
• 객체 요소 접근
  • 점(.) 또는 대괄호([])로 가능
  • key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

const me = {
	name : 'jack',
	phoneNumber : '01012345678',
	'samsung products' : {
		buds : 'Galaxy Buds pro',
		galaxy : 'Galaxy s99',
	}
}

console.log(me.name)
console.log(me['name'])
console.log(me['samsung products'])
console.log(me.samsung products)  // 불가능
console.log(me['samsung products'].buds)

배열(Array)

• 여러 개의 값을 순서대로 저장하는 자료구조
  • 키와 속성들을 담고 있는 참조 타입의 객체
  • 순서를 보장하는 특징이 있음
• 주로 대괄호([])를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
• 배열의 길이는 array.length 형태로 접근 가능
  • 배열의 마지막 원소는 array.length-1로 접근

const numbers = [1, 2, 3, 4, 5]

console.log(numbers[0])  // 1
console.log(numbers[-1])  // undefined
console.log(numbers.length)  // 5

console.log(numbers[numbers.length-1])  // 5
console.log(numbers[numbers.length-2])  // 4
console.log(numbers[numbers.length-3])  // 3
console.log(numbers[numbers.length-4])  // 2
console.log(numbers[numbers.length-5])  // 1

함수(Function)

• function 키워드를 통해 생성하며 호출 시 실행될 코드를 정의
• 함수 선언식 (Function declaration)
  • 일반적인 프로그래밍 언어의 함수 정의 방식
    

function 함수명(매개변수) {
// do something
}

// 예시

function add(num1, num2){
    return num1 + num2
}

add(2, 7) // 9

• 함수 표현식 (Function expression)
  • 표현식 내에서 함수를 정의하는 방식
  • 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능
    

변수키워드 함수명 = function(매개변수) {
    // do something
}

// 예시

const sub = function (num1, num2) {
    return num1 - num2
}

sub(7, 2)  // 5

• 표현식에서 함수 이름을 명시하는 것도 가능
• 다만 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨
  

const mySub = function namedSub(num1, num2) {
    return num1 - num2
}

mySub(1, 2)  // -2
namedSub(1, 2)  // ReferenceError : namedSub is not defined

• 함수 선언식은 호이스팅이 발생하므로 함수 표현식 사용 권장

자동 형변환(ToBoolean Conversions)

연산자

할당 연산자

• 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
• 다양한 연산에 대한 단축 연산자 지원
• Increment 및 Decrement 연산자
  • Increment(++) : 피연산자의 값을 1 증가시키는 연산자
  • Decrement(—) : 피연산자의 값을 1 감소시키는 연산자
  • += 또는 -=과 같이 더 분명한 표현으로 적을 것을 권장

let c = 0

c += 10
console.log(c) // 10

c -= 3
console.log(c) // 7

c *= 10
console.log(c) // 70

c++
console.log(c)  // 71

c--
console.log(c)  // 70

비교 연산자

• 피연산자들(숫자, 문자, Boolean 등)을 비교하고 결과값을 boolean으로 반환하는 연산자
• 문자열은 유니코드 값을 사용하며 표준 사전 순서를 기반으로 비교
  • ex) 알파벳끼리 비교할 경우
    • 알파벳 순서상 후순위가 크다
    • 소문자가 대문자보다 더 크다

3 > 2  // true
3 < 2  // false

'A' < 'B'  // true
'Z' < 'a' // true
'가' < '나'  // true

동등 연산자(==)

• 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
• 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
• 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
• 예상치 못한 결과가 발생할 수 있으므로 특별한 경우를 제외하고 사용하지 않음

const a = 1
const b = '1'

console.log(a==b)  // true
console.log(a==true)  // true

// 자동 형변환 예시
console.log(8*null)  // 0
console.log('5' - 1)  // 4
console.log('5' + 1)  // 51
console.log('five'*2)  // NaN

일치 연산자(===)

• 두 피연산자의 값과 타입이 모두 같은 경우 true 반환
• 같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교
• 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
  • 엄격한 비교 - 두 비교 대상의 타입과 값 모두 같은지 비교하는 방식

const a = 1
const b = '1'

console.log(a===b)  // false
console.log(a==b)  // true
console.log(a===Number(b))  // true

논리 연산자

• 세 가지 논리 연산자로 구성
  • and 연산은 ‘&&’ 연산자
  • or 연산은 ‘||’ 연산자
  • not 연산은 ‘!’ 연산자
• 단축 평가 지원
  • false && true ⇒ false
  • true || false ⇒ true

true && false // false
true && true  // true

false || true  // true
flase || false  // false

!true  // false

// 단축 평가
1 && 0  // 0
0 && 1  // 0
4 && 7  // 7

1 || 0  // 1
0 || 1  // 1
4 || 7  // 4

삼항 연산자 (Ternary Operator)

• 3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자
• 가장 앞의 조건식이 참이면 :(콜론) 앞의 값이 반환되며 그 반대일 경우 : 뒤의 값이 반환
• 삼항 연산자의 결과 값이기 때문에 변수에 할당 가능

true ? 1 : 2  // 1
false ? 1 : 2  // 2

const result = Math.PI > 4 ? 'Yep':'Nope'
console.log(result)  // Nope

스프레드 연산자 (Spread Operator)

• 배열이나 객체를 전개하여 각 요소를 개별적인 값으로 분리하는 연산자
• 주로 함수 호출 시 매개변수로 배열이나 객체를 전달할 때 사용
• 얕은 복사를 위해서도 활용 가능

const numbers = [1, 2, 3]
const otherNumbers = [...numbers, 4, 5]  // [1, 2, 3, 4, 5]
const copyNumbers = [...numbers]  // [1, 2, 3]

const obj = {a:1, b:2}
const otherObj = {c:3, ...obj}  // {a:1, b:2, c:3}
const copyObj = {...obj}  // {a:1, b:2}

조건문

• 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단
• if, else if, else
  • 조건은 소괄호(condition) 안에 작성
  • 실행할 코드는 중괄호{} 안에 작성
  • 블록 스코프 생성

const name = 'manager'

if (name === 'admin') {
	console.log('관리자님 환영합니다.')
} else if (name === 'manager'){
	console.log('매니저님 환영합니다.')
} else {
	console.log(`${name}님 환영합니다.`)
}

반복문

while

• 조건문이 참이기만 하면 문장을 계속해서 수행

while (조건문) {
  // do something
}

• 예시

let i = 0

while (i<6) {
	console.log(i)
	i += 1
}

// 0, 1, 2, 3, 4, 5

for

• 특정한 조건이 거짓으로 판별될 때까지 반복

for ([초기문]; [조건문]; [증감문]) {
	// do something
}

• 예시

for (let i = 0; i < 6; i++){
	console.log(i)
}

// 0, 1, 2, 3, 4, 5

for … in

• 객체(object)의 속성을 순회할 때 사용
• 배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음

for (variable in object) {
	statements
}

• 예시

const fruits = {a:'apple', b:'banana'}

for (const key in fruits){
	console.log(key)  // a, b
	console.log(fruits[key])  // apple, banana
}

for … of

• 반복 가능한 객체를 순회할 때 사용
• 반복 가능한(iterable) 객체의 종류 : Array, Set, String 등

for (variable of object){
	statements
}

• 예시

const numbers = [0, 1, 2, 3]

for (const number of numbers){
	console.log(number)  // 0, 1, 2, 3
}

for … in 과 for … of 차이

• for … in은 속성 이름을 통해 반복
• for … of는 속성 값을 통해 반복

const arr = [3, 5, 7]

for (const i in arr){
	console.log(i)  // 0 1 2
}

for (const i of arr) {
	console.log(i)  // 3 5 7
}

for … in, for … of 와 const

• for 문
  • for (let i = 0; i < arr.length; i++){…} 의 경우에는 최초 정의한 i를 재할당하면서 사용하기 때문에 const를 사용하면 에러 발생
• for … in, for … of
  • 재할당이 아니라 매반복시 해당 변수를 새로 정의하여 사용하므로 에러가 발생하지 않음

Array.forEach

• 배열의 메서드들 중 하나

Array.forEach(function (params) {
	// 배열이 가진 각 요소를 순회하면서 함수를 실행
	// 아래에 실행할 코드 작성
})

const numbers = [1, 2, 3]
numbers.forEach(function (element) {
	console.log(element)
})

// 1
// 2
// 3

조건문과 반복문 정리