본문 바로가기

반응형

자바스크립트

(96)
[javascript] find() , findIndex(); Array.prototype.find(callback) callback 함수 내에서 구현된 조건을 만족하는 최초의 요소를 반환, 중복되는 요소가 있으면 뒤의 요소를 무시한다. 만일 조건과 일치하는 요소가 없으면 undefined 를 반환한다. const users =[ {username:"고기좋아"}, {username:"술좋아"}, {username:"야채싫어"}, {username:"야채싫어"} ]; const find = users.find(user => user.username ==="야채싫어"); console.log(find); // {username:"야채싫어"} Array.prototype.findIndex(callback) find 메서드와 마찬가지로 콜백함수 내 조건을 만족하는 요소를 ..
[javascript] concat , indexOf, includes Array.prototype.concat(추가할 배열) 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 // 기존 배열 const currentNum = [1,2,3]; //추가할 배열 const addNum =[4,5,6]; //새로운 배열 const newNumbers = currentNum.concat(addNum); // ↓ ↓ ↓ console.log(newNumbers); // [ 1, 2, 3, 4, 5, 6 ] Array.prototype.indexOf( 찾을요소) Array 에서 찾을요소가 존재하면 그 요소가 위치한 인덱스를 반환하고, 없으면 -1 을 반환한다. /** 배열에서 타겟이 존재하는 경우 */ // 배열 ↓ // 0 const numbers = [1,2,3,4..
[javascript] push(), pop(), splice(), slice() Array.prototype.push() 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환 const numbers = [1,2]; numbers.push(3); console.log(numbers) //[1,2,3] const arrLen =numbers.push(4,5); console.log("새배열:",numbers,"배열길이:",arrLen) //새배열: [ 1, 2, 3, 4, 5 ] 배열길이: 5 Array.prototype.pop() 배열의 끝에 하나의 요소를 제거하고, 제거한 요소를 반환 const numbers = [1,2]; const newArr = numbers.pop(); console.log("기존배열:",numbers) // 기존배열: [1] console..
[javascript] 자바스크립트 내부 동작 자바스크립트는 동기적 언어이며, 인터프리터 형식의 언어이므로 코드를 위에서 한줄씩 순차적으로 처리한다. 그리고 이러한 코드를 처리하기 위해 쌓이는 장소가 있는데, 이를 호출스텍 혹은 콜스텍(Call Stack)이라 한다. 하지만, 무조건 순차적으로 처리하는 것은 아닌데, 비동기적 코드(setTImeout, animationframe, promise.then) 를 만나게 되면, 이 코드들은 1차적으로 Call Stack으로 이동시킨 후 곧바로 열외시켜 Web Apis 라고 불리는 공간으로 보내버린다. 여기서 Web Apis 는 비동기적 코드를 처리하는 영역으로, 이 공간에서 비동기적 코드들은 실행될 준비가 완료되고, Callback Queue 로 전달되어 대기상태가 된다. 이 때 무한정 대기상태가 되는 것..
[간단정리js] aysnc / await async / await | 비동기 코드를 동기적인 방식으로 실행하도록 돕는 키워드 await 키워드는 비동기 함수에서 약속(promise)이 해결(이행)될 때까지 기다렸다(await)가 값을 반환(return)하는 데 사용됩니다. 즉. Promise가 이행 상태가 될 때 까지 비동기 코드의 수행을 잠시 동안 중단할 때 사용하며, 이 때 비동기 함수의 시작임을 나타내는 aysnc 키워드가 함께 사용됩니다. (하나라도 빠지면 안 됨) async function fetchData() { const response = await fetch("https://api.example.com/data"); //주소로 보낸 응답올 때 까지 대기 const data = await response.json(); //받은 제..
[간단정리 js] Map 객체 Map 객체의 특징과 예시 JavaScript에서 Map 객체는 객체와 유사하지만 조작을 위한 추가 기능과 메서드가 있는 키-값 쌍의 모음입니다. 1. key-value : 맵 개체는 함수, 개체 및 문자열 및 숫자와 같은 원시 데이터 유형을 포함하여 모든 값을 키 또는 값으로 저장할 수 있습니다. 2. 반복가능: Map 객체에는 키, 값 및 키-값 쌍을 반복하는 방법이 내장되어 있으므로 일반 객체보다 작업하기가 더 쉽습니다. 3. size 속성: 맵 개체에는 맵의 키-값 쌍 수를 반환하는 크기 속성이 있습니다. 4. 자동 문자열화 불가능: 개체와 달리 맵은 키를 문자열로 자동 변환하지 않습니다. 이를 통해 기호와 같은 문자열이 아닌 유형을 포함하여 모든 데이터 유형의 키를 저장할 수 있습니다. 즉, 들..
[간단정리js] this 키워드 JavaScript에서 " this " 키워드는 현재 함수가 속성인 개체(즉, 현재 함수 자신을' 프로퍼티==속성' 으로 포함하고 있는 상위 객체)를 나타냅니다. 하지만, 이 값은 함수가 호출되는 컨텍스트에 따라 변경될 수 있습니다. 1. 글로벌 범위에서 "this"은 글로벌 개체(일반적으로 브라우저의 "창")를 나타냅니다. 2. 메소드에서 "this"은 메소드의 속성인 객체를 나타냅니다. 3. 생성자 함수에서 "this"은 생성되는 객체를 나타냅니다. 호출(call), 적용(apply) 또는 바인딩(bind)을 사용하여 "this"의 값을 명시적으로 설정할 수 있습니다. 하지만 이를 사용하는 것은, 메서드 및 속성에 액세스하는 방식과 코드 동작 방식에 영향을 미치기 때문에 " this " 의 값을 정확..
[간단정리 js] 실행 컨텍스트 자바스크립트에서 실행 컨텍스트는 실행되는 스크립트나 함수의 상태를 저장하는 컨테이너입니다. JavaScript에는 전역 실행 컨텍스트와 로컬 실행 컨텍스트의 두 가지 유형이 있습니다. 1. 글로벌(전역) 실행 컨텍스트: 이것은 전체 JavaScript 코드에 대한 기본 실행 컨텍스트입니다. 자바스크립트 코드가 처음 실행될 때 생성되며 글로벌 객체와 'this' 키워드를 포함합니다. 2. 로컬(함수) 실행 컨텍스트: 이것은 함수가 실행될 때마다 생성되며 함수에 전달되는 인수, 함수 내에 선언된 변수 및 'this' 키워드를 포함합니다. 새 함수가 호출될 때마다 새 로컬 실행 컨텍스트가 생성되어 실행 스택의 맨 위에 푸시되지만 이전 컨텍스트는 스택에 남아 있습니다. 실행 컨텍스트는 스택에서 팝업되고 함수가 ..

반응형