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

📗 Today I Learned

Flow control

Flow control은 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서를 나타냅니다.

choice (조건문)

일부 조건이 충족되는 경우에만 일련의 명령문을 실행합니다.

If...else

• 논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용합니다.

• if문의 논리조건에는 true, false로 평가할 수 있는 표현식을 대입 가능합니다.

• 논리조건이 참인 경우, if 블럭문을 실행하고, 거짓인 경우, else 블럭문을 사용합니다.

• false 로 평가되는 값 : false, undefined, null, 0, NaN, ""

• else if를 사용하여, 다수의 조건을 순차적으로 검사할 수 있습니다.

🤔 빠르게 if문을 끝낼 수 있는 방법이 있을까?

if...else문이 아닌 중첩 if문을 사용하여 nested contidional을 지양할 수 있습니다.

before

const 조건문 = (인자) => 인자 === 1;
const 조건문2 = (인자) => 인자 === 2;

const 함수 = (인자) => {
  if (조건문(인자)) {
    return 1;
  } else if (조건문2(인자)) {
    return 2;
  } else return 3;
};

함수(2);

after

const 조건문 = (인자) => 인자 === 1;
const 조건문2 = (인자) => 인자 === 2;

const 함수 = (인자) => {
  if (조건문(인자)) return 1; 
  if (조건문2(인자)) return 2; 
  return 3;
};

함수(2);

switch

• switch에 명시된 표현식을 평가한 후, 평가된 값과 case 라벨 값을 비교하여 일치하는 case 명령문을 실행합니다.

• 평가된 값에 해당하는 case무이 없을 경우 default의 명령문이 실행되도록 default문을 작성할 수 있습니다.

const foo = (parameter) => {
  switch (parameter) {
    case 1:
      return 1;
    case 2:
      return 2;
    case 3:
      return 3;
    default: 
      return 0;
  }
};

foo(3); // 3

---

loop

어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행합니다.

Conditional loop

조건부 loop는 종료될 수 있는 조건이 아닌 경우에는 무한 루프에 빠질 수 있으므로 주의해야합니다.

• while
  시작할 때 조건을 평가하는 타입입니다.

let count = 0;
while (count > 3) {
  count++;
  console.log(count);
}

console.log('end');
// 1
// 2
// 3
// 'end'

• do...while
  마지막에 조건을 평가하는 타입입니다. 본문은 항상 한 번 이상 실행합니다.

let count = 0;
do {
  count++;
  console.log(count);
} while (count < 3);

console.log('end');

General loop

특정 부분 코드가 반복적으로 수행될 수 있도록 합니다.

• for

  • 초기문 : loop 내에 사용할 loop변수를 초기화합니다.

  • 조건문 : loop 내 코드를 실행하기 전에 조건을 평가하여 loop를 지속할지 판단합니다.

  • 증감문 : loop 내 코드를 실행한 후, 실행되는 문장입니다.

for (let 루프변수 = 0; 루프변수 < 3; 루프변수++) {
  console.log(루프변수);
}

Collection loop

컬렉션 안의 항목들을 횡단하는 제어흐름문입니다. for문과 다르게 명시적으로 루프변수를 관리하지 않습니다.

• for...in
  객체의 열거 가능한 속성 이름(key) 을 반복합니다.

const foo = {
  apple: '🍎',
  banana: '🍌'
};

for (const key in foo) {
  console.log(key);
}
// 'apple' 
// 'banana'  

• for...of
  배열, 문자열 등 iterable 객체의 값을 직접 반복합니다.

const foo = 'apple';

for (const i of foo) {
  console.log(i);
}
// 'a' 
// 'p' 
// 'p' 
// 'l' 
// 'e' 

---

제어문

continue문

• while, do...while, for문을 다시 시작하기 위해 사용됩니다.
• 가장 안쪽의 while, do...while, for문을 둘러싼 반복을 종료하고, 다음 loop를 실행합니다.

