Lucky Charms Clover

👋🏻 JavaScript

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 구조 분해 할당을 알아보자2

Array 분할 할당 배열의 엘리먼트를 분할해 할당한다. 1) 인덱스 기준으로 할당 let one, two, three; [one, two, three] = [1, 2, 3] console.log(one) // 1 console.log(two) // 2 console.log(three) // 3 2) 할당 받을 변수 수가 적을 경우 let one, two; [one, two] = [1, 2, 3] console.log(one) // 1 console.log(two) // 2 3) 할당 받을 변수 수가 많을 경우 let one, two, three, four; [one, two, three, four] = [1, 2, 3]; console.log(three) // 3 console.log(four) // ..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Iteration(이터레이션)을 알아보자

이터레이션 순회(반복)을 의미한다. const list = [10, 20]; for (let v of list) { console.log(v) }; // 10 // 20 const obj = list[Symbol.iterator](); console.log(obj.next()) // {value: 10, done: false} console.log(obj.next()) // {value: 20, done: false} console.log(obj.next()) // {value: undefined, done: true} 이터레이션은 돌 때마다 밸류값을 알려주고, 전부 순회하면 마쳤다는 뜻에서 done: true가 된다. 이터레이션의 프로토콜 프로토콜은 간단하게 어떤 '규약'이라고 할 수 있다. 데이터를 ..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 구조 분해 할당을 알아보자

구조 분해 할당(Destructuring Assignment) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 표현식 구조 분해 할당은 코드를 간결하게 만들어주며 배열이나 객체에서 필요한 값을 쉽게 가져올 수 있다. 예시 1. 배열 분해 할당 배열에서 값을 추출해 변수에 할당할 때는 배열의 각 요소를 대상으로 할당 연산자(=)를 사용한다. 할당 연산자 왼쪽은 추출하려는 값을 받을 변수들의 리스트, 오른쪽은 배열을 지정한다. const numbers = [1, 2, 3, 4, 5]; // 배열 분해할당을 사용하여 배열의 요소들을 변수에 할당 const [a, b, c, d, e] = numbers; console.log(a); // 1 console.log(b); // 2 console.log(..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 객체 Set을 알아보자

