본문 바로가기

Frontend/JavaScript30

[ 자바스크립트(JavaScript) ] 부드럽게 scroll 하는 방법 알아보기 📍 부드럽게 scroll 하는 방법 알아보기 medium을 보다가 Div의 맨 아래로 scroll 하는 몇 가지 방법(scrollTop, clientHeight, scrollIntoView)을 작성한 글을 보던 중 scrollIntoView 메서드가 간편해 보여서 해당 메소드로 직접 기능을 직접 구현하면서 배운 점을 남긴다. scrollIntoView 메서드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤하는 메소드인데, caniuse 사이트에서 보면 거의 대부분의 브라우저에서 지원하므로 크로스 브라우징을 고려할 때 사용해도 괜찮은 메소드인것을 확인할 수 있다. MDN을 참고하면 알 수 있지만 scrollIntoView 메서드의 인자는 총 2개를 받는.. 2021. 11. 16.
[ 자바스크립트(JavaScript) ] 스코프 체인(Scope chain)에 대해서 알아보자 📍 스코프 체인(scope chain)에 대해서 알아보자. scope는 식별자에 대한 유효 범위를 나타낸다. 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 접근이 가능하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다. 이러한 식별자의 유효범의를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라고 부른다. 이때 outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 L.E를 참조하게되는데, 중요한 점은 과거 당시 선언된 시점이다. 다음 코드의 foo()와 bar()의 출력값은 1로 동일한데, 그 이유는 function bar가 선언된 시점의 x는 전역 변수인 x를 바라보게 된다. 즉, this처럼 함수를 어디서 호출.. 2021. 11. 15.
[ 자바스크립트(JavaScript) ] 전치연산자와 후치연산자에 대해 알아보자 📍 전치 연산자와 후치 연산자에 대해 알아보자 개념 자체는 어려운 편도 아니고 내용도 많지 않은데 기록을 남기는 이유는 알고리즘 문제를 풀다 보면 헷갈리는 경우가 있기 때문이다. 전치 연산자와 후치 연산자를 잘 활용한 문제는 투 포인터 개념을 활용한 두 배열 합치기 문제였다. 전치연산자(prefix form): 연산자(++x, --x)가 변수 앞에 오는경우 전치 형태이고, 증가/감소가 먼저 이루어지고 값을 리턴함. 후치 연산자(postfix form): 연산자(x++, x--)가 변수 뒤에 오는경우 후치 형태이고, 증가/감소 이전에 먼저 값을 리턴함. 위에서 살펴본 개념을 토대로 잠깐 문제를 풀어보자. 어떤 답이 나올지 한번 생각해보자. 잘 모르겠다면 드래그를 해보자. 예제 1의 counter와 a의 값.. 2021. 11. 5.
[ 자바스크립트(JavaScript) ] typeof 연산자에 대해 알아보자 📍 typeof 연산자에 대해 알아보자 ❏ typeof 연산자 typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. 총 7가지 문자열 string, number, boolean, undefined, symbol, object, function 중 한 개를 반환한다. null을 반환하는 경우는 없으며, 함수의 경우 function을 반환한다. typeof(null)의 결괏값은 null이 아니라 object를 반환하는데 주의하자. 이것은 자바스크립트의 첫 번째 버전의 버그다.(typeof null의 역사) 하지만 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다. 만약, null 타입인지 확인하고 싶다면 일치 연산자(===)를 사용하여 확인하자. 선언하지 않은 식별자를 typ.. 2021. 11. 3.
[ 자바스크립트(JavaScript) ] 2차원 배열 초기화 하기 📍 2차원 배열 선언하기 Array.from 메서드를 사용하여 2차원 배열을 선언 할 수 있다. 예를 들어 3행 4열을 0으로 초기화한 2차원 배열을 만들고 싶다면 다음과 같이 작성한다. let row = 3; let column = 4; let arr = Array.from(Array(row), ()=> Array(column).fill(0)); console.log(arr) 👉🏽 [ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ] reference MDN 2021. 9. 27.

티스토리툴바