본문 바로가기
반응형

Dev/🟨 JavaScript8

[JS] Array Methods를 정리해보아요. 안녕하세요. 아아덕후입니다. JavaScript를 사용하면서 느끼는 점은 배열 관련된 메서드가 정말 많다는 것입니다. 예전부터 존재해오던 것 메서드부터 ES5 이후, 그리고 지금도 새로 릴리즈 메서드(ES2023)까지..! 머릿속에 희미하게, 얽혀있는 배열 메서드를 정리하기 위해 이 글을 작성했습니다. 목차 slice() splice() Concat() forEach() indexOf() lastIndexOf() includes() find() findIndex() filter() reverse() map() join() split() isArray() some() every() reduce() sort() 참고 자료 1. slice() Array.slice(n,m) : n(start) 부터 m(end).. 2023. 9. 9.
[JS] for, for of, for in을 정리해보아요. 안녕하세요. 아아덕후입니다. for, for of, for in 이름은 비슷하지만 역할이 다른 for 삼둥이들을 정리해보기 위해 글을 작성했습니다. 목차 for for of for in forEach 참고 자료 1. for for(초기값; 조건; 증감) { ... 실행문 } : 가장 기본적인 for loop 문법 초기값 : for 문이 시작될 때, 단 한번만 실행된다. 주로 카운터 변수를 초기화한다. 조건 : 매 루프마다 조건이 검사된다. 조건이 true 이면 루프가 계속되고, false 이면 루프가 종료된다. 증감 : 매 루프가 끝날 때마다 실행된다. 주로 카운터 변수를 증가 또는 감소시킨다. function forTest() { const arr = ["a", "b", "c", "d", "e"]; f.. 2023. 8. 22.
[JS] 브라우저에서 자바스크립트는 어떻게 동작하는걸까? 브라우저에서 자바스크립트 비동기 처리가 작동하는 원리를 이해하기 위해 작성한 글입니다. 목차Intro자바스크립트 엔진 : ( Call Stack, Memory Heap )Web APIs콜백 큐 ( CallBack Queue )이벤트루프참고 자료 자바스크립트는 싱글 스레드 언어로 동기적으로 실행된다.(동기적으로 실행된다: 의미는 호이스팅으로 var 및 함수 선언이 맨 위로 끌어올려진 후 코드 순서에 따라 해당 함수가 실행된다는 의미이다.)하지만 비동기적으로 처리도 가능하다. 이는 자바스크립트가 브라우저의 도움을 받기 때문에 가능하다. 그렇다면 브라우저 내부에서는 비동기 처리를 위한 작업이 어떻게 진행될까? 브라우저에서는 아래 그림과 같이 자바스크립트 엔진(콜스택, 메모리힙), Web APIs , 콜백큐(C.. 2023. 7. 31.
[JS] ES 6+ 문법을 정리해보아요. 목차 let과 const Ternary Operator (삼항 연산자) nullish coalescing 연산자 + Logical OR 연산자 ( nullish, falsy ) Template Literals (템플릿 리터럴) Symbol(심볼) Spread Operator, Destructuring assignment ( 타 게시글 ) 참고 자료 1. let과 const ES6 이후 최신 자바스크립트 에서는 변수 선언을 위한 예약어로 let과 const를 사용하며 var 예약어는 사용하지 않도록 권장되고 있다. 이때, const는 선언 시, 값을 반드시 할당하여 초기화를 해줘야한다. ( 선언만 하고 할당하지 않을 시, syntax 에러 발생) (추가적으로 변수를 선언할 때 초기 값을 할당하는 것이 좋은.. 2023. 5. 10.
[JS] 데이터를 다루는 객체 사용 방법 (feat. 전개연산자 (ES6), Trouble Shooting) 목차 1. 코드로서의 객체 생성 (객체 리터럴) 2. 함수를 이용한 객체 생성 3. 클래스를 이용한 객체 생성 4. 객체 속성 추가 및 삭제 5. ★ 객체 복사 (참조 끊기) 및 분해 ★ (feat. Spread Operator, Destructuring assignment) 6. [ES6] Spread Operator를 이용한 Trouble Shooting 1. 코드로서의 객체 생성 (객체 리터럴) let box = { width: 200, height: 200, borderRadius: 5, backgroundColor: "red", }; 코드로서의 객체는 위와 같이 객체내에 프로퍼티를 정의합니다. 해당 방법이 객체를 만드는데 가장 많이 사용되는 방법이지만, 단점도 굉장히 많습니다. 객체는 기본적인 .. 2023. 4. 10.
[Vite] 빛처럼 빠른 빁 ⚡ ( with. Vue 설치 ) 목차 Vite 이란? Vite 사용하는 이유 Vite가 속도 개선하는 방법 Vite 설치 및 실행 ( with. Vue.js ) 참고 1. Vite 이란? Vite의 공식적인 특징 6가지 빠른 서버 시작 -> 최고✔️ 엄청나게 빠른 HMR ( 핫 모듈 리플레이스를 통해 소스 업데이트를 빠르게 반영한다. ) -> 최고✔️ 풍부한 기능 → 타입 스크립트, JSX, CSS 지원한다. 빌드 최적화 도구 이다. 다양한 플러그인을 제공한다. 타입스크립트 타입으로 만들어진 API이다. 참고 : https://vitejs.dev/ 2. Vite 사용하는 이유 (어떤 문제를 해결하기 위해 사용하는 것일까?) 가장 큰 장점은 빌드 속도 및 새로운 코드 적용했을 때 반영속도이다. 브라우저에서 ES 모듈을 사용할 수 있기 전.. 2023. 3. 27.
[JS] JavaScript 문법 노트 ( map, set, || , nullish ) 목차 1. map 2. set 3. || 논리연산자 4. nullish 연산자 5. 반복문 중간에 끝내기 ! 1. map 객체 배열에서 map을 사용하여 동일한 key 값을 가진 value 출력하기. const ajax = new XMLHttpRequest(); // ajax 통신 ajax.open("GET", "https://api.hnpwa.com/v0/news/1.json", false); // 객체 데이터 받기 위함 ajax.send(); const newFeed = JSON.parse(ajax.response).splice(0, 5); // 객체 데이터 5개만 가져오기! // map : 배열 객체에서 동일한 key 값을 가진 value 뽑아내기 console.log("newFeed 원본",new.. 2023. 2. 22.
[JavaScript] Var 예약어 - 호이스팅과 재선언 및 재할당 목차 Var 예약어 1. 호이스팅 2. 재선언 및 재할당 3. 함수 레벨 스코프 / ( let , const : 블록 레벨 스코프 )var 예약어ES6 전의 자바스크립트에서 변수를 선언하는 방법은 var 키워드 하나뿐이었다. 이에 상수를 선언하는 방법( ES6 이후부터는 const)이 없었다. var예약어는 다음과 같은 특징이 있다.호이스팅 재선언 (몇 번이고 선언할 수 있다.)함수 레벨 스코프이와같은 var의 특징으로 중복 선언 및 재할당이 가능하다. 이로 인해 보다 높은 자율성은 생기지만, 문제점으로 소스코드가 복잡해질 경우 기존 선언해둔 변수를 재선언, 혹은 재할당 할 수 있기 때문에 어떤 부분에서 값이 변경되는지 파악하기 힘들어질 수 있는 큰 문제점이 있다.1. 호이스팅hoisting : 끌어 올.. 2022. 12. 7.
반응형