Frontend/Javascript

✔️Optional Chaining(옵셔널 체이닝)이란? Optional chaining은 객체 체인마다 속성 값이 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성에 접근할 수 있다. Optional chaining 연산자 ?. 를 객체 속성에 접근하거나 함수 호출에서 사용할 때, 객체 속성 값이 nullish(`null` 또는 `undefined`)이거나 함수가 없다면, 연산자 ?. 왼쪽 표현식은 `undefined`로 단락(short-circuiting)되어 에러가 발생하지 않는다. 이렇게 중첩된 객체에서 존재하지 않는 특정 property를 조회할 때 오류 없이 항상 undefined를 반환하고 넘어가게 해주는 문법이 optional chaining이다. 따라서 값이 ..

해시테이블 종류 -  Object, Map, Set해시테이블은 속도가 빠르기에 자주 사용되며, 대부분의 프로그래밍 언어에서는 아래와 같은 해시 자료구조를 가지고 있다Javascript: Map, Object(객체에서는 key로 문자열만 사용 가능), Set본래 자바스크립트에서 해시테이블 자료구조는 Object가 대표적이었으나, ES6에서 Map과 Set이 추가되었다.  🏷️Object 이용하기Object.keys(객체) &&Object.values(객체) JSON.stringify(객체) : 객체 문자열로 변환 in을 이용해 key와 value값 출력시키기  of && Object.entries()를 이용해 key와 value값 출력시키기 (보통 of는 배열을 순회할 때 많이 사용된다) ✔️Object..

DOM (문서 객체 모델)이란?문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다. 해당 문서 트리 구조로 표현JavaScript와 DOM, 다른 개념인 이유는?DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있기 때문입니다. DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스라고 설명했습니다. 조금 더 부연 설명을 하자면 ..

Array.from() 사용하기 Array.from() 메서드는 유사 배열 객체(arrat-like object)나 반복 가능한 객체(literable object)를 얕게 복사해 새로운 Array 객체를 만든다. array.from(object, mapFunction, thisValue) object - 배열로 변환할 객체 mapFunction - 배열의 모든 요소에 실행할 함수 thisValue - 함수 내부에서 사용될 this에 대한 값 1. 2. 2번의 예시는 첫번째 인자로 배열을 두번째 인자로 각각의 배열에 적용할 함수를 건내주고 있다. Array.from({length: 20}, () => Array(10).fill(0) ); 위와 같이 사용하면 20*10의 2차원 배열을 리턴한다. ※ 왜 {..

GSAP는 무엇일까?! 내가 원하는 animation을 너무 자연스럽게 사용하고 있어서 정확히 알고 싶었다. 일단 ChatGPT에 검색해보았다!! GSAP(GreenSock Animation Platform) GSAP(GreenSock Animation Platform)은 강력하고 유연한 웹 애니메이션 라이브러리로, HTML, CSS, JavaScript를 사용하여 웹 페이지 및 앱에 동적인 애니메이션을 추가하는 데 사용됩니다. GSAP은 웹 개발자가 쉽게 사용하고 통제할 수 있는 다양한 애니메이션 기능을 제공합니다. 1. **크로스 브라우징:** - GSAP은 다양한 브라우저에서 일관된 애니메이션을 지원하며 크로스 브라우징 문제를 처리하는 데 용이합니다. 2. **간편한 사용법:** - GSAP은 직관..

배열에 값을 추가하는 함수배열.push(변수) : 배열의 맨 끝에 값을 추가한다.배열.unshift(변수) : 배열의 맨 앞에 값을 추가한다.  배열에 값을 제거하는 함수배열.pop(변수) : 배열의 맨 끝에 값을 제거한다.배열.shift(변수) : 배열의 맨 앞에 값을 제거한다. 문자열.substring() : 특정 문자열을 잘라내여 반환string.substring(start, end) substr() 함수와 다른 점은 매개변수로 잘라내고 싶은 문자열의 start index와 last index를 전달한다는 것let str = "안녕하세요?"let first_char = str.substring(0, 1); //안let second_char = str.substring(1, 2); //녕let las..

✅Sort()함수란? sort 메서드는 배열의 요소를 정렬하는데 사용하는 함수이다. sort() 함수를 활용해서 문자와 숫자 모두 잘 정렬되는 것을 볼 수 있다. 하지만, Sort()는 기본적으로 유니코드값으로 정렬하기 때문에 예상과 다르게 출력될 수 있다. 그러므로 숫자를 정렬하려면 compareFunction 필요하다 ✅compareFunction compareFuction은 정렬 순서를 정의하는 함수로, 반환 값은 복사본이 만들어지지 않고 원 배열이 정렬됩니다. sort를 빼고 쓰면 다시 정렬되지 않은 상태로 돌아간다. Digit.sort((a, b) => a-b); //오름차순 Digit.sort((a, b) => b-a); //내림차순 위의 숫자를 정렬하기 위해 사용한 것이 compareFunc..

📌indexOf() string.indexOf(searchvalue, position) indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 return 한다. 문자열을 찾으면 문자열의 첫 번째 위치를 반환하고 찾지 못하면 -1을 반환한다. var str = 'HTML,CSS,JavaScript'; var pos1 = str.indexOf('JavaScript'); // 결과 : 9 var pos2 = str.indexOf('Kotlin'); // 결과 : -1 찾을 문자열이 여러 개인 경우 첫 번째 찾은 문자열의 위치를 반환한다. 찾을 문자 쉼표(',')가 2개이지만 첫 번째 찾은 쉼표의 위치를 반환했다. v..