둥이의 개발여행

고차 함수(Higher-Order Function)고차함수는 다른 함수를 인자로 받거나, 함수를 반환하는 함수입니다.  고차 함수의 장점재사용성 : 코드를 더 간결하게 재사용 가능하게 만들어 줍니다.가독성 : 코드의 의도를 명확하게 전달할 수 있습니다.추상화 : 세부 구현을 감추고, 동작을 추상화할 수 있습니다. Array.prototype.map()용도 : 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성.반환값 : 주어진 반환한 값들로 이루어진 새로운 배열을 반환.원본 배열의 변경 : 원본 배열은 변경되지 않음.const numArray = [1, 2, 3, 4, 5];// map : 배열의 각 요소에 주어진 함수를 호출하고 결과를 모아 새로운 배열을 반환const num..

유사배열과 배열은 JavaScript에서 데이터를 저장하고 처리하는데 사용되는 두 가지 주요 데이터 구조입니다. 이 둘은 유사한 점도 있지만, 중요한 차이점도 있습니다. 배열 (Array)배열은 JavaScript에서 가장 많이 사용되는 데이터 구조 중 하나로, 여러 요소를 순차적으로 저장할 수 있습니다. 인덱싱 : 배열의 요소는 0부터 시작하는 인덱스를 가집니다.길이 : 배열은 'length' 속성을 가지고 있으며, 배열에 포함된 요소의 수를 나타냅니다.메서드 : 배열에는 다양한 내장 메서드가 있어 추가, 제거, 검색, 정렬, 반복 등의 작업을 쉽게 수행할 수 있습니다.push(), pop(), shift(), map(), filter(), reduce(), forEach()동적 크기 : 배열의 크기는..

변수(Variable)변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름// 예제 : 10 + 20 은 30을 result 라는 변수에 대입한 것var result = 10 + 20;여기서 result 는 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 - 변수이름변수에 저장된 값 = 변수값변수에 값을 저장하는 행위 = 할당(Assignment), 대입, 저장변수에 저장된 값을 읽어 들이는 것 = 참조(Reference) 식별자(identifier)식별자(indentifier) 는 어떤 값을 구별해서 식별할 수 있는 고유한 이름myNumber 라는 식별자는 값 23을 식별할 수 있어야 한다.이를 위해 myNumber 는 값 ..

