🎯 JavaScript의 전반적인 개념에 대해 알아봅니다.

📗 Today I Learned

자바스크립트 특징

인터프리터 언어

인터프리터 언어는 별도의 컴파일 과정 없이 실행되므로 코드 작성 후 바로 실행하는 언어입니다.

📌 특징

• 컴파일 단계가 없습니다.

• 실행 속도가 비교적 느립니다.

• 수정과 실행이 빠릅니다.
  
  

최신 JavaScript 엔진(V8 등)은 JIT(Just-In-Time) 컴파일 방식을 도입하여 속도를 최적화하고 있습니다.

🤔 JIT 컴파일 방식이란?
인터프리터 방식과 컴파일러 방식을 혼합한 방식으로, 실행 도중에 필요한 코드만 즉시 컴파일하여 속도를 높인 방식입니다.

동적 타입 언어

자바스크립트는 동적 타입 언어로, 변수에 저장되는 값에 따라 타입이 자동으로 변경될 수 있습니다.

명시적 타입 변환

개발자가 의도적으로 타입을 변경하는 방식입니다.

• 문자열 변환: 값.toString() 또는 String(값)

• 숫자 변환: Number(값)

• 불리언 변환: Boolean(값)

암묵적 타입 변환

개발자가 의도하지 않아도 연산 과정에서 타입이 자동 변환됩니다.

• 문자열 변환: 값 + ""

• 숫자 변환: 값 * 1

• 불리언 변환: !!값

⚠️ 예상치 못한 타입 변환이 발생할 수 있으므로, typeof 또는 일치 연산자 (===)를 사용하여 타입을 검사하는 것이 중요합니다.

=> 이를 방지하기 위해 TypeScript 사용을 고려할 수 있습니다.

프로토타입 기반의 상속

클래스 기반이 아닌 프로토타입 기반 상속을 사용합니다. 모든 객체는 프로토타입이라는 부모 객체를 상속받으며, 프로토타입 체이닝을 통해 속성과 메서드를 공유할 수 있습니다.

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function () {
  console.log(`My name is ${this.name}`);
};

const dog = new Animal('Buddy');
dog.sayName(); // "My name is Buddy"

패러다임 지원

JavaScript는 함수형 프로그래밍, 명령형 프로그래밍, 객체지향 프로그래밍을 모두 지원합니다.

함수형 프로그래밍

함수를 값으로 다루고, 부수 효과(side effects)를 최소화하며, 상태 변경을 피하고, 불변성을 유지하는 프로그래밍 패러다임입니다.

const add = (a, b) => a + b;

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

명령형 프로그래밍

명령형 프로그래밍은 어떻게 할지를 명시하는 프로그래밍 스타일입니다. 즉, 상태 변경과 명령을 통해 프로그램을 제어하는 방식입니다.

const numbers = [1, 2, 3, 4];
let doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled); // [2, 4, 6, 8]

객체지향 프로그래밍

객체지향 프로그래밍은 데이터와 그 데이터를 처리하는 방법을 객체로 묶어서 처리하는 방식입니다.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // "Buddy barks."

---

자바스크립트의 역사

자바스크립트의 탄생 배경

Brendan Eich 사진 (출처: wikipedia)	Netscape 웹사이트 화면 (출처: zdnet)

자바스크립트는 1995년, 넷스케이프(Netscape)사의 개발자 Brendan Eich에 의해 웹 페이지의 보조적인 기능을 위해 개발되었습니다.

• 1995년 : 이름 변경

  • Mocha → LiveScript → JavaScript
    
    

• 1996년 : 크로스 브라우징 이슈 발생

  • Netscape의 Netscape Navigator browser와 Mircrosoft의 Internet Explorer 의 사용자 점유율을 높이기 위해 경쟁적으로 기능을 추가하면서, 자바스크립트가 브라우저마다 다르게 동작하게 되었습니다. 이로 인해 같은 자바스크립트 파일이 브라우저마다 동작하지 않는 크로스 브라우징 이슈가 발생했습니다.
    

ECMAScript

ECMAScript는 자바스크립트(JavaScript)의 기반이 되는 표준 규격으로 1996년에 넷스케이프가 ECMA(유럽 컴퓨터 제조업체 협회)에 표준화 요청을 하면서 개발이 시작되었습니다.

• 1997년 : ECMAScript 1 (ES1) 채택
  ECMA 총회에서 ECMAScript 1로 채택되었고, 이후 ECMAScript라는 이름이 공식적으로 사용되었습니다.

