Web/100일 코딩 챌린지 - Web Development

섹션 21: 고급 자바 스크립트 개념 탐색 [55일차]

hy30nq 2024. 2. 13. 12:02
728x90





자바스크립트에서 예외 처리하기: try, catch, throw 활용법

안녕하세요! 오늘은 자바스크립트에서 발생할 수 있는 오류를 우아하게 처리하는 방법에 대해 알아보려고 해요. 특히, try, catch, throw를 사용하는 방법을 자세히 살펴볼 거예요. 이 개념들을 잘 활용하면, 코드의 안정성을 높이고 사용자에게 더 친절한 경험을 제공할 수 있답니다.

1. 오류 처리 기본: try와 catch

우선, try와 catch 문은 자바스크립트에서 예외 처리의 기본이에요. 이 구문을 사용하면, 오류가 발생할 가능성이 있는 코드를 try 블록 안에 넣고, 오류가 실제로 발생하면 catch 블록이 실행되어 처리할 수 있죠.

예시:

try {
  // 오류가 발생할 수 있는 코드
  console.log('try 블록 시작');
  throw new Error('여기에 오류 발생!');
} catch (error) {
  // 오류 처리
  console.error('catch 블록에서 처리된 오류:', error.message);
}

2. 오류 발생시키기: throw

throw 구문은 개발자가 직접 오류를 발생시킬 때 사용해요. 특정 조건에서 함수가 제대로 실행되지 않을 것 같을 때, throw로 오류를 발생시키고 이를 catch 블록에서 잡아내 처리할 수 있죠.

예시:

function checkNumber(num) {
  if (isNaN(num)) {
    throw new Error('입력값이 숫자가 아닙니다.');
  }
  console.log('숫자 확인 완료:', num);
}

try {
  checkNumber('안녕하세요');
} catch (error) {
  console.error('오류 발견:', error.message);
}

3. finally로 마무리하기

finally 블록은 try와 catch 이후에 선택적으로 사용할 수 있어요. 이 블록은 오류 발생 여부와 관계없이 항상 실행되므로, 리소스 정리 작업 같은 것을 처리하기에 아주 좋죠.

예시:

try {
  console.log('리소스 사용');
  throw new Error('의도적 오류');
} catch (error) {
  console.error('오류 처리:', error.message);
} finally {
  console.log('리소스 정리 완료');
}

자바스크립트에서 try, catch, throw를 활용하면, 예상치 못한 오류로부터 사용자 경험을 보호하고, 코드의 안정성을 높일 수 있어요. 오류 처리를 위한 이러한 구문들을 잘 이해하고 활용한다면, 더 견고하고 신뢰할 수 있는 애플리케이션을 만들 수 있을 거예요.





자바스크립트에서 가변 범위 지정과 섀도잉 이해하기

안녕하세요! 오늘은 자바스크립트에서 변수의 범위를 어떻게 지정하고, 섀도잉(shadowing)이란 무엇인지에 대해 알아볼 거예요. 변수의 범위(scope)와 섀도잉은 자바스크립트를 다룰 때 중요한 개념이죠. 잘 이해하면 코드를 더 효율적으로 작성할 수 있어요.

가변 범위 지정이란?

자바스크립트에서는 var, let, const 키워드를 사용해 변수를 선언할 수 있어요. 이 중 var는 함수 범위(function-scoped) 변수를, let과 const는 블록 범위(block-scoped) 변수를 선언하는 데 사용돼요.

  • 함수 범위: var로 선언된 변수는 함수 내에서만 지역 범위를 가지고, 함수 외부에서는 전역 범위를 가집니다.
  • 블록 범위: let과 const로 선언된 변수는 중괄호({})로 둘러싸인 어떤 블록(조건문, 반복문 등) 내에서만 지역 범위를 가지고, 해당 블록 외부에서는 접근할 수 없습니다.

예시:

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 같은 변수 x를 재선언
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 블록 내 새로운 x 변수 선언
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

섀도잉이란?

변수 섀도잉은 내부 범위에서 외부 범위의 변수와 같은 이름으로 변수를 선언할 때 발생해요. 이 경우, 내부 범위의 변수가 외부 범위의 변수를 '가린다(shadow)'고 해서 섀도잉이라고 부릅니다.

예시:

let x = 10;  // 전역 변수 x

function shadowTest() {
  let x = 20;  // 여기서 섀도잉 발생
  console.log(x);  // 20, 함수 내부의 x가 전역 x를 가림
}

shadowTest();
console.log(x);  // 10, 전역 변수 x

이렇게 섀도잉을 이해하면 변수가 어떻게 접근되고, 값이 어떻게 할당되는지 더 잘 파악할 수 있어요. 코드가 복잡해질수록 이러한 이해는 버그를 줄이고, 코드의 가독성을 높이는 데 큰 도움이 됩니다.

자바스크립트에서 변수의 범위를 지정하는 방법과 섀도잉 개념을 잘 이해하고 활용한다면, 더욱 견고하고 효율적인 코드를 작성할 수 있을 거예요. 코드를 작성할 때 이런 부분에 주의를 기울여 보세요!





