JAN's History

클래스는 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 특정 객체를 만들기 위한 "틀"이라고 생각하면 됩니다. 예를 들어, 같은 모양의 빵을 만들려면 빵틀이 필요하듯, 클래스는 객체를 만들기 위한 설계도와 같은 역할을 합니다. 자바스크립트에서도 이 클래스를 사용해 비슷한 특성을 가진 여러 객체를 쉽게 만들 수 있습니다. 여기서는 자바스크립트의 클래스 사용법과 그 구조를 예제와 함께 이해하기 쉽게 알아볼테니 천천히 따라와보세요 :)🙌🏼📍1. 클래스 정의하기자바스크립트에서 클래스를 정의하려면 class 키워드를 사용합니다. 아래 예제에서 우리는 Dog라는 클래스를 정의했습니다.class Dog { type; // 클래스의 프로퍼티 size; constructor(type, size) { ..

try-catch 문은 JavaScript에서 오류(에러)가 발생했을 때 프로그램이 멈추지 않고 이를 처리할 수 있게 해주는 구문인데요! 그래서 실무에서 코드를 작성할 때에는 다양한 에러를 미연에 방지하기 위해 try-catch문을 자주 사용하게 됩니다. 이 문법을 사용하면 오류를 사전에 감지하고 처리해, 사용자에게 적절한 메시지를 보여주거나 다른 작업을 수행할 수 있기 때문이죠 :)✨📍try-catch 문법 구조try-catch 문은 다음과 같은 기본 구조를 가집니다.try { // 오류가 발생할 가능성이 있는 코드} catch (error) { // 오류가 발생했을 때 실행되는 코드} try 블록: 이 블록 안에 실행하려는 코드를 넣습니다. 이 코드 중 오류가 발생하면 try 블록 안의 나머지 ..

자바스크립트에서 데이터를 다루다 보면 Copy by Value(값에 의한 복사)와 Copy by Reference(참조에 의한 복사)라는 개념이 등장합니다. 간단히 말해 이 둘은 데이터가 메모리에 저장되는 방식이 다른데요! 특히나 변수에 저장된 값을 복사하거나 변경할 때 이 개념이 중요한 역할을 하게 됩니다. 이제 두 개념이 무엇인지를 예제를 통해 자세하게 알아볼까요?🙌🏼🎯 1. Copy by Value(값에 의한 복사)먼저, Copy by Value는 말 그대로 값을 그대로 복사한다는 뜻이에요! 새로운 변수를 만들 때, 기존 변수가 가지고 있던 값을 단순히 복사해서 새로운 메모리 공간에 할당하는 것입니다. 자바스크립트에서 기본 데이터 타입(Primitive Types)인 string, number..

자바스크립트에서 객체(Object)는 여러 값(데이터)와 함수(메서드)를 하나로 묶어주는 매우 유용한 데이터 타입입니다! 객체는 키-값(key-value) 쌍의 집합으로 이루어지는데요. 각각의 키는 고유한 식별자 역할을 합니다. 여기서 객체는 무엇이고 어떻게 사용하는지 어떤 특징이 있는지 알아보도록 하겠습니다. 객체에 대해 알아보고 마지막에 객체(Object)가 어떻게 탄생하게 되었는지, 그리고 객체의 등장으로 무엇이 편리해졌는지도 함께 알아보도록 할게요👍📘 1. 객체(Object) 생성객체를 만드는 방법은 매우 간단합니다. 중괄호 {} 안에 키-값 쌍을 작성하면 됩니다.let Dog = { name: '말티즈', // 키: 'name', 값: '말티즈' color: 'white', // 키: '..

자바스크립트에서 함수를 선언하는 방법에는 여러 가지가 있어요. 또한 함수에서 파라미터를 처리하는 다양한 방법과 관련된 개념도 있습니다. 아마 개발을 시작하게 되면 가장 많이 선언하는 것이 변수 다음으로 함수일텐데 이 부분도 굉장히 중요한 부분이니 꼭 숙지하시길 바랍니다!1. 함수 선언식 (Function Declaration)형식: function 함수이름(매개변수) { 실행할 코드 }가장 전통적인 방법으로, 함수 이름을 사용하여 정의합니다.function greet(name) { console.log("Hello, " + name);}greet("Alice"); // "Hello, Alice"2. 함수 표현식 (Function Expression)형식: const 변수명 = function(매개변수)..

JavaScript에서 배열 메서드는 메모리 사용 방식에 따라 원본 데이터를 수정하거나 새로운 데이터를 반환할 수 있는데요. 이 차이를 이해하면 코드 작성 시 데이터 무결성을 유지할 수 있고, 특히 협업에서 복잡한 로직을 구현할 때 오류를 줄이는 데 도움이 됩니다! 이제 각 메서드가 메모리를 어떻게 사용하는지, 현업에서 어떤 메서드가 자주 사용되는지, 그 이유를 함께 정리해볼게요 :)📍배열 메서드와 메모리 관리메모리 사용의 차이: 기존 배열 수정 vs. 새로운 배열 반환기존 배열 수정: 메서드가 원본 배열을 직접 변경합니다. 데이터가 기존 메모리 공간에 그대로 덮어씌워지므로 추가 메모리 사용이 없습니다.새로운 배열 반환: 메서드가 새로운 배열을 생성하여 반환합니다. 이때 원본 배열은 수정되지 않고, 새..

자바스크립트에서는 다양한 데이터 타입들이 자동으로 형변환이 일어나는 경우가 빈번한데요. 물론 자동으로 형변환이 되도록 작성하는 코드는 좋지 못한 코드입니다.(다른 사람들이 이해하기 어려운 코드는 좋지 못한 코드이기 때문) 그러나 타입 변환에 대해 알고 있어야 예기치 못한 오류를 발생시키지 않을 수 있기 때문에 꼭 알아둬야하는 부분입니다! 특히나 자바스크립트는 다른 언어에 비해 굉장히 수용적인 아이(?)이기 때문에 타 언어에서는 허용되지 않는 부분이 자바스크립트에서는 허용이 되는 경우가 굉장히 많아서 이 참에 확실하게 알고 넘어가는 것이 좋습니다.1. 명시적 타입 변환 (Explicit Conversion)정의: 개발자가 의도적으로 직접 함수나 연산자를 사용해 변환하는 것. (함수나 메서드를 사용)방법: ..

for...in과 for...of는 JavaScript에서 반복문을 사용할 때 자주 사용되는 두 가지 방법이지만, 그 동작 방식이 다릅니다. 각 반복문의 차이점을 자세히 알아보도록 하겠습니다.1. for...in 반복문용도: 객체의 속성(key)들을 순회할 때 사용됩니다.반환 값: 객체의 key를 반환합니다.주요 특징:객체의 열거 가능한 모든 속성(상속된 속성 포함)을 반복합니다.배열에도 사용할 수 있지만, 인덱스(문자열로 변환된 키)를 반환하므로 배열보다 객체 순회에 적합합니다.(배열은 key가 아닌 인덱스가 반환되기때문)순서 보장은 되지 않으므로 인덱스 순회에는 적합하지 않습니다.const obj = { a: 1, b: 2, c: 3 };for (let key in obj) { console.log..