• 버전 표기법

  • ECMAScript(연도)

  • ES(연도)

  • ES(판)

  • 예시 : ECMAScript2015 - ES2015 - ES6

• ✨ 브라우저는 브라우저 버전마다 지원하는 자바스크립트 스펙이 상이합니다. (ECMAScript 기준을 따라가지 않습니다.)

  • 👉 Can i use 에서 지원하는 스펙 확인 가능

ECMAScript 2015+ (ES6 이후)

자바스크립트의 중요한 버전으로 let, const, arrow function, class, modules, promise 등 많은 새로운 기능들이 도입되었습니다. 이를 통해 자바스크립트는 더욱 강력하고 유지보수가 용이한 언어로 발전하였으며, 비동기 처리와 모듈화가 강화되었습니다.

🤔 개발에서 최신 기능을 사용하고 싶을 때는 어떻게 할까?

polyfill와 Babel을 활용해서 최신 기능을 사용할 수 있습니다.

polyfill
지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드입니다. polyfill 라이브러리는 주로 core-js를 사용합니다.

Babel
최신 버전의 코드를 이전 버전으로 변환하는데 사용되는 도구입니다. @babel/preset-env을 사용하면, 설치된 폴리필(core-js 등)을 가져와 필요한 기능만 적용할 수 있습니다.

👉 똑똑하게 브라우저 Polyfill 관리하기 ( 토스 개발자가 알려주는 polyfill 사용방안 참고 )

---

자바스크립트 변수

컴퓨터는 데이터를 저장하기 위해 메모리를 사용하고, 이 데이터를 찾기 위해 메모리의 주소를 사용합니다. 변수는 이 주소를 대신할 이름으로, 데이터를 쉽게 찾을 수 있도록 도와줍니다. 변수는 데이터를 담아놓은 상자의 이름이라고 생각하면 됩니다.

변수 syntax

키워드 변수명 할당 연산자 값 으로 이루어집니다.

const variable = 1;

변수 생성 과정

1. 선언 단계

변수에 변수 객체에 등록합니다.

2. 초기화 단계

변수를 메모리에 할당하고, undefined로 초기화합니다.

3. 할당 단계

undefined로 초기화된 변수에 실제로 값을 할당합니다.

변수 생성 3단계는 var, const, let 별로 다르게 동작합니다.

👉 호이스팅과 변수는 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

---

자바스크립트 자료형

데이터의 종류를 데이터 타입, 자료형이라고 합니다. 자바스크립트의 자료형은 원시 타입과 참조 타입으로 나뉩니다.

원시 타입

String, Number, BigInt, Undefined, Null, Boolean, Symbol

📌 특징

• 값은 변경 불가능합니다. (immutable value)

• 값으로써 전달됩니다.

• 원시 래퍼 객체가 따로 존재합니다.

  🤔 원시 래퍼 객체 (Primitive Wrapper Object)란?

  원시 타입 값을 객체처럼 취급할 수 있게 해주는 임시 객체입니다. 자바스크립트는 원시 타입을 객체처럼 다룰 수 있는 래퍼 객체를 자동으로 생성합니다.

  <String 래퍼 객체 예시>

  let str = "hello";
  console.log(str.toUpperCase()); // "HELLO"

  💡 래퍼 객체를 사용해도 원시 값은 변경되지 않고, 메서드를 호출한 후 래퍼 객체는 사라집니다.

Number Type

자바스크립트에서는 하나의 숫자 타입, Number만 존재합니다. 모든 숫자는 실수로 취급됩니다. 즉, 자바스크립트에는 별도의 정수 타입이 없습니다.

숫자형 Number Type

• 배정밀도 64비트 부동소수점(IEEE 754)형식을 사용합니다.

  🤔 배정밀도 64비트 부동소수점(IEEE 754)형식이란?

  전자기술자 협회의 부동소수점 표현방식 표준입니다. 실수 연산 시, 근사값으로 처리됩니다.

  console.log(0.1 + 0.2); // 0.30000000000000004

• 숫자의 범위

// 원시 래퍼 객체(Number)에서 상수 변수로 제공
console.log(Number.MAX_SAFE_INTEGER); // -9,007,199,254,740,991
console.log(Number.MIN_SAFE_INTEGER); // 9,007,199,254,740,991

숫자 이외의 Number Type

• Infinity : 무한대를 나타내는 숫자 타입입니다.

• NaN : Not a Number라는 뜻으로 숫자가 아님을 나타내는 숫자 타입입니다.

BigInt Type

임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값입니다. Number 타입이 표현할 수 있는 범위를 초과하는 매우 큰 정수 값을 다룰 수 있게 해줍니다.

