Front/JavaScript

Front/JavaScript

[JavaScript] array (2) - map

0. map 이란: 기존 배열을 변형(각 요소를 가공)해서 새로운 배열을 반환한다.: 기존 배열은 변경되지 않는다. (불변성 유지): 콜백 함수를 인자로 받고, 원본 배열의 각 요소를 순회하면서 변형된 값을 새 배열에 저장한다.- 숫자 변환, 데이터 매핑 등, 배열의 각 요소를 변형해야 하는 경우 유용하다. ※ reduce() 는 배열을 순회하며 하나의 최종 값을 반환할 때 쓰인다. (합계, 평균, 객체 변환 등)※ forEach() 는 배열을 단순히 순회하고 작업을 수행할 뿐, 반환값은 없다. const newArray = oldArray.map((element, index, array) => { return 변환된_값;});element - 현재 배열 요소index - 현재 요소의 인덱스 (선택사항..

Front/JavaScript

[JavaScript] ES10 - flat/flatMap, Object.fromEntries, trimStart/trimEnd

1. flat / flatMapArray.prototype.flat(n): 중첩된 배열을 펼쳐서 1차원 배열로 만든다. - n이 빈값이면 기본적으로 1단계만 펼침- n단계까지 펼치고,- 특정 숫자를 지정하기 어려울 때 Intinity 를 넣으면 배열의 depth 와 관계없이 1차원 배열로 만든다.const array = [[1],[2],[3],[[[4]]],[[[5]]]]console.log(array.flat(2)) // [1,2,3,[4],[5]]const trapped = [[[[[[[[[[[[[[[[[[[[[[[[[[3]]]]]]]]]]]]]]]]]]]]]]]]]];console.log(trapped.flat(Infinity)) // [3] Array.prototype.flatMap(): map..

Front/JavaScript

[JavaScript] 반복문 -- for-of / for-in (Iterating vs. Enumerating)

const basket = ['apples', 'oranges', 'grapes']// forfor ( let i = 0; i { console.log(item);}// whilelet i = 0;while (i   자바스크립트에는 크게 기본 반복문(Traditional Loops)와 고급 반복문 (Modern Loops) 이 있다.기본 반복문은 인덱스 기반으로 배열이나 숫자 범위를 반복할 때 사용되며,for 문, while 문, do...while문 이 있다.고급 반복문은 기본 반복문보다 더 직관적이고 선언적인 방식으로 사용되며,forEach, for...of, for...in 이 있다. 그 중에서 가장 헷갈리는 for...of 와 for...in 에 대해 이해하는 시간을 가져보자.  1. for....

Front/JavaScript

[JavaScript] array (1) - reduce

0. reduce 란?array.reduce((accumulator, currentValue) => { // 콜백 함수 내용}, initialValue); reduce() 는 배열의 모든 요소를 하나로 축소하는 데 사용하는 메서드이다.배열을 합치거나, 필터링하거나, 특정 조건을 만족하는 값을 찾을 때 유용하다. accumulator (누적값): 배열의 요소들을 하나씩 처리하면서 누적되는 값. 처음에는 initialValue로 시작해.currentValue (현재값): 배열에서 순차적으로 처리되는 각 요소.initialValue(초기값): 누적값이 시작하는 초기값 (옵션, 생략 가능).결과값: 배열을 모두 처리한 후 최종적으로 하나의 값이 반환됨. 첫번째 요소부터 마지막 요소까지 차례대로 순회하며 acc..

Front/JavaScript

[JavaScript] ES8 (1) - Object.values, Object.entries, padStart, padEnd

ES8 문법을 소개하기 앞서,ES7 문법도 간략하게 짚고 넘어가기. ES7.includes()const dragons = ['Tim', 'Johnathan', 'Sandy', 'Sarah'];dragons.includes('John') // falsedragons.filter(name => name.includes('John')) // ['Johnathan'] 거듭제곱 연산자 (Exponential Operator)const square1 = (x) => Math.pow(x, 2); // ES6const square2 = (x) => x ** 2; // ES7square2(2); // 4  ES8.padStart() & .padEnd()String 의 앞/뒤에 ()자릿수만큼 공백 넣기const start..

Front/JavaScript

[JavaScript] Pass By Value vs Pass By Reference (얕은복사, 깊은복사)

자바스크립트에서 변수를 함수에 전달할 때 두가지 방식이 있다.1. Pass By Value (값에 의한 전달)2. Pass By Reference (참조에 의한 전달) 1. Pass By Value: 원시 타입 (Primitive Types) 을 함수에 전달할 때 값이 복사됨.: 적용 타입 - Number, String, Boolean, Null, Undefined, Symbol, BigInt: 원시 타입은 값 자체를 복사해서 전달하기 떄문에 원본 데이터에 영향을 주지 않음! var a = 5;var b = a;b++;console.log(a); // 5console.log(b); // 6   2. Pass By Reference: 객체 타입 (Object) 을 함수에 전달할 때, 참조 (Referenc..

Front/JavaScript

[JavaScript] 인스턴스화 (Instantation)

class Player { constructor(name, type) { console.log(this); // Wizard{} this.name = name; this.type = type; } introduce() { console.log(`Hi I am ${this.name}, I'm a ${this.type}`); }}class Wizard extends Player { constructor(name, type) { super(name, type); // Player 의 constructor 실행 console.log('wizard', this); // Wizard {name:"Shelly", type:"Healer"} ..

Front/JavaScript

[JavaScript] 클로저, 커링, 함수 조합

1. 함수형 프로그래밍함수형 프로그래밍(Function Programming)은 작은 문제를 해결할 수 있는 순수 함수(Pure Function)들을 조합하여 재사용성과 유지보수성을 높이는 프로그래밍 패러다임이다.순수 함수의 대표적인 특징은 다음과 같다.1. Deterministic: 동일한 입력이 주어지면 항상 동일한 결과를 반환한다.2. No Side Effects: 프로그램의 실행 과정에서 전역 변수, 데이터베이스, 파일 시스템, UI, 네트워크 요청 등의 외부 상태를 변경하거나 의존하지 않아야 한다./* Side Effects가 있는 함수 (Impure Function) */let total = 0;function addToTotal(value) { total += value; // 외부 변..