[WEB][JS] JavaScript 기초 - JavaScript 기본 문법

웹 개발에 필요한 JavaScript 기본 문법에 대해 정리한 글입니다. 기본적으로 다른 언어(C/C++, Java, Python 등)의 문법을 알고 있다는 가정 하에 간략하게 정리하였습니다.

---

자바스크립트의 변수

변수 선언

var 변수 선언

• 함수 레벨 스코프를 가지는 변수
• 변수를 선언하기 전에 사용하는 경우(변수 선언보다 호출이 앞선 경우)에도 에러가 발생하지 않고 undefined가 할당된 상태로 접근할 수 있음 (호이스팅으로 인한 특징)
• 중복 선언이 가능 >> 같은 스코프 내에서 같은 이름의 변수를 var로 여러 번 선언해도 에러가 발생하지 않고, 마지막으로 선언된 값으로 덮어쓰게 됨
• ES6(ECMAScript 2015) 이전까지 변수 선언을 위해 주로 사용되었으나, 스코프 및 의도치 않은 재할당 문제로 인해 권장되지 않음

let 변수 선언

• 블록 레벨 스코프를 가지는 변수로, 중괄호({})로 감싼 범위 내에서만 유효함
• 호이스팅이 발생하지만, 선언 구문 이전에 변수를 참조(호출)하려고 하면 Temporal Dead Zone(TDZ)으로 인한 "참조 오류 (ReferenceError)"가 발생
• 중복 선언 불가능 >> 같은 스코프 내에서 동일한 변수명으로 다시 선언하면 에러가 발생
• 재할당이 필요할 때 사용

Temporal Dead Zone(TDZ)이란?
자바스크립트 엔진은 코드가 실행되기 전, 스코프 내의 모든 변수 선언(호이스팅)을 미리 파악하는 특징이 있다. 이때, let과 const로 선언된 변수도 호이스팅 자체는 이루어지지만 초기화는 실제 선언 위치에서 수행되는데, TDZ는 이 스코프 시작점부터 변수 실제 선언문에 도달하기 전(초기화 전)까지 해당 변수에 접근할 수 없는 구간을 의미한다.

const 변수 선언

• 블록 레벨 스코프를 가지는 변수
• 변수 선언 시 반드시 초기값을 할당해야 하며, 재할당이 불가능
• 객체나 배열과 같은 참조형 데이터의 경우, 내부 속성 변경은 가능하지만 변수 자체를 다른 객체로 재할당할 수는 없음
• 변하지 않는 값(상수)을 선언할 때 사용

함수 레벨 스코프와 블록 레벨 스코프

함수 레벨 스코프

• 함수 내에서 선언된 변수는 오직 함수 내부에서만 유효
• 자바스크립트에서 전통적으로 var 키워드가 함수 레벨 스코프 방식을 따름
• 함수 바깥(전역 스코프)이나 다른 함수에서 해당 변수 참조 불가능

블록 레벨 스코프

• 중괄호({}) 블록 내에서 선언된 변수는 블록을 벗어나면 접근할 수 없음
• let과 const는 블록 레벨 스코프를 지원함
• if, for, while 등 블록 구분을 사용할 때, 해당 블록 내에서만 유효한 변수를 선언할 수 있어 세밀한 스코프 관리가 가능함

---

자바스크립트의 자료형

• 자바스크립트의 자료형은 크게 원시(Primitive) 자료형과 참조(Reference) 자료형으로 구분

원시 자료형 (Primitive Type)

Number

• 숫자를 나타내는 타입으로 정수와 부동소수점 수를 모두 포함
• NaN, Infinity, -Infinity도 Number 타입에 해당
• 연산 과정에서 실수 오차가 발생할 수 있다는 점을 주의

String

• 문자열을 나타내는 타입
• 작은따옴표(''), 큰 따옴표(""), 백틱(``) 모두 문자열을 정의하는 데 사용 가능
• 연산자를 이용하여 문자열을 이어붙일 수 있으나, 여러 번 사용 시 비효율적일 수 있기 때문에 템플릿 리터럴(백틱)을 활용하는 것을 권장

템플릿 리터럴이란?
ES6에서 도입된 문자열 표기 방식으로, 백틱을 이용하여 문자열을 정의한다. 작은 따옴표나 큰 따옴표를 사용하는 기존 문자열 정의 방식과 달리, 백틱을 이용하여 문자열을 정의하면 다중 행 문자열을 쉽게 작성할 수 있고, 표현식을 삽입하여 변수나 자바스크립트 표현식의 값을 문자열 내에서 간편하게 삽입할 수 있다는 장점이 있다.

Boolean

• true 또는 false의 두 가지 값만 가질 수 있음
• 조건문의 논리값, 논리 연산의 반환값 등으로 자주 사용

null & undefined

• null은 "값이 의도적으로 비어 있음"을 표현하는데 사용 >> 개발자가 명시적으로 값이 없음을 나타내기 위해 할당하는 경우가 많음
• undefined는 "값이 할당되지 않음"을 의미 >> 변수를 선언했지만 초기화가 되지 않은 경우나 함수가 명시적으로 반환할 값이 없는 경우 자동으로 undefined가 할당됨

null과 undefined의 특징
1. typeof null은 자바스크립트 초기 설계상의 오류로 object로 표시
2. null과 undefined는 서로 다르지만, 동등 연산자(==)로 비교 시 true를 반환하고, 일치 연산자(===)로 비교시 false를 반환

참조 자료형 (Reference Type)

