2. 자료형(DataType)

1. 변수

1-1. var

1) ECMAScript 초기 버전부터 사용 : var는 자바 스크립트 초기부터 존재하는 변수 선언 방식이다.

2) 함수 레벨 스코프 : var로 선언된 변수는 가장 가까운 함수의 스코프에 속하며, 함수 밖에서 선언된 경우 전역 스코프에 속한다.

function myFunction() {
    var insideVar = "Hello";
    console.log(insideVar); // 함수 내부에서 접근 가능
}

myFunction();
console.log(insideVar); // ReferenceError: insideVar is not defined

var outsideVar = "Hi";

function myFunction() {
    console.log(outsideVar); // 전역 변수 outsideVar에 접근 가능
}

myFunction(); // 출력: Hi
console.log(outsideVar); // 출력: Hi

3) 중복 선언 가능 : 동일한 스코프 내에서 var로 선언된 변수는 중복해서 선언할 수 있다. 이후 선언이 이전 선언을 덮어쓰게 된다.

var outsideVar = "Hi";

function myFunction() {
    console.log(outsideVar); // 전역 변수 outsideVar에 접근 가능
}

myFunction(); // 출력: Hi
console.log(outsideVar); // 출력: Hi

1-2. let

1) ECMAScript 6 부터 추가 : let은 ES6에서 새롭게 도입된 변수 선언 키워드다.

2) 블록 레벨 스코프 : let으로 선언된 변수는 블록({}) 내에서만 유효한 스코프를 가진다. 이는 함수, if 문, for 문, while 문, try/catch 문 등의 블록 내에서 선언된 let 변수가 해당 블록 외부에서는 접근할 수 없음을 의미한다.

3) 중복 선언 불가: 같은 스코프 내에서 let으로 선언된 변수는 중복해서 선언할 수 없다.

let age = 30;
// let age = 25; // SyntaxError: Identifier 'age' has already been declared
if (true) {
  let age = 20; // 다른 스코프(블록 내)에서는 재선언 가능
  console.log(age); // 출력: 20
}
console.log(age); // 출력: 30

let은 var에 비해 더 안정적이고 예측 가능한 코드 작성을 가능하게 한다.

1-3. const

const는 변수 선언 키워드로 let과 비슷하게 사용하지만 한 번 할당된 값을 수정할 수 없는 변수를 생성한다. 이로써 변수가 불변(immutable)하게 된다.

1-3-1. const 변수의 주요 특징

1) 입력값 수정 불가능 (immutable) : const로 선언된 변수는 한 번 값을 할당하면 그 값을 변경할 수 없다. 이는 변수가 상수로 간주되어 값을 변경할 수 없음을 의미 한다.

2) 보안 : 중요한 값이나 상수적인 값(예: 수학적 상수)을 저장할 때 사용하면, 악의적인 코드나 실수로 인한 값 변경을 방지하여 보안을 강화할 수 있다.

3) 멀티 스레드 환경에서 안전 : 여러 스레드가 동시에 변수에 접근하는 상황에서 const 변수는 안전하게 사용될 수 있으며, 데이터 일관성을 유지할 수 있다.

4) 실수 방지 : 값을 변경할 수 없는 변수는 실수로 값이 변경되는 것을 방지하여 코드의 신뢰성을 높인다.

const PI = 3.14159265359;
// PI = 3.14; // TypeError: Assignment to constant variable.

PI 변수가 한 번 할당되면 더 이상 변경할 수 없게 되어 불변한 값으로 사용된다.

1-4. Hoisting

호이스팅(Hoisting)은 자바스크립트에서 변수 및 함수 선언을 실제 코드 실행 위치와 관계없이 해당 스코프의 최상단으로 끌어올리는 동작을 나타낸다. 이것은 변수나 함수가 선언된 위치가 코드 내에서 어디에 있든지 먼저 선언된 것처럼 동작한다는 의미다.

중요한 점은, 호이스팅은 변수나 함수의 초기화(assign)가 아니라 선언만을 끌어올린다는 것이다. 초기화는 실제 코드 실행 위치에서 이루어진다.

 - 변수 호이스팅

