Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 스프레드 문법 하나로 뭉쳐있는 여러 값들을 개별적인 값들의 목록으로 만든다. 스프레드 문법 - ES6에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. - 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. console.log( ...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log( ...'Hello'); // H e l l o ..

❤️‍🔥TIL : Today I Learned Hoisting / TDZ 호이스팅과 TDZ 에 대해서 설명합니다. 해당 포스팅에서는 변수에 집중하여 설명합니다. 호이스팅 이란? var, let const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. 왜냐하면, 선언문은 실행하기(런타임) 이전에 먼저 소스코드의 평가과정(컴파일)을 거치면서 실행하기 위한 준비를 한다. 때문에 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅 이라고 한다. TDZ 란? Temporal Dead Zone의 약자로 변수가 let, const 키워드로 선언되었지만 아직 초기화 되지 않은 경우 발생하는 동작이며, 이 시간동안 변수에 접근하면 ReferenceErr..

❤️‍🔥TIL : Today I Learned RegExp RegExp는 정규 표현식 입니다. (Regular expression) 정규 표현식이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)다. 정규 표현식은 자바스크립트의 고유 문법이 아니고, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 패턴과 플래그로 구성된다. 정규 표현식의 생성 - 정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다. 정규 표현식 리터럴은 다음과 같이 표현한다. const 영어 = 'Is this all there is?';..

❤️‍🔥TIL : Today I Learned 배열 고차 함수 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수 배열 고차 함수란? 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. JavaScript에서 고차 함수는 하나 이상의 함수를 인수로 받거나 함수를 결과로 반환하는 함수이다. 이러한 함수를 배열과 함께 사용하면 배열 고차 함수라고 한다. Array.prototype.sort mutates - 원본 배열을 직접 변경하며 정렬된 배열을 반환 const numbers = [3,1,2]; numbers.sort(); console.log(numbers); // [1,2,3] sort 메서드의 기본 정렬 순서는 유니코드 포인트의 순서를..

❤️‍🔥TIL : Today I Learned strict mode 둘은 같은 배열이 아닌 다른 자료구조이다. 자료구조 배열 여기서 말하는 자료구조의 배열은 밀집 배열로 메모리공간이 빈틈없이 연속적으로 나열되어 연속 배열이라고도 하는 데이터 구조 배열은 동일한 데이터 유형 요소의 고정 크기 시퀀스를 저장하는 메모리 블록입니다. 밀집 배열의 요소에 액세스하는 것은 요소가 인접한 메모리 위치에 저장되기 때문에 매우 빠르다. 또한 배열을 반복하거나 해당 요소에 대해 연산을 수행하는 것과 같은 작업도 매우 효율적이다. 자바스크립트 배열(Array) 위에 설명한 밀집배열은 요소를 위한 각각의 메모리 공간이 동일하지만, 자바스크립트에서의 배열은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있..

❤️‍🔥TIL : Today I Learned 배열 메서드 배열에는 원본배열을 직접 변경하는 메서드와 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다. https://doesitmutate.xyz/ Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate..

❤️‍🔥TIL : Today I Learned 배열(Array) 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열이란? 우리가 JS에서 사용 빈도가 매우 높은 가장 기본적인 자료구조다. 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 배열은 사용빈도가 매우 높으므로 배열 메서드를 능숙하게 다룰 수 있다면 코딩에 매우 도움이 된다. const 배열명 = ['요소1', '요소2', '요소3']; 배열이 가지고 있는 값을 요소(element)라고 부른다. 배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다. 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작한다. 배열명[0] // '요소1' 배열명[1] // '요소2' 배열명[2] // '요소3' 배열..

❤️‍🔥TIL : Today I Learned strict mode 모던하게 javscript 코드를 작성하기 위해서는 strict mode(엄격 모드) strict mode란? function callMyName () { me = 'seung hyo'; } callMyName(); console.log(me); // ? 위 코드에서 자바스크립트엔진이 어떻게 동작할까? 1. 선언하지 않은 me 변수에 값 'seung hyo'을 할당했다. 2. js엔진은 me 라는 변수가 어디에 선언 되었는지 스코프 체인을 통해 검색한다. 3. callMyName 함수의 스코프에서 me 변수의 선언을 검색한다. 4. 검색에 실패한다. 5. me 변수를 검색하기 위해 callMyName 함수 컨텍스트의 상위 스코프(전역 스..