Array

const arr = [1, 2, 3];
arr.push(4);       // [1, 2, 3, 4]
arr[1] = 100;      // [1, 100, 3, 4]

• 순서가 있는 리스트 형태의 객체
• 인덱스를 이용하여 배열의 요소에 접근하며, 인덱스는 0부터 시작
• 동적 크기를 가지기 때문에 언제든 요소를 추가하거나 제거할 수 있음

Function

// 함수 선언식
function 함수이름(매개변수) {
  // 실행 코드
  return 결과;
}

// 함수 표현식
const 함수이름 = function(매개변수) {
  // 실행 코드
  return 결과;
};

• 자바스크립트에서 함수는 함수를 변수에 할당하거나 다른 함수의 매개변수, 반환값으로 활용할 수 있는 일급 객체(First-class object)임
• 선언 방식에 따라 두가지 방법이 존재
  • 함수 선언식 (Function Declaration) 
    • 스크립트가 로드될 때 함수가 먼저 생성(호이스팅)됨
    • 블록 스코프 내에서 선언되면 해당 블록 범위에 국한되어 사용
  • 함수 표현식 (Function Expression)
    • 변수에 익명 함수 혹은 기명 함수를 할당하는 형태
    • 함수 선언식과 달리, 변수 스코프 규칙(let, const 등)에 영향을 받으며, 선언 이전에 함수를 호출하면 에러가 발생
    • 호이스팅 시 함수 자체가 아닌 변수만 호이스팅되고, 실제 할당은 런타임에 이루어지므로 선언 이전에 호출이 불가능함

Object

const person = {
  name: "홍길동",
  age: 20,
  greet: function () {
    console.log(`안녕하세요, ${this.name}입니다.`);
  },
};

• key와 value로 구성된 프로퍼티들의 집합
• 중괄호({})를 이용하여 생성하거나, 생성자 함수를 통해 생성할 수 있음
• 동적으로 프로퍼티를 추가하거나 삭제할 수 있음

---

변수와 함수의 호이스팅 (Hoisting)

변수 호이스팅

• 호이스팅(Hoisting)은 스코프 내에서 변수 선언부가 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 고유한 특징
• var 키워드로 선언된 변수는 선언 단계가 스코프 최상단으로 끌어올려져 초기화 단계 이전에 undefined로 할당됨
  • 선언문보다 위에서 참조(호출)해도 에러는 발생하지 않으나, 의도치 않은 undefined 상태를 접할 수 있기 때문에 주의가 필요함
• let, const는 호이스팅 자체는 이루어지지만, Temporal Dead Zone(TDZ) 때문에 선언문 이전에 참조하면 ReferenceError가 발생

console.log(x);  // undefined (var를 썼을 때)
var x = 10;

console.log(y);  // ReferenceError (let/const를 썼을 때)
let y = 10;

함수 호이스팅

• 함수 선언 방식에 따라 호이스팅 동작이 다르게 이루어짐

함수 선언식의 호이스팅

hello(); // "Hello" 정상 출력
function hello() {
  console.log("Hello");
}

• 함수 선언식으로 정의된 함수는 선언문이 위치하기 전에 호출해도 정상적으로 동작
  • 자바스크립트 엔진이 함수 선언식으로 작성된 함수를 스코프가 평가될 때 미리 메모리에 저장하기 떄문

함수 표현식의 호이스팅

hello();  // ReferenceError
const hello = function() {
  console.log("Hello");
};

• 함수 표현식은 변수에 함수를 할당하는 형태이기 때문에 변수 호이스팅 규칙을 따르게 됨
• 선언 자체는 호이스팅이 이루어지지만, 초기화가 되기 전에는 사용할 수 없기 때문에 선언문 이전에 호출하려고 하면 ReferenceError가 발생

---

조건문과 반복문

조건문 : if문

if (조건식) {
  // 조건식이 참(truthy)이면 실행
} else if (다른조건식) {
  // 위 조건이 거짓이고, 이 조건이 참이면 실행
} else {
  // 모든 조건이 거짓일 때 실행
}

• 조건을 나눠 실행 흐름을 제어하는 구문
• 자바스크립트에서 truthy와 falsy 개념에 대한 이해가 필요
  • truthy : falsy로 취급되는 값을 제외한 나머지
  • falsy : false, 0, -0, "", null, undefined, Nan

truthy와 falsy
자바스크립트에서 특정 값을 논리 평가 시 true 혹은 false로 간주하는 규칙으로, falsy에 해당하는 일부 값들을 제외하고 대부분은 truthy로 판단된다.

반복문 : while문과 for문

while 문

while (조건식) {
  // 조건식이 참(true)인 동안 반복 실행
  // 반복 횟수를 제어할 수 없으면 무한 루프가 발생하므로 주의
}

• 조건식을 판단하여 참인 동안에만 블록을 반복
• 반복 횟수 제어와 조건 업데이트를 신경써야 함 (조건 업데이트가 이루어지지 않을 경우, 무한 반복이 발생할 수 있음)

for 문

for (초기식; 조건식; 증감식) {
  // 조건식이 참인 동안 반복 실행
}

• 반복 횟수가 명확할 때 주로 사용
• 배열이나 객체를 순회할 때는 for .. in 혹은 for ... of와 같은 문법을 사용하기도 함
  • for ... in : 객체의 열거가 가능한 프로퍼티 키를 순회
  • for .. of : 순회 가능한(iterable) 객체(배열, 문자열 등)의 요소를 순회