const foo = () => {
  let count = 0;
  while (count < 3) {
    count++;
    console.log(count);
    continue;
    console.log('출력되지 않는 문자열');
  }
};

foo();
// 1
// 2
// 3

break문

• 반복문, switch문을 종료시킬 때 사용됩니다.
• 가장 가까운 while, do-while, for, switch문을 종료하고, 다음 명령어로 넘어가게 합니다.

const foo = (type) => {
  switch (type) {
    case 'apple':
      console.log('🍎');
    case 'banana':
      console.log('🍌');
      break;
    default: 
      console.log('🤔');
  }
  console.log('last');
};

foo('apple');
// '🍎' 가 출력되고, break가 없기 때문에 'banana'로 넘어갑니다.
// '🍌' 가 출력되고, break가 있기 때문에 default는 실행되지 않습니다.
// 반복문을 나온 후, 'last'가 출력됩니다.

return문

• 함수의 실행을 중단하고 값을 반환할 때 사용됩니다.
• return을 만나면 함수는 즉시 종료되며, 이후의 코드는 실행되지 않습니다.

const findEvenNumber = (arr) => {
  for (let num of arr) {
    if (num % 2 === 0) {
      return num; 
    }
  }
  return '짝수가 없음'; 
};

console.log(findEvenNumber([1, 3, 5, 6, 7])); // 6

---

Non-local control flow

throw문

예외를 발생시킬 때 사용됩니다. catch 블럭에서 에러 객체를 핸들링하게 됩니다.

예외가 발생 시 과정

1. 현재 함수의 실행이 중지됩니다.

2. 에러 객체와 함께 에러가 throw 됩니다.

3. 제어 흐름은 catch 블록이 있으면 전달되고, 없으면 프로그램이 종료됩니다.

const foo = () => {
  console.log(1);
  throw '여기';
  console.log(2); // throw문 이후의 명령문은 실행되지 않습니다. 
};

foo(); 
// 1 
// Error: 여기

Error 객체

사용자가 직접 Error 객체를 정의하여 사용할 수 있습니다.

const foo = () => {
  console.log(1);
  const customError = new Error();
  customError.name = 'ErrorName';
  customError.message = '에러 발생';
  
  throw customError;
  
  console.log(2);
};

foo();

// 1
// ErrorName : 에러 발생

try...catch

코드 실행 중 발생하는 오류를 잡아내어 프로그램이 강제 종료되지 않도록 하는 예외 처리 구문입니다.

const foo = (value) => {
  if (value < 3) throw value;
  else console.log(value);
};

const bar = (value) => {
  try{
    foo(value);
  } catch (catchID) {
    console.log('catch', catchID);
  } finally {
    console.log('finally'); // 예외 상황이 발생하지 않더라도 출력됩니다.
  }
};

bar(2); 
// 'catch' 2
// 'finally'

---

객체와 빌트인 객체

객체

객체는 속성을 가진 독립적인 개체입니다.

const foo = { // 리터럴 표기
  hello : 'JavaScript',
  happy : 'to meet you',
};

function Person (name, age) { // 생성자 함수
  this.name = name;
  this.age = age;
}

new Person('Jason', 30);

const Person2 = { // Object.create
  name: 'Mickey',
  age: 25,
  getName: function () {
    console.log(this.name);
  },
};

const Joy = Object.create(Person2);
Joy.name = 'Joy';
Joy.getName(); // 'Joy'

• 속성

  • property: 키와 값 사이의 연결관계입니다.

  • method: 객체에 속해있는 함수를 일컫는 말입니다.

• 속성 나열 방법

  • for...in

  • Object.keys(객체)

  • Object.getOwnPropertyNames(객체)

• 객체 비교
  객체를 서로 비교하면 속성과 값이 같은 객체여도 참조값이 다르므로 다른 값입니다.

const foo = {
  name: 'apple'
};