Set이란? 중복되지 않는 유일한 값들의 집합 키가 없는 값이 저장된다. 값들이 삽입된 순서를 유지한다. 인덱스로 요소에 접근할 수 없다. 내부적으로 해시테이블을 사용한다. 해시 테이블은 데이터를 저장하는데 사용되는 자료구조 중 하나로, 키값과 밸류값을 쌍으로 저장해 키를 기반으로 값을 검색한다. Set은 내부적으로 이를 이용해 데이터를 저장하는데, Set에 값을 추가하면 해시 함수를 사용해 값의 해시를 계산하고, 값이 저장될 위치를 결정한다. 이처럼 해시 테이블을 기반으로 구현되었으나 Set에서는 값만 저장하므로 값의 중복을 허용하지 않아 고유한(유일한) 값의 집합을 관리하기 적합하다. Set 객체 사용하기 Set 생성하기 new 키워드를 사용해 생성한다. const set1 = new Set([1, ..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 객체 Map을 알아보자

Map이란? 키-값 쌍으로 데이터를 저장하는 콜렉션 문자열, 숫자, 함수까지 어떤 값이든 키로 사용할 수 있다. 객체는 키로 문자열과 심볼만 사용할 수 있다. 데이터를 삽입한 순서를 보존하는, 반복 가능한 이터러블 객체다. 따라서 for of 루프, for in 루프, forEach() 메서드까지 사용할 수 있다. 객체는 이터러블하지 않다. 키를 사용하는 for in 루프는 쓸 수 있지만, iteration protocol을 구현하지 않기 때문에 직접 반복할 수 없다. 따라서 iteration protocol을 구현하거나 Obj.keys() 메서드, Obj.entrues() 메서드를 사용해서 반복 가능한 항목을 얻을 수 있다. Size 프로퍼티로 크기를 바로 확인할 수 있다. 객체는 객체의 크기를 나타..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] JavaScript의 실행 콘텍스트와 체인 스코프에 대해 알아보자

1. 실행 콘텍스트란? 코드가 실행되기 위해 필요한 환경을 제공하며, 실행 중인 코드의 상태를 나타내는 객체 변수, 함수 선언, 매개 변수 등을 포함한 스코프 정보와 this 값, 외부 환경 정보, 실행 순서 등을 {key: value} 형태로 담고 있다. 실행 콘텍스트는 크게 전역 콘텍스트와 함수 콘텍스트로 나눌 수 있다. 전역 콘텍스트는 스크립트가 로드되면 가장 먼저 생성되는 컨텍스트로 전역 변수와 전역 함수 등을 포함한다. 함수 콘텍스트는 함수가 호출될 때마다 생성되며, 각각의 함수에 대한 지역 변수와 매개 변수, 내부 함수를 포함한다. var x = 10; function foo() { var y = 20; console.log(x + y); } function bar() { var z = 30;..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] var, let, const 변수에 대해 알아보자 (feat. 자바스크립트 ES6+)

1. 변수 구분 변수는 로컬(지역) 변수와 글로벌(전역) 변수 2가지 종류가 있다. 이렇게 종류가 나눠진 이유는 각 변수의 기능과 목적이 다르기 때문이다. 로컬 변수 함수 내에서 선언된 변수로 해당 함수의 스코프에서만 유효하다. 그래서 함수가 실행되면 생성되고 실행이 끝나면 소멸한다. 로컬 변수는 함수 내에서만 접근이 가능하며 외부에서는 이 변수에 대해 접근할 수 없다. 그래서 서로 다른 함수에서는 동일한 이름의 로컬 변수를 사용할 수 있다. (각 함수의 스코프가 다르기 때문에 충돌이 일어나지 않는다.) 글로벌 변수 전역 스코프에서 선언되고 사용되는 변수로 어디에서든 접근 가능한 가장 바깥 쪽의 스코프로, 함수 밖에서 선언된 것들을 의미한다.글로벌 변수는 다른 JS 파일에서 변수 값을 공유할 수 있고, ..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JavaScript] Generator & Iterator

알고리즘 문제를 풀다 보면 for문이 아니라 for of를 사용해 문제를 푸는 경우를 종종 본다. 왜 for of를 쓰는지, for of는 for문이랑 뭐가 다른지 궁금했다. 공부 중인데 아래 영상들의 예시가 직관적이고 설명이 자세해서 도움이 된다. 1. 우아한테크 파노님 2. 유튜버 Taehoon님

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JavaScript] 정규표현식 알아보기

📌 정규표현식 문자열에서 특정 문자 조합을 찾기 위한 패턴 js에서는 정규표현식도 객체로서 RegExp의 exe(), test() 메서드를 사용할 수 있다. 이외 String의 match(), matchAll(), replace(), replaceAll(), search(), split()과도 사용할 수 있다. 간단한 문법은 기존에 포스팅해서 생략했다. 물론 다 까먹어서 다시 봐야하지만 🥺 1) 정규표현식 만들기 슬래시로 패턴 감싸기 (a와 c 사이에 b가 하나 이상 있어야 하는 문자열을 찾아내는 패턴) const re = /ab+c/ RegExp 객체의 생성자 호출 const re = new RegExp('ab+c') 2) 정규표현식 뒤에 붙는 플래그 플래그는 아래와 같이 정규표현식에 지정할 수 있다...

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JavaScript] filter() 로 특정 인덱스의 요소들만 반환해보기

Array.prototype.filter() arr.filter(callback(element[, index[, array]])[, thisArg]) 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 1) 매개변수 callback : 각 요소를 시험할 함수로 true 반환 시 요소를 유지, false 반환 시 요소를 버림. element : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : filter를 호출한 배열 thisArg : callback을 실행할 때 this로 사용하는 값 2) 반환 값 테스트를 통과한 요소로 이뤄진 새로운 배열. 어떤 요소도 테스트를 통과하지 못하면 빈 배열 반환. 3) 명명되지 않은 매개변수 (Unnamed paramete..

썸머몽
'👋🏻 JavaScript' 카테고리의 글 목록 (3 Page)