Will find a way

reduce란?reduce() 메서드는 배열의 요소를 하나로 줄이는 작업을 수행하는 함수다.reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다.reduce 형태array.reduce(callback[, initialValue]);array : reduce를 적용할 배열callback : 배열의 각 요소에 대해 실행할 콜백 함수. 콜백함수는 다음과 같은 매개변수를 가진다- accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값. 초기값이 제공된 경우 첫번째 순회에서는 initialValue로 설정 된다.- currentValue : 현재 순회 중인 배열의 요소- currentIndex (옵션) : 현재 순회 중인 배열의 요소 인덱스- ..

목차1. 동기와 비동기2. 자바스크립트의 비동기 처리3. promise 객체4. async 와 await 1. 동기와 비동기동기- 직렬적으로 작업을 수행한다.- 요청을 보낸 후 응답을 받야지만 다음 동작을 실행한다. 작업을 처리하는 동안 나머지 작업은 대기한다. 비동기- 병렬적으로 작업을 수행하는 방식이다.- 요청을 보낸 후 응답의 수락 여부와는 상관 없이 다음 업무가 동작하는 방식이다.- 비동기 처리를 위해 콜백 패턴을 사용하면 콜백함수가 중첩되어 복잡도가 높아질 단점이 있다. 이를 콜백지옥이라고 부른다. (가독성이 나빠질 수 있다.) 2. 자바스크립트의 비동기 처리Web API Web API는 브라우저에서 제공되는 API. 자바스크립트 엔진에서 정의되지 않았던 setTimeout이나HTTP 요청(aj..

목차 1. 구조 분해 할당 2. 배열 분해 3. 객체 분해 4. 나머지 패턴 1. 구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우를 위해서 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법 2. 배열 분해 // 배열 만들기 let arr = ["사과", "바나나", "포도"] // 구조분해 할당을 이용해 // apple엔 arr[0] // banana arr[1] // grape arr[2]을 할당 let [apple, banana, grape] = arr; console.log(apple); // 사과 console.log(banana); // 바나나 console.l..

목차1. 쿠키2. 세션 스토리지3. 로컬 스토리지 1. 쿠키 (Cookie)- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각(쿠키는 유효기간이 있으며 서버로 전송되는 작은 텍스트 파일 / 유효기간이 지나면 삭제됨)- key=value 형태로 저장되며, 클라이언트에서 생성되거나 서버에서 Set-Cookie 응답 헤더로 설정할 수 있음- 서버로부터 전송된 쿠키는 웹 브라우저에 저장되며, 이후 해당 웹 사이트를 방문할 때마다 해당 쿠키는 서버로 전송됩니다. 쿠키 사용 예시- 로그인 상태 유지 (세션 or 토큰 저장)- 사용자 선호 설정 저장 (다크모드, 언어 등)- 쇼핑몰 장바구니 등 임시 상태 저장 (* 핵심은 '사용자를 식별'할 수 있는 정보를 저장한다는 것) 주요 쿠키 속성속성설명HttpO..

DOM (Document Object Model) 브라우저가 웹 문서를 이해할 수 있도록 구성된 것 html 태그를 동적으로 제어한다 브라우저가 html 페이지를 로드하는 과정에서 태그들은 각기 하나의 객체로 만든다. html 문서의 내용을 노드트리 구조의 객체들로 나타낸다. 요소 선택 자바스크립트에서 DOM 요소를 조작하기 위해서 사용 document ( html 문서의 내용이 들어있다.) document.getElementById("header") // header 라는 아이디를 가지고 있는 요소를 찾아서 반환 document.createElement("span"); // span 태그 데이터를 생성 (HTML에는 나오지 않는다.) !! HTML에 내용을 추가하기위해서 append를 사용한다. !! ..

목차1. 객체2. 클래스 2 - 1 클래스 상속 (extends, super)  1. 객체 객체는 참조형 데이터 타입하나의 사물을 표현하는 여러 데이터를 다룰 때 사용 데이터 타입원시형 : string, number, boolean 등참조형 : object, array, function// 객체 문법// 리터럴 문법const user = {};console.log(user);// 생성자 문법// new 예약어const user = new Object();console.log(user);const computer = { name : "gram", model : 15, color : "white", sell : false, price : 165000};// 객체는 실제 존재하는 개..

목차1. 재귀 함수2. 스택과 큐 3. 자바스크립트 메모리    3 - 1 원시타입   3 - 2 참조 타입4. 배열 1. 재귀 함수재귀함수는 함수의 내용에서 다시 자신을 호출해서 반복 작업을 하는 방식입니다. for 문으로도 반복문을 구현 가능한 로직들은 재귀 함수로 작성이 가능합니다. 재귀 함수를 사용하는 이유는 반복하는 내용의 기능을 여러개로 나누고 직관적으로 관리할 때 사용하는 프로그래밍 패턴 중 하나입니다.재귀 함수를 작성할 때는 더이상 나눠야 할 필요가 없을 때 종료됩니다.문제를 나눠서 기능을 작성하는 경우는 이 두가지 패턴을 찾아서 활용해야합니다.  재귀함수로 반복문을 사용한 예function sum(n, result){ if (n === 5){ console.log(result..

목차1. 함수 선언2. 매개변수와 인자3. 함수의 매개변수와 스코프4. 함수와 return5. 콜백함수6. 함수 표현식    6 - 1 익명 함수    6 - 2 애로우 함수    6 - 3 즉시 실행 함수   함수 : 중복 코드를 줄이기 위해서 사용합니다. 1. 함수 선언function 함수이름 (매개변수){실행코드 내용}함수 호출함수 이름();  함수도 하나의 값이다.함수를 사용하기 전에 반드시 알아두시길 바랍니다. 함수 선언과 호출에 대해서 예시를 들어보겠습니다.function message(){ console.log("쥬스가 만들어졌어요.");}message();// 함수이름(); --> 함수이름에 괄호를 넣으면// 함수를 실행하겠다는 의미다. 출력값message라는 함수를 선언을 했고 밑에..

반복문 : 실행코드를 반복하는 문법 for문 for문 문법 for(선언식; 조건문; 연산식){ 반복될 코드 내용 } // 0 ~ 20 까지 숫자를 출력하는 반복문 for(let i = 0; i (연산식 -> 조건문 -> 스코프 코드 실행) -> (연산식 -> 조건문 -> 스코프 코드 실행) for 문을 이용한 구구단 let answer = 1; for(let i = 2; i = 3) < (i < 5)) con..

목차1. 스코프 (전역변수 / 지역변수)2. 조건문    2-1 if (if / else if / else)   2-2 switch  1. 자바스크립트 스코프전역 변수 : 전역에 선언한 변수지역 변수 : 해당 영역에서 선언하고 사용 될 변수// 전역변수 지역변수 예시let input1 = 1; // 전역변수 : 전역(모든 영역) 어디서든 접근이 가능한 변수{ // 지역 변수 : 지역에서 선언한 변수 // 블록 스코프 안에서 선언한 변수는 블록 스코프 안에만 있다가 // 동작이 끝나면 해제된다. let input1 = 0; // 이러한 경우에는 지역변수로 전역변수 재선언이 아니다. let input2 = 1;}console.log(input3); // 이러한 경우에 스코프가 달..