console.log(x); // undefined
var x = 5;

var x = 5;의 선언 부분은 호이스팅되어 코드의 최상단으로 끌어올려집니다. 그러나 변수 x의 초기화(값을 할당하는 부분)는 호이스팅되지 않으므로 console.log(x);에서 x는 undefined로 출력된다.

- 함수 호이스팅

sayHello(); // "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

function sayHello()의 선언이 호이스팅되어 함수 호출 이전에 선언되었다. 따라서 함수를 호출할 수 있으며 "Hello, World!"가 출력된다.

호이스팅은 코드의 가독성을 향상시키기 위해 변수와 함수 선언을 스코프 상단에 작성하는 것을 권장한다.

 

2. 변수 type

2-1. 기본형(Primitive)

더 이상 나눠지지 않는 하나의 값 (Single item)

2-1-1. number (숫자)

number 데이터 타입은 숫자를 나타내며 정수와 소수를 모두 포함한다.

모든 숫자는 64-bit 부동 소수점 형식을 사용하여 저장된다.

let integerNumber = 42;
let floatingPointNumber = 3.14;

2-1-2. string (문자열)

string 데이터 타입은 텍스트 데이터를 나타냅니다. 작은 따옴표(''), 큰 따옴표(""), 또는 백틱(``)으로 문자열을 감싸서 생성할 수 있다. 

let singleQuotes = 'Hello, World!';
let doubleQuotes = "JavaScript";
let backticks = `Welcome to ${doubleQuotes}`;

