[JS] Map과 Set
·
Front-end/Javascript
Map과 Set이 등장한 이유Javascript에서 객체와 배열을 이용해서 다양하고 복잡한 프로그램을 만들 수 있다.그럼에도 불구하고 현실세계의 여러가지 문제를 해결하기에는 부족하기 때문에 Map과 Set이 등장하였다.  Mapkey-value 쌍으로 데이터를 저장하는 자료 구조1. key의 데이터 타입에 제한이 없다.문자열 뿐만 아니라 숫자, 객체, 심볼 등 모든 데이터 타입을 사용할 수 있다.객체와의 차이점이 여기서 드러난다. 2. key의 삽입 순서를 기억한다. 3. 순서는 유지 되지 않는다. Map 기능📌 new Map()Map 생성하기const myMap = new Map(); 📌 map이름.set(key,value)key와 value 저장하기myMap.set("one", 1);myMap.s..
[JS] 얕은 복사와 깊은 복사에 대해서 알아보자
·
Front-end/Javascript
Javascript에서 값을 복사하는 방법에는 2가지가 존재한다.얕은 복사와 깊은 복사이다. 얕은 복사와 깊은 복사가 무엇인지 알아보기 전에먼저, 원시값과 참조값이 무엇인지 알아보자 원시값, 참조값원시값(Primitive Value)변수에 직접 값이 저장되는 데이터 타입원시값에는 Number, String, Boolean, null, undefined, symbol 등이 있다.원시값은 변수에 직접 갑을 저장하기 때문에 불변하다. let num1 = 1;let num2 = num1;num2 = 10;코드를 보면서 '변수에 직접 값이 저장된다'와 '불변'의 의미를 살펴보자.num1의 값으로 1을 할당하였다.num2의 값으로 num1을 복사한 뒤에, 20을 재할당하였다. 이때 num1과 num2를 콘솔에 출력..
[JS] reduce는 무엇일까
·
Front-end/Javascript
reduce는 도대체 무엇인가array.reduce(callbackFun, initialValue)reduce 메서드가 그냥 배열의 합을 구할 때만 쓰이는 줄 알았다.알고리즘 문제를 풀다가 reduce의 활용 방법을 찾아봤는데, 배열의 합 뿐만 아니라 다양한 용도로 사용된다는 것을 알게 됐다.reduce는 정확히 무엇인지, 언제 사용할 수 있는지 정리해보려고 한다. reduce는 무엇일까?reduce는 인자로 콜백 함수를 받는다.이때 콜백 함수의 이름은 reducer 함수이다. reducer 함수는 인자로 accumulator와 currentValue를 받는다.reducer 함수 뒤에 초기값도 설정할 수 있다.초기값을 설정하지 않으면, 첫번째 요소를 스킵하고 두번째 요소부터 실행된다.첫번째 요소는 acc..
[JS] Object.assign 메서드에 대해 알아보자
·
Front-end/Javascript
Object.assign객체를 복사하거나 객체를 병합할 때 사용하는 메서드 Object.assign(target, ...sources)target: 속성을 복사할 목표 객체sources: 복사할 소스 객체 (1개 이상 가능) Object.assign을 사용하면 객체의 얕은 복사가 가능하다. 객체 병합하기const target = { a: 1, b: 2 };const source1 = { b: 4, c: 5 };const source2 = { d: 6 };const result = Object.assign(target, source1, source2);console.log(result); // 출력: { a: 1, b: 4, c: 5, d: 6 }해당 코드를 작성하면, target의 값도 변하게 된다. 객..
[JS] 단축 평가(Short Circuit Evaluation)
·
Front-end/Javascript
단축 평가논리 연산자를 사용하여 조건문을 처리할 때, 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식 논리합 연산자( || )좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가한다.좌변이 truthy값일 경우, 그 값이 바로 결과값으로 반환된다. // 유저 정보가 제공되지 않았을 때 기본 이름 제공function getUsername(user) { return user.name || '신원미상';}console.log(getUsername({ name: '리버' })); // 출력: 리버console.log(getUsername({})); // 출력: 신원미상  논리곱 연산자(&&)좌변의 피연산자가 trut..
[JS] 구조 분해 할당(Destructuring)
·
Front-end/Javascript
구조 분해 할당배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식  객체 분해 const item = { name: "Americano", price: 4500,}const { name, price } = item;console.log(name); // 출력: Americanoconsole.log(price); // 출력: 4500객체의 key에 따라 변수를 할당한다.name과 price의 순서가 바뀌어도 상관없다. function confirmReservation(user) { const {name, roomType, date: firstDate} = userInfo; return `${name} 고객님의 ${roomTyp..