전체 글 32

파괴적 처리와 비파괴적 처리(destructive and non-destructive)

알고리즘 문제 풀이 중 원본 배열의 요소를 수정이나 삭제하기 위해서 자바스크립트 Built-in 메서드를 활용하던 중 유사 기능을 하는 splice와 slice를 알게 되었고, 뭔 차이(이름에 p가 있고 없고...)가 있길래 따로 구분되어 있는 건지 알아보았고, 자료의 파괴적 처리(Destructive)와 비파괴적 처리(Non-destructive)라는 내용을 학습하게 되어 정리 해 보았다. 파괴적 처리(Destructive)와 비파괴적 처리(Non-destructive) 자바스크립트는 자료 처리를 위해서 다양한 연산자, 함수, 메소드를 제공하는데 자료 처리 연산자, 함수, 메서드는 크게 파괴적 처리와 비파괴적 처리로 구분할 수 있다. 처리 후 원본 데이터의 상태 변화에 따라 아래와 같은 Depth로 정..

Javascript 2023.11.22

배열과 객체 구조 분해 할당(destructuring assignment)

배열과 객체 구조 분해 할당 구조 분해 할당은 JavaScript의 표현식으로, 배열과 객체의 요소 및 프로퍼티를 분해하여 그 값을 개별 변수에 할당하는 기능이다. 이를 통해 배열과 객체 내부의 값을 간편하게 추출할 수 있다. 배열의 구조 분해 할당 기본 변수 할당 아래 코드는 각 변수에 해당 값을 할당하고 출력하는 간단한 일반적인 방법이다. let colors = ["red", "green", "blue"]; let color1 = colors[0]; let color2 = colors[1]; let color3 = colors[2]; console.log(color1); // "red" console.log(color2); // "green" console.log(color3); // "blue" 구..

Javascript 2023.11.21

배열과 문자열에서 중복값 제거할 수 있는 방법들

JavaScript에서 배열과 문자열에서 중복값을 제거하는 여러 가지 방법이 있는데, 아래는 알고리즘 풀이를 하면서 알게된 내용을 정리해보았다. 배열에서 중복값 제거하기 1. Set 사용 const array = [1, 2, 3, 4, 3, 2, 1]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); 2. filter 및 indexOf 사용 const array = [1, 2, 3, 4, 3, 2, 1]; const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index); console.log(uniqueArray); 3. reduce 사용 c..

Javascript 2023.11.20

동기(Synchronous)와 비동기(Asynchronous)

자바스크립트는 동기적(Synchronous) 및 비동기적(Asynchronous) 처리를 지원하는 언어로, 이러한 처리 방식을 이해하고 활용하는 것은 프로그래밍에서 중요한 역할을 한다. 동기 처리 동기 처리란 하나의 작업이 실행되는 동안 다른 작업을 동시에 수행하지 않는 방식을 의미한다. 다시 말해, 하나의 작업이 종료될 때까지 다른 작업을 실행하지 못하며, 작업은 순차적으로 진행된다. console.log(1); console.log(2); console.log(3); // 이 코드는 작성된 순서대로 실행되기 때문에 실행 결과는 1, 2, 3이 순차적으로 출력된다. 동기 처리와 스레드 프로그램에서 작업들을 처리하는 주체를 "스레드"라고 부르며, 동기적으로 처리할 때 하나의 스레드가 하나의 작업을 처리한..

Javascript 2023.11.20

spread 연산자(...)와 rest 파라미터(...)는 같은 것일까?

이터러블(iterable)이란, 자바스크립트에서 반복 가능한 객체를 말한다. 이는 다수의 원소(element)를 가지며, 이들을 하나씩 순회(iterate)할 수 있는 객체를 의미한다. 예를 들어, 배열, 문자열, Map, Set 등이 iterable한 객체이다. spread 연산자와 rest 파라미터는 모두 ... 기호를 사용하지만, 기능과 사용 방법이 다르다. spread 연산자는 iterable한(iterable) 객체를 펼쳐서(iterate) 개별 요소로 분리하는 역할을 한다. 이를테면 배열에서 원소들을 개별적인 값으로 분리하거나, 객체에서 프로퍼티들을 개별적인 값으로 추출할 수 있다. 또한 spread 연산자는 함수 호출에서도 사용될 수 있으며, 배열을 함수 인자로 전달할 때 사용된다. cons..

Javascript 2023.11.19

배열의 내장함수 정리 - 2

const compare = (a, b) => { //오름차순 return a - b; }; let numbers = [1, 100, 25, 50, 120, 3]; numbers.sort(compare); console.log(numbers); // [1, 3, 25, 50, 100, 120] const compare = (a, b) => { //내림차순 return b - a; }; let numbers = [1, 100, 25, 50, 120, 3]; numbers.sort(compare); console.log(numbers); // [120, 100, 50, 25, 3, 1] forEach Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다. 구문..

Javascript 2023.11.18

배열의 내장함수 정리 - 1

at 정숫값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있으며, 음의 정수는 배열의 마지막 항목부터 거슬러 센다. 구문: at(index) // 몇 가지 요소가 있는 배열 const cart = ["사과", "바나나", "배"]; // 주어진 배열의 마지막 요소를 반환하는 함수 function returnLast(arr) { return arr.at(-1); } // 'cart' 배열에서 마지막 요소를 가져옴 const item1 = returnLast(cart); console.log(item1); // '배' // 'cart'배열에 요소를 추가 cart.push("오렌지"); const item2 = returnLast(cart); console.log(item2); // ..

Javascript 2023.11.17

데이터 복사(copy)에도 깊이가 있다?

이 내용은 자바스크립트 객체를 공부하던 중 아래 내용으로 부터 시작되었다. 객체는 메모리를 효율적으로 사용하기 위해, 그리고 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어 있다. 메모리 사용의 효율성과 성능을 위해 어느 정도의 구조적인 단점을 감안한 설계라고 할 수 있는데, 이러한 구조적 단점에 따른 부작용이 있다. 그것은 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다. 알다시피, 자바스크립트의 자료형은 큰 범주로 "원시(Primitive)타입과 참조(Reference)타입이 있는데, 이 둘의 가장 큰 차이점 중 하나는 바로 원시타입은 할당된 값 그대로 저장되는 반면, 참조타입은 할당된 값이 아닌 해당 값이 저장되어 있는..

Javascript 2023.11.16

자바스크립트 배열의 진실(밀집배열, 희소배열)

일반적으로 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조를 말한다. 사실 자바스크립트에서 배열은 객체이다. 하지만 일반적인 객체와는 달리, 자바스크립트 배열은 순서가 있는 요소들의 집합으로 간주되어 인덱스를 사용하여 각 요소에 접근할 수 있다. 1. 배열의 정의: 배열은 일반적으로 대괄호 `[]`를 사용하여 정의된다. let myArray = [1, 2, 3, 4, 5]; 2. 밀집 배열 (Dense Array): 밀집 배열은 연속적인 정수형 인덱스를 갖는 배열이다. 즉, 배열의 요소 간에 인덱스가 빠짐없이 연속되어 있다. let denseArray = [10, 20, 30, 40, 50]; console.log(denseArray[2]); // 30 3. 희소 배열 (Spar..

Javascript 2023.11.15

What is 'This'?

자바스크립트에서 'this'란 어떤 문맥에서 사용하냐에 따라 그 의미가 달라지는 키워드라고 하며, MDN에서는 아래와 같이 'this' 키워드를 설명하고 있다. this A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode. In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during exec..

Javascript 2023.11.15