백틱(Template literals)은 ECMAScript 6 (ES6)에서 도입된 문자열 표기법으로, 문자열을 작성할 때 유용한 기능을 제공한다. 백틱은 역따옴표 (\`)로 표시되며, 주로 문자열 내에 변수나 표현식을 쉽게 포함하고 다룰 때 활용된다. 다음은 백틱의 주요 특징과 사용법에 대한 설명이다.

1) 변수 또는 표현식 삽입 : 백틱 문자열 내에 ${}를 사용하여 변수나 표현식을 삽입할 수 있다. 이를 통해 문자열 내에서 동적인 값을 사용할 수 있다.

const name = "Alice";
const age = 30;
const greeting = `안녕하세요, ${name}님! 나이는 ${age}세 입니다.`;
console.log(greeting); // "안녕하세요, Alice님! 나이는 30세 입니다." 출력

2) 여러 줄 문자열 : 백틱을 사용하면 여러 줄에 걸친 문자열을 간단하게 작성할 수 있다.

const multiLineString = `
  첫 번째 줄
  두 번째 줄
  세 번째 줄
`;
console.log(multiLineString);
/*
  출력:
  첫 번째 줄
  두 번째 줄
  세 번째 줄
*/

3) 태그드 템플릿(Tagged Templates) : 백틱 문자열을 사용하여 사용자 정의 태그 함수를 호출할 수 있다. 이를 활용하면 문자열을 가공하거나 특별한 형식으로 출력하는 데 유용하다.

function customTag(strings, ...values) {
  // strings 배열은 문자열의 일부를 포함하고 values 배열은 삽입된 값들을 포함합니다.
  let result = "";
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}

const name = "Alice";
const age = 30;
const message = customTag`안녕하세요, ${name}님! 나이는 ${age}세 입니다.`;
console.log(message); // "안녕하세요, Alice님! 나이는 30세 입니다." 출력

백틱을 사용하면 문자열을 보다 가독성 있게 작성하고 동적인 내용을 포함할 수 있어서 자바스크립트에서 문자열을 다룰 때 편리한 기능 중 하나다. ES6 이상의 환경에서 사용할 수 있으며, 현대적인 자바스크립트 애플리케이션 개발에서 자주 활용 된다.

2-1-3. boolean (부울)

boolean 데이터 타입은 참(True) 또는 거짓(False) 값을 나타내며 논리 연산에 사용된다.

let isTrue = true;
let isFalse = false;

2-1-4. null (널)

null 데이터 타입은 변수가 비어있음을 나타냅니다. 명시적으로 값이 없음을 나타내는 데 사용된다.

let emptyValue = null;

2-1-5. undefined (언디파인드)

undefined 데이터 타입은 값이 할당되지 않은 변수를 나타낸다. 

let notDefined;
console.log(notDefined); // 출력: undefined

2-1-6. symbol (심볼)

symbol  데이터 타입은 ES6에서 도입되었으며 고유하고 변경 불가능한 값을 나타낸다. 일반적으로 객체의 속성(key)으로 사용된다.

const uniqueSymbol = Symbol('description');

 

2-2. Reference(참조형)

참조형(Reference Type) 데이터는 단일 아이템이 아니라 복합적인 데이터 구조를 다루는데 사용된다. 이러한 데이터는 여러 개의 값을 묶어서 하나의 단위로 관리하며, 주로 객체(Object), 배열(Array), 클래스(Class) 등으로 표현된다.

2-2-1. 객체(Object)

중괄호 {}로 표현되며, 이름과 값의 쌍으로 이루어진 프로퍼티들의 집합이다. 객체는 다양한 데이터 타입을 포함할 수 있으며, 프로퍼티에 접근할 때는 프로퍼티의 이름을 사용한다.

const person = {
  name: "John",
  age: 30,
  isStudent: false
};
console.log(person.name); // "John"

2-2-2. 배열(Array)

대괄호 []로 표현되며, 순서가 있는 요소들의 집합이다. 배열은 인덱스를 사용하여 요소에 접근하며, 모든 요소는 동일한 데이터 타입을 가질 필요는 없다.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

2-2-3. 클래스(Class)

클래스는 객체 지향 프로그래밍에서 사용되며, 객체를 생성하기 위한 템플릿으로 사용된다. 클래스를 사용하여 객체를 생성하면 해당 객체는 클래스의 인스턴스가 된다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

참조형 데이터는 단순한 값이 아니라 복잡한 데이터 구조를 다루는 데 사용되며, 여러 개의 값이 하나의 단위로 묶여 관리된다. 이러한 데이터 타입은 프로그램에서 중요한 역할을 하며, 객체지향 프로그래밍에서는 클래스를 사용하여 데이터와 기능을 묶어 관리하는데 활용된다.

2-3. Function (함수)

자바스크립트에서 함수(Function)는 "First-class Function"의 특성을 가지고 있다. 이것은 함수를 다른 변수와 동일하게 다룰 수 있는 능력을 의미한다. 함수가 "First-class"로 취급되면 다음과 같은 기능을 수행할 수 있다.

1) 함수를 변수에 할당 : 함수를 변수에 저장하거나 다른 변수로 복사할 수 있다.

const sayHello = function() {
  console.log("Hello!");
};
const greet = sayHello; // 함수를 다른 변수에 할당
greet(); // "Hello!" 출력

2) 함수를 다른 함수의 매개변수로 전달: 함수를 다른 함수에 인수(argument)로 전달할 수 있다.

function operate(operation, x, y) {
  return operation(x, y);
}
function add(a, b) {
  return a + b;
}
const result = operate(add, 5, 3); // 함수를 다른 함수에 전달
console.log(result); // 8 출력

3) 함수를 다른 함수에서 반환 : 함수는 다른 함수 내에서 생성되고 반환될 수 있다.

function createMultiplier(factor) {
  return function(x) {
    return x * factor;
  };
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10 출력
console.log(triple(5)); // 15 출력

4) 함수를 객체의 속성으로 사용 : 함수를 객체의 속성으로 저장하고 호출할 수 있다.

const person = {
  name: "Alice",
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
person.sayHello(); // "Hello, Alice!" 출력

이러한 "First-class Function"의 특성은 자바스크립트를 함수형 프로그래밍(Functional Programming) 언어로 사용하거나 콜백(callback) 함수를 다룰 때 매우 유용하게 활용된다.