const bar = {
  name: 'apple'
};

console.log(foo === bar); // false

• 얕은 복사
  복사된 객체의 속성 중 하나라도 같은 참조를 하게 되는 것을 얕은 복사라 합니다.

const person = { 
  name : 'Amy',
  age : 30,
};

// 얕은 복사 방법 2가지
const joy = Object.assign({}, person);
const kei = { ...person };

joy.name = 'Joy';
kei.name = 'Kei';

console.log(joy === kei); // false
console.log(joy.age === kei.age); // true;

• 깊은 복사
  복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사라고 합니다.

  • 재귀함수를 이용한 복사

  • JSON.stringify

---

기초 객체

Number

숫자를 표현하고 다룰 때 사용하는 원시 래퍼 Bulit-in 객체입니다.

• 생성자 함수

  • Number.prototype

  • 인스턴스 메서드: toFixed, toLocalString, ...

Math

수학적인 상수와 함수를 위한 속성과 메서드를 가진 Built-in 객체입니다.

• 속성 : PI, E, ...

• 메소드 : abs(), pow(), ceil(), ...

Date

1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것입니다. 한국은 UTC 기준으로 9시간이 더해집니다.

🤔 UTC란 무엇일까?

UTC는 국제 표준 시간의 협정 세계시로 국제적인 표준 시간의 기준으로 쓰이는 시각입니다. 1970년도에 UTC 채택이 되고, 그리니치 평균시(GMT)에 기반합니다.

• 속성: x

• 메소드: now(), parse(), UTC()

const example = [
  Date.now(),
  Date.parse('March 27, 2025'),
  Date.UTC(2025, 03, 27),
];

example.forEach((item) => console.log(item));
// 1743087736192
// 1743087600000
// 1745798400000

const year = new Date().getFullYear() // 2025
const month = new Date().getMonth()+1; // 3, 1월이 0부터 시작하기 때문에 1을 더해 줌
const day = new Date().getDate(); // 27
new Date().toLocaleString(); // '2025. 3. 27. 오후 06:26:14'
new Date().toLocaleDateString(); // '2025. 3. 27.'

String