자바스크립트의 Rest 매개변수와 확산 연산자(...) 완전 정복

안녕하세요! 오늘은 자바스크립트에서 매우 유용하게 사용되는 Rest 매개변수와 확산(스프레드) 연산자에 대해 깊이 있게 알아보려고 해요. 이 두 기능은 코드를 더 간결하고 유연하게 만들어 줄 뿐만 아니라, 다양한 상황에서 큰 힘을 발휘한답니다.

Rest 매개변수란?

Rest 매개변수는 함수에 전달된 인자들을 배열로 다룰 수 있게 해주는 문법이에요. 매개변수 이름 앞에 ...을 붙여 사용합니다. 이를 통해 개수가 정해지지 않은 인자들을 배열로 처리할 수 있죠.

예시:

function sum(...numbers) {
  return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3));  // 6
console.log(sum(1, 2, 3, 4, 5));  // 15

확산 연산자란?

확산 연산자 또한 ...를 사용하는데요, 배열이나 객체의 요소를 개별 요소로 확산시키는 데 사용됩니다. 배열이나 객체를 복사하거나, 함수 호출 시 인자를 넘길 때 유용하게 사용할 수 있어요.

예시1: 배열 복사

const original = [1, 2, 3];
const copied = [...original];
console.log(copied);  // [1, 2, 3]

예시2: 배열 병합

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const merged = [...arr1, ...arr2];
console.log(merged);  // ['a', 'b', 'c', 'd']

예시3: 함수 인자 전달

function greet(firstname, lastname) {
  console.log(`안녕하세요, ${firstname} ${lastname}님!`);
}

const names = ['김', '철수'];
greet(...names);  // 안녕하세요, 김 철수님!

Rest 매개변수와 확산 연산자의 차이점

  • Rest 매개변수는 함수의 매개변수를 배열로 묶어주는 역할을 합니다.
  • 확산 연산자는 배열이나 객체를 개별 요소로 펼쳐주는 역할을 합니다.

이 두 기능을 활용하면, 코드를 더 유연하고 간결하게 작성할 수 있어요. 특히, 동적인 데이터 처리나 여러 데이터를 쉽게 조작할 때 매우 유용하답니다.

Rest 매개변수와 확산 연산자를 잘 이해하고 활용한다면, 자바스크립트 코드를 더욱 효과적으로 작성할 수 있을 거예요. 이 개념들을 실제 프로젝트에 적용해 보면서 그 힘을 직접 느껴보세요!





자바스크립트에서 객체 청사진을 만드는 법: 생성자 함수와 클래스

안녕하세요! 자바스크립트를 사용하다 보면 여러 곳에서 비슷한 형태의 객체를 반복적으로 만들어야 할 때가 있어요. 이럴 때 객체의 청사진 역할을 하는 생성자 함수와 클래스를 사용하면 매우 편리해요. 오늘은 이 두 가지 방법에 대해 자세히 알아볼 거예요.

생성자 함수로 객체 청사진 만들기

생성자 함수는 객체를 생성하는 함수로, 보통 함수 이름의 첫 글자는 대문자로 시작합니다. new 키워드와 함께 호출되며, 이때 새로운 객체가 생성되고 그 객체는 생성자 함수 내부에서 this로 참조됩니다.

예시:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.introduce = function() {
    console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  };
}

const person1 = new Person('김철수', 30);
const person2 = new Person('박영희', 25);

person1.introduce();  // 안녕하세요, 저는 김철수이고, 나이는 30살입니다.
person2.introduce();  // 안녕하세요, 저는 박영희이고, 나이는 25살입니다.

클래스를 사용해 객체 청사진 만들기

ES6부터 자바스크립트는 클래스 문법을 도입했어요. 클래스는 생성자 함수보다 더 명확하고 간결한 문법으로 객체의 청사진을 만들 수 있게 해줍니다. 클래스 내부에서는 constructor 메서드로 객체의 초기 상태를 설정할 수 있고, 다른 메서드들도 함께 정의할 수 있어요.

예시:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

const person1 = new Person('이하늘', 28);
const person2 = new Person('조하루', 22);

person1.introduce();  // 안녕하세요, 저는 이하늘입니다, 나이는 28살입니다.
person2.introduce();  // 안녕하세요, 저는 조하루입니다, 나이는 22살입니다.

생성자 함수와 클래스 모두 자바스크립트에서 객체를 생성하는 효율적인 방법이에요. 클래스는 생성자 함수에 비해 더 최신 문법이고, 상속 같은 객체지향 프로그래밍 기능을 사용하기 더 편리합니다. 그렇지만 상황에 따라 적절한 방법을 선택해서 사용하면 되요.

객체의 청사진을 만들어 놓고 사용하는 방법을 잘 이해하고 활용한다면, 코드를 더 깔끔하게 유지하고 재사용성을 높일 수 있을 거예요. 이제 여러분도 자바스크립트에서 객체를 효과적으로 생성해 보세요!





자바스크립트 클래스와 생성자 이해하기: 기초부터 실전까지

