티스토리

joamashi

검색하기

블로그 홈

joamashi

joamashi.tistory.com/m

joamashi

구독자: 0

방명록 방문하기

주요 글 목록

[자바스크립트] 비동기 처리 순서 const response = fetch('https://jsonplaceholder.typicode.com/todos/1');// const data = response.json();console.log('0', response); const response2 = fetch('https://jsonplaceholder.typicode.com/todos/1');const data2 = response2;console.log('2', data2);fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }.. 공감수 1 댓글수 1 2025. 1. 20.
[자바스크립트] reduce() 자바스크립트의 reduce() 메서드는 배열의 모든 요소를 순회하며 값을 "누적(accumulate)"하여 단일 결과를 반환하는 고차 함수입니다. 기본적으로 배열을 줄여서 하나의 값으로 만든다는 개념으로 이해하면 됩니다. 이 값은 숫자, 배열, 객체 등 어떤 자료형이든 될 수 있습니다.기본 문법array.reduce(callback, initialValue)callback: 배열의 각 요소에 대해 실행할 함수.accumulator: 누적된 값.currentValue: 현재 처리 중인 배열 요소.currentIndex: (선택 사항) 현재 처리 중인 요소의 인덱스.array: (선택 사항) reduce가 호출된 배열 자체.initialValue: (선택 사항) 누적값(accumulator)의 초기값. 이 .. 공감수 1 댓글수 0 2025. 1. 9.
[자바스크립트] 큐(Queue) 큐(Queue)란 무엇인가?**큐(Queue)**는 선입선출(FIFO, First-In-First-Out) 방식으로 데이터를 처리하는 자료 구조입니다. 쉽게 말해, 먼저 들어온 데이터가 먼저 나가는 방식으로, 마치 줄을 서서 기다리는 것과 같습니다.선입(Enqueue): 큐의 뒷부분에 새로운 데이터를 추가하는 작업선출(Dequeue): 큐의 앞부분에서 데이터를 제거하는 작업자바스크립트에서 큐 구현하기자바스크립트에서는 배열을 이용하여 간단하게 큐를 구현할 수 있습니다. 배열의 push() 메서드를 사용하여 데이터를 큐의 뒷부분에 추가하고, shift() 메서드를 사용하여 데이터를 큐의 앞부분에서 제거합니다.class Queue { constructor() { this.items = []; } e.. 공감수 0 댓글수 0 2024. 8. 9.
[자바스크립트] Math 객체와 수학 연산 자바스크립트 Math 객체는 다양한 수학적인 상수와 함수를 제공하여 수학 연산을 쉽게 수행할 수 있도록 돕습니다.주요 수학 연산 종류삼각 함수sin(x): x의 사인 값을 반환합니다.cos(x): x의 코사인 값을 반환합니다.tan(x): x의 탄젠트 값을 반환합니다.asin(x): 사인 값이 x인 각도(라디안)를 반환합니다.acos(x): 코사인 값이 x인 각도(라디안)를 반환합니다.atan(x): 탄젠트 값이 x인 각도(라디안)를 반환합니다.산술 연산abs(x): x의 절댓값을 반환합니다.ceil(x): x보다 크거나 같은 가장 작은 정수를 반환합니다. (올림)floor(x): x보다 작거나 같은 가장 큰 정수를 반환합니다. (내림)round(x): x를 가장 가까운 정수로 반올림합니다.max(x, .. 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] 해체 할당 자바스크립트 해체 할당 심층 설명해체 할당이란?자바스크립트의 해체 할당(destructuring assignment)은 배열이나 객체의 요소 또는 프로퍼티를 개별 변수에 간편하게 할당하는 문법입니다. 기존의 방식보다 코드를 더욱 간결하고 가독성 있게 만들어줍니다.배열 해체 할당기본적인 사용:const [a, b, c] = [1, 2, 3];// a는 1, b는 2, c는 3이 됩니다.값 건너뛰기:const [a, , c] = [1, 2, 3];// a는 1, c는 3이 되고, 2는 무시됩니다.나머지 연산자 사용:const [a, b, ...rest] = [1, 2, 3, 4, 5];// a는 1, b는 2, rest는 [3, 4, 5]가 됩니다.변수의 기본값:const [a = 10, b] = [5];/.. 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] 객체 메서드 심층 분석 프로토타입(prototype) 프로퍼티정의: 모든 자바스크립트 객체는 __proto__라는 숨겨진 프로퍼티를 가지고 있으며, 이 프로퍼티는 해당 객체의 프로토타입을 가리킵니다. 프로토타입은 객체가 상속받는 속성과 메서드를 정의하는 역할을 합니다.상속: 객체는 자신의 프로토타입에 정의된 속성과 메서드를 상속받아 사용할 수 있습니다. 즉, 객체가 직접 가지고 있지 않은 속성이나 메서드에 접근하려고 하면 프로토타입 체인을 따라 상위 프로토타입에서 해당 속성이나 메서드를 찾습니다.프로토타입 체인: 객체, 객체의 프로토타입, 프로토타입의 프로토타입 등으로 이어지는 연결을 프로토타입 체인이라고 합니다.Object.is(value1, value2) 메서드정의: 두 값이 완전히 일치하는지 비교합니다. === 연산자와 .. 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] 문자열 메서드 심층 분석 codePointAt(index) 메서드특정 인덱스 위치의 문자의 코드 포인트를 반환합니다.**서로소 문자(supplementary character)**를 정확하게 처리할 수 있습니다. (예: 이모지)let str = "";let codePoint = str.codePointAt(0);console.log(codePoint); // 128512 (의 코드 포인트)String.fromCodePoint(number1, ..., number2) 메서드주어진 코드 포인트들을 문자열로 변환하여 반환합니다.여러 개의 코드 포인트를 한 번에 처리할 수 있습니다.let str = String.fromCodePoint(128512, 97, 98, 99);console.log(str); // "abc"repeat(cou.. 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] 숫자 자바스크립트에서 숫자는 64비트 부동소수점 형식으로 표현됩니다. 이는 매우 큰 수부터 작은 수, 그리고 소수점 아래의 값까지 다양하게 표현할 수 있지만, 정확도에 한계가 있을 수 있습니다.2진수, 8진수 표현2진수: 0b 또는 0B로 시작하는 숫자입니다. 예: 0b1010 (10진수 10)8진수: 0o 또는 0O로 시작하는 숫자입니다. 예: 0o12 (10진수 10)유용한 Number 메소드Number.isInteger(number)주어진 값이 정수인지 판별합니다.true: 정수일 때false: 정수가 아닐 때 (소수, NaN, Infinity 등)console.log(Number.isInteger(42)); // trueconsole.log(Number.isInteger(3.14)); // f.. 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] 배열 메서드 심층 분석 Array.from(iterable, mapFunc, this) 메서드설명: 유사 배열 객체나 반복 가능한 객체(iterable)를 새로운 배열로 변환합니다.매개변수:iterable: 배열처럼 요소를 순회할 수 있는 객체mapFunc(optional): 각 요소를 변환하는 함수 (선택적)thisArg(optional): mapFunc에서 사용할 this 값 (선택적)용도:유사 배열 객체(arguments, DOM NodeList 등)를 배열로 변환문자열을 문자 배열로 변환Set, Map 등 다른 자료구조를 배열로 변환각 요소를 변환하면서 새로운 배열 생성// 유사 배열 객체를 배열로 변환const arrayLike = { 0: 'a', 1: 'b', length: 2 };const arr = Array... 공감수 0 댓글수 0 2024. 8. 8.
[자바스크립트] Blob 객체 알아보기 Blob 객체 알아보기Blob 객체란 무엇인가요?Blob(Binary Large Object) 객체는 자바스크립트에서 바이너리 데이터를 나타내는 객체입니다. 이미지, PDF 파일, 음악 파일 등 다양한 종류의 파일을 메모리 상에서 표현할 때 사용됩니다. Blob 객체는 파일 시스템과는 독립적으로 존재하며, 네트워크를 통해 전송하거나, URL 객체를 생성하여 다운로드를 유도하는 등 다양한 용도로 활용됩니다.Blob 객체의 주요 특징바이너리 데이터 표현: 이미지 데이터, PDF 파일 등 다양한 형태의 바이너리 데이터를 담을 수 있습니다.파일 시스템 독립성: 실제 파일 시스템과 연동되지 않고 메모리 상에서 독립적으로 존재합니다.URL 생성: Blob 객체를 이용하여 URL을 생성하여 다운로드를 유도할 수 있습.. 공감수 0 댓글수 0 2024. 8. 7.
[자바스크립트] 비동기 처리 비동기 처리란?특정 작업이 완료될 때까지 기다리지 않고, 다른 작업을 먼저 수행하는 것을 의미합니다. 마치 밥을 짓는 동안 다른 집안일을 하는 것과 같습니다. 밥이 다 되면 알림을 받고 밥을 먹는 것처럼, 자바스크립트는 비동기 작업이 완료되면 알림을 받고 해당 작업을 처리합니다.비동기 처리 방법자바스크립트는 비동기 처리를 위해 다양한 방법을 제공합니다.콜백 함수: 가장 기본적인 방법으로, 비동기 작업이 완료될 때 호출될 함수를 미리 전달하는 방식입니다.Promise: 비동기 작업의 결과를 나타내는 객체입니다. 콜백 함수보다 더욱 명확하고 간결하게 비동기 코드를 작성할 수 있습니다.async/await: Promise를 사용하여 비동기 코드를 동기 코드처럼 작성할 수 있도록 해주는 문법입니다.각 방법의 특.. 공감수 0 댓글수 0 2024. 8. 4.
[자바스크립트] 동기 처리 자바스크립트 동기 처리는 코드가 순서대로 한 줄씩 실행되는 것을 의미합니다. 마치 레시피를 보며 요리를 하는 것처럼, 위에서부터 아래로 차례대로 명령을 수행합니다.왜 동기 처리가 중요할까요?예측 가능성: 코드의 흐름을 쉽게 파악할 수 있어 디버깅이 용이합니다.단순성: 복잡한 비동기 처리에 비해 코드를 작성하고 이해하기 쉽습니다.순차적인 작업: 데이터 처리 등 순서대로 진행되어야 하는 작업에 적합합니다.동기 처리의 예시console.log('첫 번째 메시지');let result = 2 + 3;console.log('결과:', result);console.log('마지막 메시지');위 코드는 다음과 같은 순서로 실행됩니다.'첫 번째 메시지' 출력2와 3을 더하여 결과를 result에 저장'결과: 5' 출력.. 공감수 0 댓글수 0 2024. 8. 4.
[자바스크립트] 함수 코드의 재사용과 효율성을 위한 핵심자바스크립트 함수는 특정 작업을 수행하는 코드 블록입니다. 마치 레시피와 같이, 함수는 주어진 입력값(재료)을 가지고 특정한 결과값(요리)을 만들어냅니다. 함수를 사용하면 코드를 모듈화하고 재사용성을 높여 효율적인 프로그래밍이 가능합니다.함수의 기본 구조function 함수이름(매개변수1, 매개변수2, ...) { // 함수 내부에서 실행될 코드 return 반환값; // (선택 사항)}함수이름: 함수를 식별하기 위한 고유한 이름입니다.매개변수: 함수에 전달되는 값을 받는 변수입니다. 여러 개의 매개변수를 쉼표로 구분하여 사용할 수 있습니다.함수 내부 코드: 함수가 수행할 실제 작업을 포함하는 코드 블록입니다.return: 함수의 실행 결과를 반환합니다. return.. 공감수 0 댓글수 0 2024. 8. 4.
[자바스크립트] 에러 핸들링 자바스크립트 코드를 실행하다 보면 예상치 못한 오류가 발생할 수 있습니다. 이러한 오류를 적절히 처리하지 않으면 웹 애플리케이션이 멈추거나 예상치 못한 동작을 할 수 있습니다. 따라서 자바스크립트 에러 핸들링은 안정적인 웹 애플리케이션 개발에 필수적인 부분입니다.왜 에러 핸들링이 중요할까요?사용자 경험 향상: 오류 발생 시 사용자에게 친절한 메시지를 보여주거나, 복구할 수 있는 방법을 제공하여 사용자 경험을 향상시킬 수 있습니다.애플리케이션 안정성: 오류 발생 시에도 애플리케이션이 계속해서 동작하도록 하여 안정성을 높일 수 있습니다.디버깅 용이: 오류 발생 시 정확한 오류 메시지와 위치를 파악하여 디버깅을 효율적으로 수행할 수 있습니다.자바스크립트 에러 핸들링 방법1. try...catch 문가장 일반적.. 공감수 1 댓글수 2 2024. 8. 4.
[자바스크립트] 이벤트 버블링, 캡처링, 위임 이벤트 버블링 (Event Bubbling): 이벤트가 발생한 요소에서부터 부모 요소로 순차적으로 전파되는 현상입니다. 마치 물수제비를 던졌을 때 물결이 퍼져나가는 것처럼, 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달됩니다.이벤트 캡처링 (Event Capturing): 이벤트 버블링과 반대로, 이벤트가 최상위 요소에서부터 자식 요소로 순차적으로 전파되는 현상입니다. 즉, 최상위 요소에서 이벤트를 먼저 처리하고, 점차 하위 요소로 내려가면서 처리합니다.이벤트 위임 (Event Delegation): 특정 요소에 이벤트 리스너를 등록하여, 그 요소의 자손 요소에서 발생하는 이벤트를 간접적으로 처리하는 기법입니다. 이벤트 버블링을 활용하여 구현됩니다.다양한 예시 및 속성 값1. 이벤트 버블링 예시.. 공감수 0 댓글수 0 2024. 8. 4.
[자바스크립트] 불변 데이터 패턴 불변 데이터 패턴이란, 한번 생성된 데이터는 절대 변경되지 않도록 하는 프로그래밍 패턴입니다. 즉, 데이터를 수정하고 싶을 때는 기존 데이터를 복사한 후 새로운 데이터를 생성하는 방식을 사용합니다.왜 불변 데이터 패턴을 사용해야 할까요?예측 가능성 향상: 데이터가 언제 어떻게 변경될지 예측하기 쉬워져 코드를 더 쉽게 이해하고 디버깅할 수 있습니다.오류 감소: 의도하지 않은 데이터 변경으로 인한 버그 발생 가능성을 줄여줍니다.함수형 프로그래밍과의 친화성: 함수형 프로그래밍에서는 불변 데이터가 필수적입니다.React 등의 프레임워크에서 효율적인 상태 관리: 불변 데이터를 사용하면 React에서 가상 DOM을 효율적으로 업데이트할 수 있습니다.불변 데이터 패턴을 구현하는 방법1. Object.freeze() .. 공감수 0 댓글수 0 2024. 8. 1.
[자바스크립트] 자주 사용하는 정규식 표현 모음 영문자 대소문자, 숫자로만 구성let regex = /^[a-zA-Z0-9]+$/;let str = "abc123";console.log(regex.test(str)); // true공백을 포함한 숫자와 대소문자로 구성let regex = /^[a-zA-Z0-9\s]+$/;let str = "Hello World";console.log(regex.test(str)); // true 한글, 대문자, 특수문자, 공백을 포함let regex = /^[가-힣a-zA-Z0-9\s~!@#$%^&*()_+|?:{}\[\];',./]+$/;let str = "안녕하세요! World 123";console.log(regex.test(str)); // true숫자 확인const regex = r"^-?\d+(\.\d+)?.. 공감수 0 댓글수 0 2024. 8. 1.
[자바스크립트] Debounce와 Throttle의 차이점 자바스크립트에서 자주 사용되는 Debounce와 Throttle은 이벤트 처리 방식을 조절하여 성능을 향상시키고 사용자 경험을 개선하는 데 사용되는 기법입니다. 둘 다 연속적으로 발생하는 이벤트를 제한하지만, 작동 방식에 차이가 있습니다.Debounce (디바운스)정의: 일정 시간 동안 이벤트가 발생하지 않으면 한 번만 함수를 실행합니다. 즉, 연속적인 이벤트를 무시하고 마지막 이벤트만 처리합니다.예시:검색창에 입력할 때마다 검색 요청을 보내는 대신, 사용자가 입력을 멈춘 후 일정 시간이 지나서 한 번만 검색 요청을 보냅니다.창 크기를 조정할 때마다 레이아웃을 다시 계산하는 대신, 사용자가 창 크기를 조정을 멈춘 후에 한 번만 레이아웃을 다시 계산합니다.장점:불필요한 이벤트 처리를 줄여 성능을 향상시킵니.. 공감수 0 댓글수 0 2024. 8. 1.
[자바스크립트] 네이밍 규칙 get/set 활용 변수명 예시getter와 setter는 자바스크립트 객체의 프로퍼티에 대한 접근을 제어하고, 데이터 처리 과정에서 다양한 로직을 추가할 수 있는 강력한 기능입니다. 이러한 getter와 setter를 효과적으로 활용하기 위해서는 명확하고 일관된 네이밍 규칙을 따르는 것이 중요합니다.get/set 네이밍 규칙 예시gettergetName(), getAge(), getIsAdmin()해당 프로퍼티의 값을 가져올 때 사용하는 메서드입니다. 일반적으로 'get' 뒤에 명사를 붙여 사용합니다.settersetName(newName), setAge(newAge), setIsAdmin(newState)해당 프로퍼티의 값을 설정할 때 사용하는 메서드입니다. 일반적으로 'set' 뒤에 명사를 붙여 사.. 공감수 0 댓글수 0 2024. 8. 1.
[자바스크립트] 클로저(Closure) 이해하기 클로저는 마치 함수를 특별한 상자에 담아 놓은 것 같다고 생각하면 됩니다. 상자 안에는 함수뿐만 아니라, 함수가 생성되었을 때의 변수값까지 함께 담겨 있습니다. 덕분에 상자 안에 담긴 함수는 언제 어디서 호출되더라도 생성 당시의 변수값을 사용할 수 있는 특별한 능력을 가지게 됩니다.좀 더 자세히 설명하자면, 클로저는 다음과 같은 특징을 가지고 있습니다.함수와 렉시컬 환경의 조합: 클로저는 단순한 함수가 아닌, 함수가 선언되었을 때의 변수값까지 포함하고 있습니다. 이 변수값들을 렉시컬 환경이라고 합니다.외부 변수에 대한 접근: 클로저 안의 함수는 외부 함수의 렉시컬 환경에 있는 변수에 접근할 수 있습니다. 쉽게 말해, 상자 안에 담긴 함수는 상자 밖에 있는 변수들을 사용할 수 있다는 뜻입니다.지속적인 유지.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] 자바스크립트 객체 합치는 다양한 방법 자바스크립트에서 객체를 합치는 방법은 다양합니다. 각 방법마다 장단점이 있으므로, 상황에 맞게 적절한 방법을 선택하는 것이 중요합니다.1. Object.assign()기본적인 객체 병합: 기존 객체를 변경하면서 새로운 객체의 프로퍼티를 추가합니다.얕은 복사: 중첩된 객체는 참조만 복사되므로 주의해야 합니다.사용법:const obj1 = { a: 1, b: 2 };const obj2 = { c: 3, d: 4 };const mergedObj = Object.assign({}, obj1, obj2);console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 } 2. Spread 연산자 (...)객체 리터럴에서 사용: 새로운 객체를 생성하면서 기존 객체의 프로퍼티를 펼쳐 넣습.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] Yup 사용하기 Yup은 자바스크립트에서 데이터 유효성 검사를 간편하고 효율적으로 수행할 수 있도록 도와주는 라이브러리입니다. 특히, 폼 데이터의 유효성을 검증하는 데 많이 사용됩니다.왜 Yup을 사용해야 할까요?간결한 코드: 복잡한 유효성 검사 로직을 직접 작성하는 대신, Yup의 제공하는 다양한 검사 규칙을 조합하여 간결하게 표현할 수 있습니다.재사용 가능한 스키마: 한 번 정의한 스키마를 여러 곳에서 재사용할 수 있어 코드 중복을 줄이고 유지보수를 용이하게 합니다.타입스크립트와의 호환성: 타입스크립트와의 통합이 잘 되어 있어 강력한 타입 안전성을 제공합니다.다양한 검사 규칙: 문자열 길이 제한, 숫자 범위, 필수 입력 여부 등 다양한 유형의 검사 규칙을 제공합니다.커스텀 검사 규칙: 기본 제공되는 규칙 외에도 사용.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] 커링(currying) 커링은 다수의 인자를 받는 함수를 단일 인자를 받는 함수들로 변환하는 기법입니다. 쉽게 말해, 하나의 함수를 여러 개의 함수로 쪼개서 사용하는 것이라고 생각하면 됩니다. 이렇게 쪼개진 각각의 함수는 이전 함수의 결과를 기억하고 다음 인자를 기다리는 형태로 작동합니다.왜 커링을 사용할까요?함수의 재사용성 증가: 부분적으로 적용된 함수를 만들어 다양한 상황에 활용할 수 있습니다.코드 가독성 향상: 복잡한 함수를 작은 단위의 함수로 나누어 코드를 더 명확하게 만들 수 있습니다.함수형 프로그래밍 패러다임: 함수를 데이터처럼 다루는 함수형 프로그래밍에서 중요한 개념입니다.파이프라인 구축: 함수를 연결하여 데이터 처리 과정을 표현하기 좋습니다.예시를 통해 알아보기// 일반적인 함수function sum(a, b, .. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] Rest 연산자 (Rest Operator) Rest 연산자는 스프레드 연산자와 마찬가지로 ... 세 개의 점을 사용하지만, 그 역할은 정반대입니다. 스프레드 연산자가 배열이나 객체를 펼쳐서 개별 요소로 만드는 반면, Rest 연산자는 여러 개의 인수를 하나의 배열로 모읍니다. 즉, 나머지 인수들을 모아서 배열로 만들어주는 역할을 합니다.function 함수명(...변수명) { // 변수명은 배열 형태로 전달된 나머지 인수들을 담게 됩니다.}Rest 연산자 사용 예시1. 가변 인자 함수function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0);}const result = sum(1, 2, 3, 4, 5); // 15함수에 전달되는 인자의 개수가 정해지지 않을 .. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] Spread 연산자 (Spread Operator) 스프레드 연산자는 배열이나 객체를 개별 요소로 펼쳐서 새로운 배열이나 객체를 생성하거나, 함수의 인수로 전달하는 데 사용되는 연산자입니다. 쉽게 말해, 하나의 집합을 개별 구성 요소로 흩뿌리는 역할을 합니다....iterableiterable: 배열, 문자열, arguments 객체 등 반복 가능한 객체스프레드 연산자 사용 예시1. 배열 결합const array1 = [1, 2, 3];const array2 = [4, 5, 6];const combinedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]두 개의 배열을 하나의 새로운 배열로 합칠 때 사용합니다.2. 배열 복사const originalArray = [1, 2, 3];const copiedArray.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] 연산자 (Operators) 산술 연산자 (Arithmetic Operators)let a = 5;let b = 2;a + b; // 덧셈: 5 + 2 = 7a - b; // 뺄셈: 5 - 2 = 3a * b; // 곱셈: 5 * 2 = 10a / b; // 나눗셈: 5 / 2 = 2.5a % b; // 나머지: 5를 2로 나눈 나머지 1a ** b; // 제곱: 5의 2승, 즉 5 * 5 = 25'1' + 1; // '11''11' - 2; // 9'11' * 2; // 22'11' / 2; // 5.5'11' % 2; // 1'11' > 10; // true 할당 연산자 (Assignment Operators)let x = 10;// x에 5를 더하고, 결과를 다시 x에 할당x += 5; // x는 이제 15가 됩니다.// x에.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] 자바스크립트 6가지 false 값 자세히 알아보기 자바스크립트에서 조건문이나 논리 연산에서 거짓(false)으로 평가되는 값들을 falsy 값이라고 합니다. 이러한 falsy 값들을 정확히 이해하는 것은 자바스크립트를 효과적으로 사용하기 위해 매우 중요합니다.6가지 falsy 값false:논리형 값 false 자체는 당연히 falsy 값입니다.null:객체를 참조하지 않는 값으로, 아무것도 없는 상태를 나타냅니다.undefined:아직 값이 할당되지 않은 변수나 존재하지 않는 객체의 프로퍼티를 참조할 때 나타나는 값입니다.0:숫자 0은 falsy 값입니다.NaN:Not a Number의 약자로, 숫자가 아닌 값을 나타냅니다. 예를 들어, 숫자가 아닌 문자열을 숫자로 변환하려고 할 때 발생합니다."" (빈 문자열):아무런 문자가 없는 빈 문자열도 fals.. 공감수 0 댓글수 0 2024. 7. 30.
[자바스크립트] 자바스크립트 데이터 타입 이해하기 자바스크립트에서 데이터 타입은 변수가 저장할 수 있는 값의 종류를 정의합니다. 데이터 타입을 이해하는 것은 변수를 효과적으로 사용하고 코드 오류를 방지하는 데 중요합니다.자바스크립트에는 크게 두 가지 종류의 데이터 타입이 있습니다.1. 기본형 (Primitive Type) / 원시 타입기본형은 자바스크립트에서 가장 단순한 데이터 타입이며, 값 자체를 직접 저장합니다. 기본형은 다음과 같습니다.Number: 정수와 실수를 모두 포함하는 숫자 데이터입니다.예시: 10, 3.14, -200String: 텍스트 데이터를 나타냅니다. 큰따옴표(") 또는 작은따옴표(')로 둘러싸인 문자의 시퀀스입니다.예시: "Hello, world!", '안녕하세요', This is a string literal.Boolean: .. 공감수 1 댓글수 0 2024. 7. 29.
[자바스크립트] 자바스크립트 불변성 이해하기 자바스크립트 불변성은 객체가 생성된 후 상태를 변경할 수 없는 것을 의미합니다. 즉, 객체의 프로퍼티 값을 변경하거나 삭제할 수 없다는 것입니다. 반면, 가변 객체는 생성 후에도 값을 변경하거나 삭제할 수 있습니다.불변성은 단순히 값 재할당과는 다릅니다. 값 재할당은 변수에 다른 값을 할당하는 것을 의미하는데, 이는 기존 객체의 상태를 변경하지 않습니다. 반면, 객체의 프로퍼티 값을 변경하면 객체 자체의 상태가 변하게 됩니다.불변성의 장점불변성을 사용하는 것은 다음과 같은 여러 장점을 제공합니다.예측 가능한 코드: 불변 객체는 생성된 후 상태가 변경되지 않기 때문에 코드의 동작을 예측하기 쉽습니다. 이는 버그를 줄이고 코드를 이해하고 유지 관리하는 것을 용이하게 합니다.스레드 안전: 불변 객체는 여러 스.. 공감수 0 댓글수 0 2024. 7. 29.
[자바스크립트] 자바스크립트 객체 타입 메모리 관리 자바스크립트 객체는 메모리에서 **힙(heap)**이라는 영역에 저장됩니다. 힙은 객체와 그 속성, 메서드를 위한 메모리 공간을 제공합니다. 객체는 메모리에 직접 저장되는 것이 아니라 참조를 통해 관리됩니다.1. 객체 생성 및 메모리 할당객체는 new 키워드를 사용하여 생성됩니다.객체 생성 시 힙에 객체 데이터를 위한 메모리 공간이 할당됩니다.객체의 속성과 메서드는 객체 데이터의 일부로 저장됩니다.예: let person = new Object(); 라고 하면 힙에 person 객체가 생성되고, 객체 데이터를 위한 메모리 공간이 할당됩니다.2. 객체 참조객체 참조는 객체 데이터를 가리키는 메모리 주소입니다.변수에 객체를 할당하면 변수는 해당 객체의 참조를 저장합니다.여러 변수가 동일한 객체를 참조할 수 .. 공감수 1 댓글수 0 2024. 7. 29.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.