문자열 리터럴로 표현되며, 쌍따옴표("), 따옴표('), 백틱(`)을 사용하여 표현합니다.

• 인스턴스 속성 : length

• 인스턴스 메서드

  • 접근 : at(), charAt(), charCodeAt(), codePointAt()

  • 찾기 : indexOf(), lastIndexOf(), search()

  • 포함 여부: includes(), startWith(), endsWith(), match(정규표현식), matchAll(정규표현식)

  • 비교: localeCompare()

  • 변경하기: toLocaleLowerCase(), toLocaleUpperCase(), toString(), replace(), replaceAll()

  • 추가하기: padEnd(), padStart(), repeat()

  • 합치기: concat(), +

  • 분리하기: slice, substring(), split(), trim(), trimStart(), trimEnd()

const str = "Hello, 🌍!";

console.log(str.at(1)); // "e"
console.log(str.charAt(1)); // "e"
console.log(str.charCodeAt(1)); // 101 (Unicode for 'e')
console.log(str.codePointAt(7)); // 127757 (Unicode for '🌍')

// ------------------------------------

const text = "Hello world, welcome to the universe.";

console.log(text.indexOf("world")); // 6
console.log(text.lastIndexOf("o")); // 25
console.log(text.search(/welcome/i)); // 13 (대소문자 무시 정규표현식)

// ------------------------------------

const sentence = "JavaScript is awesome!";

console.log(sentence.includes("awesome")); // true
console.log(sentence.startsWith("Java")); // true
console.log(sentence.endsWith("!")); // true

console.log(sentence.match(/\w+/g)); // ["JavaScript", "is", "awesome"]
console.log([...sentence.matchAll(/\w+/g)]); 
// [ ["JavaScript"], ["is"], ["awesome"] ]


// ------------------------------------

console.log("apple".localeCompare("banana")); // -1 (앞 문자열이 사전순으로 더 앞)
console.log("banana".localeCompare("apple")); // 1 (더 뒤)
console.log("apple".localeCompare("apple")); // 0 (같음)


// ------------------------------------

const phrase = "Hello, How Are You?";

console.log(phrase.toLocaleLowerCase()); // "hello, how are you?"
console.log(phrase.toLocaleUpperCase()); // "HELLO, HOW ARE YOU?"

const number = 2025;
console.log(number.toString()); // "2025"

const message = "The sun is bright. The sun gives us light.";
console.log(message.replace("sun", "moon")); 
// "The moon is bright. The sun gives us light."

console.log(message.replaceAll("sun", "moon")); 
// "The moon is bright. The moon gives us light."

// ------------------------------------

const num = "5";

console.log(num.padStart(3, "0")); // "005"
console.log(num.padEnd(3, "0")); // "500"

console.log("Hi! ".repeat(3)); // "Hi! Hi! Hi! "

// ------------------------------------

const text = "  Hello, JavaScript!  ";

console.log(text.slice(2, 8)); // "Hello,"
console.log(text.slice(-10, -1)); // "JavaScript"

console.log(text.substring(2, 8)); // "Hello,"
console.log(text.substring(8, 2)); // "Hello," (start > end면 자동으로 교체)

console.log(text.split(" ")); // ["", "", "Hello,", "JavaScript!", "", ""]
console.log(text.split(",", 2)); // ["  Hello", " JavaScript!  "]

console.log(text.trim()); // "Hello, JavaScript!"
console.log(text.trimStart()); // "Hello, JavaScript!  "
console.log(text.trimEnd()); // "  Hello, JavaScript!"

Regex

문자열에서 특정 문자의 조합 패턴을 찾는 도구입니다. 슬래시(/)로 감싼 형태이며, 플래그(flags)는 선택 사항입니다.

/패턴(pattern)/플래그(flags)

👉 정규표현식은 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

Collection

Collection은 데이터 항목들의 그룹을 의미합니다.

Array

배열은 여러 값을 순서대로 저장할 수 있는 데이터 구조입니다. 배열 리터럴로 표현되며, 대괄호([])로 감싸서 정의합니다.

• 인스턴스 속성: length

• 인스턴스 메서드

  • 요소 접근: at()

  • 요소 찾기 : indexOf(), lastIndexOf()

  • 요소 포함 여부 : includes

  • 요소 확인하기: forEach()

  • 요소 판별하기 : every(), some()

  • 요소 찾기 : find(), findIndex()

  • 요소 추가하기 : push(), unshift()

  • 요소 제거하기 : pop(), shift()

  • 요소 변경하기 : flatMap(), map()

  • 요소 제거하기 : filter()

  • 배열 합치기 : concat(), fill()

  • 배열 분리하기 : slice(), splice()

  • 배열 재배치하기 : reverse(), sort(),

Map

키와 값을 서로 매핑시켜 저장하고 저장된 순서대로 요소를 반복적으로 접근할 수 있는 객체입니다.

• 모든 데이터 값을 키로 활용이 가능합니다.

• 기본적으로 갖고 있는 속성이 없어 기본 속성들과의 충돌이 없습니다.

• 추가된 순서대로 반복됩니다.

• 키, 값쌍의 빈번한 추가제거에서는 Object보다 Map이 퍼포먼스가 좋습니다.

Set

중복된 값을 허용하지 않는 객체입니다.

• 배열을 인자로 받을 수 있습니다.

JSON

JavaScript Object Notation으로 인터넷에서 자료를 주고받을 때 자료를 표현하는 방법입니다.

• 정적 메서드

  • JSON.stringify: 문자열로 변환합니다.

  • JSON.parse: 문자열에서 JSON으로 변환합니다.

    • 문자열이 객체가 아닌 경우 오류가 발생하므로 try...catch로 에러 핸들링이 권장됩니다.

---

언어가 갖고 있는 메커니즘

프로토타입

객체가 다른 객체의 속성과 메서드를 상속할 수 있게 하는 메커니즘입니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('John');
person1.greet(); // "Hello, my name is John"
console.log(person1.constructor); // Person

• 함수 타입에만 prototype가 존재합니다.

• 함수에 부모객체가 존재하기 때문에 부모 객체의 인스턴스를 생성할 수 있습니다.

• 객체는 [[Prototype]]이라는 내부 프로퍼티를 통해 프로토타입을 가리킴. 이를 __proto__로 접근할 수 있습니다. (권장 X)

• constructor : 객체를 생성한 생성자 함수를 가리키는 특수한 속성입니다.

class

프로토타입 기반 상속을 사용하는 방식입니다. 프로토타입의 문법적 설탕(syntactic sugar)이라고 할 수 있습니다.

constructor

인스턴스를 생성하고 클래스 필드를 초기화하기 위해 약속된 특수 메서드입니다. 생략이 가능합니다.

정적 메서드

클래스 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 정의할 때 사용합니다. static 키워드를 사용합니다.

인스턴스 속성

클래스 내부에 캡슐화된 변수 = 멤버 변수를 말합니다. 인스턴스 속성은 this에 바인딩이 필요합니다.

getter

특정 인스턴스 속성을 조회하며 조작하는 메서드입니다. get 키워드를 사용하며 무조건 값을 반환합니다.

setter

특정 인스턴스 속성에 할당하며 조작하는 메서드입니다. set 키워드를 사용합니다.

extends - 상속

extends 와 super 키워드를 통해 class에서 상속을 구현할 수 있습니다.

class Person {
  constructor(name, age) {
    this.name = name; // 인스턴스 속성
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  <}

  get fullName() {
    return `${this.name} Smith`; 
  }

  set fullName(value) {
    const [firstName] = value.split(' ');
    this.name = firstName;
  }

  static describe() {
    console.log("This is a Person class.");
  }
}


class Student extends Person {

  constructor(name, age, major) {
    super(name, age); // 부모 클래스의 constructor 호출
    this.major = major;
  }

  greet() {
    super.greet(); // 부모 클래스의 greet 호출
    console.log(`I major in ${this.major}.`);
  }
}

const student1 = new Student('Alice', 22, 'Computer Science');
student1.greet(); // "Hello, my name is Alice and I am 22 years old. I major in Computer Science."

Person.describe(); // "This is a Person class."

student1.fullName = "Bob";
console.log(student1.fullName); // "Bob Smith" 

this와 화살표 함수

현재 어디서 코드를 실행하고 있는지(실행 컨텍스트)를 가리킵니다. 함수를 어디에서 호출 했는지에 따라 this의 값이 달라집니다.

👉 this은 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

스코프

변수의 활동 범위입니다. 주로 외부에서 내부에 접근할 수 없도록 보호하기 위해 사용됩니다.

👉 스코프은 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

실행 컨텍스트

실행 중인 코드의 실행 환경 정보를 담고 있는 객체입니다. 코드를 실행할 때, 각 코드 블록이 어떤 환경에서 실행되고 있는지 관리하는 중요한 역할을 합니다.

👉 실행 컨텍스트는 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

클로저

함수 안의 함수에서 생기는 관계입니다. 주로 외부에서 내부에 접근할 수 없도록 보호하기 위해 사용됩니다.

👉 클로저는 미리 작성한 제 블로그를 통해 개념을 확인해주세요!

---

✏️ 회고

하루에 많은 개념들을 정리하느라 힘들었다. 그리고 예외 상황에서도 프로그램이 멈추지 않도록 try...catch로 흐름을 제어하는 데 익숙해져야겠다고 느꼈다.