안녕하세요! 오늘은 자바스크립트에서 매우 중요한 개념인 클래스(class)와 생성자(constructor)에 대해 자세히 알아보려고 해요. 클래스는 객체 지향 프로그래밍(OOP)의 핵심이며, 자바스크립트에서도 이를 통해 효율적으로 객체를 생성하고 관리할 수 있답니다.

클래스(Class)란?

클래스는 객체를 생성하기 위한 템플릿 또는 청사진입니다. ES6부터 자바스크립트에 공식적으로 도입되었어요. 클래스를 사용하면 같은 종류의 객체를 반복적으로 쉽게 생성할 수 있습니다.

생성자(Constructor)란?

생성자는 클래스로부터 객체를 생성할 때 호출되는 특별한 메서드입니다. 객체의 초기 상태를 설정하는 데 사용되죠. 클래스 내에 constructor() 메서드를 정의해서 객체 생성 시 초기화할 값들을 설정할 수 있어요.

클래스와 생성자 사용 예시

간단한 사용자 클래스 만들기

class User {
  constructor(name, age) {
    this.name = name;  // 사용자 이름
    this.age = age;    // 사용자 나이
  }

  // 사용자 소개 메서드
  introduce() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

// User 클래스로부터 객체 생성
const user1 = new User('김철수', 20);
const user2 = new User('박영희', 25);

// 메서드 호출
user1.introduce();  // 안녕하세요, 제 이름은 김철수이고, 나이는 20살입니다.
user2.introduce();  // 안녕하세요, 제 이름은 박영희이고, 나이는 25살입니다.

이 예시에서 볼 수 있듯, 클래스와 생성자를 사용하면 코드의 재사용성을 높이고 관리하기 쉬워져요. 특히, 복잡한 애플리케이션을 개발할 때 클래스를 활용하면 객체들의 관계를 명확히 할 수 있고, 유지 보수도 편리해집니다.

클래스의 추가 기능

  • 상속: 클래스는 상속을 통해 다른 클래스의 속성과 메서드를 상속받을 수 있어요. extends 키워드를 사용합니다.
  • 정적 메서드: static 키워드를 사용해 클래스 자체에 메서드를 정의할 수 있습니다. 인스턴스 없이도 클래스 이름으로 직접 호출할 수 있죠.

자바스크립트에서 클래스와 생성자를 잘 이해하고 사용하는 것은 중요해요. 객체 지향 프로그래밍의 기본을 다지고, 코드를 더욱 체계적으로 관리할 수 있게 도와준답니다. 이제 여러분도 클래스를 활용해 보세요. 자바스크립트의 객체 지향 프로그래밍 세계로의 첫걸음을 내디딜 준비가 되었나요?





자바스크립트의 객체 & 배열 비구조화 할당: 코드를 더욱 깔끔하게!

안녕하세요! 오늘은 자바스크립트에서 코드를 더 깔끔하고 효율적으로 작성할 수 있는 객체와 배열의 비구조화 할당에 대해 알아볼 거예요. 비구조화 할당(destructuring assignment)은 객체나 배열로부터 속성이나 요소를 쉽게 추출할 수 있게 해주는 편리한 문법입니다.

객체 비구조화 할당

객체 비구조화는 객체의 속성을 변수로 쉽게 할당할 수 있게 해줘요. 이를 통해 코드를 더욱 간결하게 만들 수 있습니다.

예시: 사용자 정보 객체 비구조화

const user = {
  name: '김철수',
  age: 30,
  email: 'chulsoo@example.com'
};

// 객체 비구조화 할당
const { name, age, email } = user;

console.log(name);  // 김철수
console.log(age);   // 30
console.log(email); // chulsoo@example.com

배열 비구조화 할당

배열 비구조화는 배열의 요소를 변수로 쉽게 할당할 수 있게 해줍니다. 배열의 순서대로 변수에 할당됩니다.

예시: 색상 배열 비구조화

const colors = ['빨강', '녹색', '파랑'];

// 배열 비구조화 할당
const [red, green, blue] = colors;

console.log(red);   // 빨강
console.log(green); // 녹색
console.log(blue);  // 파랑

비구조화 할당의 추가 기능

  • 기본값 설정: 비구조화 할당 시 변수에 기본값을 설정할 수 있습니다. 할당된 값이 undefined일 때 기본값이 사용됩니다.
  • 새로운 변수 이름으로 할당: 객체의 속성을 다른 이름의 변수로 할당할 수 있습니다.
  • 나머지 요소(Rest) 수집: 배열 비구조화 할당에서 ... 연산자를 사용해 나머지 요소를 새로운 배열로 할당할 수 있습니다.

예시: 기본값 설정과 새로운 변수 이름으로 할당

const { name: userName = '박영희', age, hobby = '독서' } = user;
console.log(userName); // 김철수
console.log(hobby);    // 독서

const [first, second, ...others] = colors;
console.log(first);  // 빨강
console.log(others); // ['파랑']

자바스크립트에서 객체와 배열의 비구조화 할당을 사용하면, 데이터를 더욱 직관적이고 효율적으로 다룰 수 있어요. 코드의 가독성을 높이고 싶다면, 이 편리한 문법을 적극 활용해 보세요!

728x90