블록스코프(block socpe)가 생긴 이유는 주로 코드의 가독성과 유지 보수성을 높이고, 변수의 유효범위를 더 잘 관리하기 위해서입니다. 자바스크립트에서 블록스코프는 ES6(ECMAScript 2015)에서 'let'과 'const' 키워드를 도입하면서 지원되게 시작했습니다. 블록 스코프가 생긴 주요 이유는 다음과 같습니다. 1. 변수 오염 방지기존의 'var' 키워드는 함수 스코프(function scope)를 따르기 때문에, 동일 함수 내에서 중복된 변수명이 사용되면 예기치 않은 결과가 발생할 수 있습니다. 반면 'let'과 'const'는 블록 스코프를 따르기 때문에 블록 내에서만 유효합니다.'var' 키워드를 사용한 예function testVar() { var x = 1; if (..

렉시컬 스코프는 함수를 어디서 정의했는지에 따라 함수 내부에서 사용할 수 있는 변수의 범위가 결정된다는 의미입니다. 이 규칙에 따르면, 변수의 스코프는 함수가 정의된 위치에 의해 결정됩니다. 즉, 함수를 어디서 호출했는지가 아니라, 어디서 함수가 정의되었는지가 중요합니다.  렉시컬 스코프의 작동 방식렉시컬 스코프는 함수가 선언된 위치에 따라 해당 함수가 접근할 수 있는 변수들이 결정됩니다. 함수가 실행될 때, 함수의 스코프 체인은 함수가 정의된 시점의 환경을 기반으로 생성됩니다. 예제var globalVar = "I'm a global variable";function outerFunction() { var outerVar = "I'm an outer variable"; function..

자바스크립트에서 스코프(Scope)는 변수, 함수, 객체가 접근할 수 있는 유효 범위를 정의합니다. 스코프의 종류는 크게 세 가지로 나눌 수 있습니다. 전역 스코프(Global Scope), 함수 스코프(Function Scope), 블록 스코프(Block Scope)입니다.  1. 전역 스코프(Global Scope) 전역 스코프는 모든 곳에서 접근 가능한 범위입니다. 전역 스코프에 선언된 변수나 함수는 어떤 스코프에서도 접근할 수 있습니다. 예제var globalVar = "I am global";function globalFunction() { console.log(globalVar); // "I am global"}globalFunction();console.log(globalVar); //..

JavaScript의 변수 선언에서 호이스팅과 일시적 사각지대(TDZ, Temporal Dead Zone)는 중요한 개념입니다. 이 두 개념은 변수의 선언과 초기화, 그리고 변수가 접근 가능한 시점에 영향을 미칩니다. 호이스팅 (Hoisting)호이스팅은 변수나 함수의 선언이 끌어올려지는 것처럼 보이는 현상을 말한다.(실제론 끌어올려지지 않음) Javascript는 런타임 이전에, 코드 평가 과정을 거치면서 코드를 실행하기 위한 준비를 한다.이때 자바스크립트 엔진은 모든 선언문을 찾아서 먼저 실행한다. 이 때문에 선언문이 끌어올려져서 실행되는 것처럼 보이는 것이다. 초기화는 호이스팅되지 않습니다. 'var'의 호이스팅'var'로 선언된 변수는 선언만 호이스팅되며, 초기화는 원래 코드 위치에 남습니다.co..

자바스크립트의 비동기 작업과 이벤트 루프는 자바스크립트가 단일 스레드 환경에서도 효율적으로 비동기 작업을 처리할 수 있게 해주는 핵심 요소입니다. 이를 이해하기 위해, 자바스크립트의 실행 모델과 이벤트 루프의 동작 방식을 자세히 살펴보겠습니다. 자바스크립트의 실행 모델자바스크립트는 단일 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있습니다. 하지만, 비동기 작업을 지원하기 위해 자바스크립트는 이벤트 루프와 콜백 큐를 사용하여 비동기 작업을 관리합니다. 이벤트 루프(Event Loop)이벤트 루프는 콜 스택(Call Stack)과 콜백 큐(Callback Queue)를 모니터링하면서 비동기 작업을 처리합니다. 자바스크립트의 이벤트 루프는 다음과 같은 과정을 반복합니다.콜 스택(Call Stack) :..

1. 라이브러리 추가 2. axios 사용법axios.get(url 주소)axios.post(url 주소, data 객체)//기본적으로 axios 메소드는 promise 객체를 return한다.axios .get(url 주소) .then(function(res){ // 성공 처리 }) .catch(function(error){ // 실패 처리 }) 3. axios 사용const url = "https://random-word-api.herokuapp.com/word?number=100";axios.get(url).then(function(res){ const status = res.status; const data = res.data; console.l..

script 태그의 위치에 따른 차이점js 파일을 script 태그로 html에 연결하는 방법은 크게 4가지가 있다. 연결 위치에 따라 차이가 발생하는데, 그 이유는 웹 브라우저의 동작 과정과 연관되어 있다. script 태그 위치에 따른 차이점과 무엇이 가장 선호되는지 알아보자. 1. head 태그html 파싱 > html 파싱 stop > js 파일 다운로드 후 실행 > html 이어서 파싱 head 연결  장점 : 웹사이트가 완전한 형태로 보여진다.단점 : js 파일의 용량이 크고 인터넷 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다.2. body 태그 끝html 전체 파싱 > js 파일 다운로드 > js 파일 실행 body 끝 연결  장점 : js ..