• 다른 타입과 혼합하여 연산할 수 없습니다.

• BigInt는 숫자 뒤에 n을 붙여 사용합니다.

const bigIntValue = 123456789012345678901234567890n;
console.log(bigIntValue); // 123456789012345678901234567890n

String Type

문자열 데이터를 표현할 때 사용됩니다. 문자열은 문자들의 순서를 의미하며, UTF-16 인코딩 방식으로 각 문자를 표현합니다.

• 문자열은 문자들의 집합입니다.

• 문자열의 각 문자는 0부터 시작하는 인덱스 번호로 구분됩니다.

let str = "hello";
console.log(str[0]);  // "h" (0번째 인덱스)
console.log(str[1]);  // "e" (1번째 인덱스)
console.log(str.length);  // 5 (문자열의 길이)

표기법

• 따옴표('), 쌍따옴표("), 백틱(`)으로 감싸서 문자열임을 표현합니다.

• 백틱(`)은 줄바꿈 형식이 허용되며 문자열 내에서 변수를 직접 삽입하거나 표현식을 계산하여 동적으로 값을 생성할 수 있습니다.

let name = "Alice";
let age = 25;

let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);  // "Hello, my name is Alice and I am 25 years old."

Boolean Type

논리적인 데이터 유형으로 ture 혹은 false 값만 가질 수 있습니다.

• 상태값(State): Boolean은 주로 어떤 객체나 요소의 상태를 나타내는 데 사용됩니다.

• Flag값: 특정 UI의 노출 여부나 어떤 조건을 만족하는지 여부를 나타낼 때 flag 변수를 사용합니다.

Undefined Type

변수 선언 후 값이 할당되지 않았을 때 자바스크립트에서 자동으로 할당되는 기본값입니다.

• 변수 선언만 하고 값 할당을 하지 않으면 값이 undefined로 설정됩니다.

Null Type

값이 없다는 것을 의도적으로 표현할 때 사용합니다.

• 이전에 참조되었던 값을 의도적으로 더이상 참조하지 않겠다는 뜻으로도 사용합니다.

• null은 undefined와 다르게 의도적인 비어있음을 나타내므로, ===로 비교해야 합니다.

Symbol Type

ES6에 추가된 타입으로, 중복되지 않는 유니크한 값을 생성할 수 있습니다.

• 객체의 프로퍼티 키로 사용할 수 있으며, 다른 값들과 충돌하지 않도록 보장됩니다.

• 유니크한 값이기 때문에 다른 코드나 라이브러리에서 사용된 심볼과 절대로 중복되지 않습니다.

• 주로 내부 속성에 대한 고유한 키를 제공하는 데 사용됩니다.

// 심볼을 사용하여 고유한 키 만들기
const uniqueKey = Symbol('description');

const obj = {
  [uniqueKey]: 'This is a unique symbol key',
};

console.log(obj[uniqueKey]); // "This is a unique symbol key"

// 심볼은 항상 고유하므로, 다른 곳에서 동일한 이름의 심볼을 만들어도 값은 다릅니다.
const anotherKey = Symbol('description');
console.log(uniqueKey === anotherKey); // false

🤔 키값에 []가 붙는 이유는 뭘까?

객체를 정의하는 시점에 정해지지 않은 속성명을 동적으로 생성하기 때문입니다.

---

참조 타입

Object, Function, Date, Array, RegExp, Map, Set 등 원시 타입의 값을 제외한 모든 것을 가리킵니다.

📌 특징

• 속성들을 변경할 수 있습니다. (mutable value)

• 참조 타입을 전달할 때는 값이 아니라 주소가 전달됩니다.

• 주소값은 스택 메모리에 저장되고, 힙 메모리에 실제 데이터(객체)가 저장됩니다.

  • 참조 타입 데이터는 힙에 저장되며, 동적으로 크기가 변할 수 있습니다.

---

데이터 처리

연산자 (Operators)

연산자는 표현식(값, 변수 등)을 대상으로 연산을 수행하여 하나의 값을 생성하는 기호입니다.

단항 연산자 (Unary Operators)

typeof : 값의 타입을 나타내는 문자열 반환합니다.

void : 표현식을 평가하되 결과를 반환하지 않습니다.

delete : 객체의 속성을 삭제합니다.

---

산술 연산자 (Arithmetic Operators)

단항 산술 연산자

• ++x : 값이 1 증가한 후 반환합니다. (전위)

• x++ : 값을 반환한 후 1 증가합니다. (후위)

• --x : 값이 1 감소한 후 반환합니다. (전위)

• x-- : 값을 반환한 후 1 감소합니다. (후위)

• +x : 값을 숫자로 변환합니다. (문자열 → 숫자)

• -x : 값의 부호를 반전합니다.

이항 산술 연산자

• + : 두 값을 더합니다.

• - : 두 값을 뺍니다.

• * : 두 값을 곱합니다.

• / : 두 값을 나눕니다.

• % : 나눗셈 후 나머지를 반환합니다.

---

비교 연산자 (Comparison Operators)

• == : 두 값이 같으면 true를 반환합니다. (타입 변환 O)

• === : 두 값과 타입이 모두 같으면 true를 반환합니다. (타입 변환 X)

• != : 두 값이 다르면 true를 반환합니다.

• !== : 두 값이 다르거나 타입이 다르면 true를 반환합니다.

• > : 왼쪽 값이 오른쪽 값보다 크면 true를 반환합니다.

• >= : 왼쪽 값이 오른쪽 값보다 크거나 같으면 true를 반환합니다.

• < : 왼쪽 값이 오른쪽 값보다 작으면 true를 반환합니다.

• <= : 왼쪽 값이 오른쪽 값보다 작거나 같으면 true를 반환합니다.

---

논리 연산자 (Logical Operators)

논리 연산자는 불리언 값 또는 특정 값을 반환합니다.

• && : AND 연산 (첫 번째 값이 false면 그 값을 반환)

• || : OR 연산 (첫 번째 값이 false면 두 번째 값을 반환)

• ! : NOT 연산 (불리언 값을 반전)

---

기타 연산자

• , : 쉼표 연산자, 두 표현식 평가 후 마지막 값 반환합니다.

• " "+" " : 문자열 연결 연산자

• ? : 옵셔널 연산자 (obj?.prop), 객체의 속성을 참조 시에 유효하지 않는 경우에는 undefined를 반환합니다.

• +=, -=, *=, /=, %= : 할당 연산자, 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당합니다.

• &&=, ||= : 논리 연산과 할당을 동시에 수행합니다.

• condition ? trueValue : falseValue : 삼항 연산자, 조건 연산자에 따라 두 값 중 하나를 반환합니다.

---

자바스크립트 함수

소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미합니다.

함수의 특징

• 일급 객체로 동작합니다.

  • 함수의 실제 매개변수가 될 수 있습니다.

  • 함수의 반환값이 될 수 있습니다.

  • 할당명령문의 대상이 될 수 있습니다.

  • 동일비교의 대상이 될 수 있습니다. (값으로 표현 가능)

함수 실습

// 함수는 실제 매개변수가 될 수 있다, 함수는 함수의 반환값이 될 수 있다.
function foo(arg) {
  return arg;
}

function bar() {
  console.log('bar');
}

foo(bar)(); // 'bar'


// 함수는 할당명령문의 대상이 될 수 있다.
const foo1 = function (arg) {
  return arg;
};

foo1(1); // 1을 반환


// 기본값 매개변수를 넣을 수 있다.
function foo2(arg = 1) {
  console.log(arg);
}

foo2(); // '1'


// 나머지 매개변수를 넣을 수 있다.
function foo3(arg, ...rest) {
  console.log(rest);
}

foo3(1, 2, 3, 4); // [2, 3, 4]

// argument 객체
function foo4(arg) {
  console.log(arguments);
}

foo4(1, 2, 3, 4); // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

// 함수 선언문
function foo5() {
  console.log('foo5');
}

foo5(); // 'foo5'


// 함수 표현식
const foo6 = function () {
  console.log('foo6');
};

foo6(); // 'foo6'


// Function 생성자 함수
const foo7 = new Function("console.log('foo7')");

foo7(); // 'foo7'


// 화살표 함수 표현식
const foo8 = () => {
  console.log('foo8');
};

foo8(); // 'foo8'


// IIFE (즉시 실행 함수)
(function foo9() {
  console.log('foo9');
})();


// 재귀 함수
function foo10(arg) {
  if (arg === 3) return;
  console.log('foo10>>>>' + arg);

  foo10(arg + 1);
}

foo10(1);


// 중첩 함수
function foo11(arg) {
  function bar() {
    console.log(arg);
  }
  bar();
}

foo11('foo11');


// 콜백 함수
function foo12(arg) {
  arg();
}

foo12(() => {
  console.log('foo12');
});

---

✏️ 한 줄 회고

자바스크립트의 다양한 특징을 정리하면서 그냥 넘겼던 개념들도 정확히 알게 되었습니다.