Javascript

지금까지 프로그래밍 언어를 공부하면서 변수라는 것은 내가 생성한 값에 대한 이름을 부여하는 것뿐이라고 생각하였다. 하지만 이번에 Javascript Deep dive라는 책을 통해서 변수가 왜 필요한 것인지에 대해서 조금 더 깊은 이해를 할 수 있었다.먼저, 컴퓨터가

위 함수를 아래와 같이 표현 가능하다.이러한 모양 때문에 이것을 화살표 함수라고 한다.{와 return이 서로 붙어 있으면 아래와 같이 작성 가능하다.해당 타입이 변수에 할당될 수 있어야 한다.해당 타입이 함수의 인자로 넘어갈 수 있어야 한다.해당 타입이 함수의 반환값

Javascript 공부를 하면서, 가장 신기했던 부분이다. Javascript에서는 실수, 정수와 같은 타입을 구분하여 (int, long, float, double)과 같은 다양한 숫자 타입을 설정하지 않는다는 것이다. 독특하게도, 하나의 숫자 타입만 존재한다.EC

값은 메모리에 저장하고, 다시 참조할 수 있어야 하는 것이다. 메모리에 값을 지정하려면, 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다. 이 값을 참조하기 위하여는 한 번에 읽어 들여야 할 메모리 공간의 크기, 메모리 셀의 개수를 알아야 한다. 이러한 상식을 기

최근 자바스크립트에 대한 기초를 더욱 탄탄히 잡고 싶어 깊이 공부하던 중, 내가 간과하던 부분을 발견하여서 이에 대해 기초를 되짚기 위해 작성하는 글이다.자바스크립트에서 statement는 프로그램을 구성하는 기본 단위이자, 최소의 실행 단위이다. 문의 집합으로 이루어

falseundefinednull0, -0NaN''(빈 문자열)Falsy 값 이외의 모든 값은, 모두 true로 평가될 수 있는 Truthly 값이다.아래 친구들은 자칫하여 Falsy로 헷갈릴 수 있는데, Truthly값이라는 것을 리마인드 해보자!아래와 같은 방법이

원시 값을(string, number, bigint, boolean, undefined, symbol..) 제외한 나머지 값(함수, 배열, 정규 표현식)은 모두 객체입니다!원시 타입은 딱 하나의 값만을 나타내지만, 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한

자바스크립트의 객체는 원시 타입과 객체 타입으로 구별할 수 있습니다! 이것을 구별하는 이유는, 서로 근본적으로 다르기 때문에 구분하는 것이다. 그 이유를 같이 한 번 살펴보자.원시 타입의 값, 원시 값은 변경 불가능하다. 이에 비해 객체 타입의 값은 객체는 변경 가능한

와..정말 C언어였으면 상상도 못할 일이 일어났다. 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출이 가능하다. 그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 불가능하다.함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다

자바스크립트에서 함수는 매우 중요하다. 자바스크립트의 핵심 개념이라고 할 수 있는 스코프 실행 컨텍스트 클로저 생성자 함수에 의한 객체 생성 메서드 this 등등.. 함수와 모두 깊은 관련이 존재한다. 따라서 함수는 자바스크립트를 정확히 이해하고 사용하기 위하여 피해갈

html/css만 이용하면 될 것 같은데, javascript를 왜 사용할까요?그것은 바로 조건에 맞는 변화를 주거나, 사용자의 동작이 있을 때 이를 동적으로 처리하기 위함이에요. 웹 문서에는 우리가 이런 것을 신경 써야 할 것이 너무너무 많아요. 텍스트와 이미지가 각

참고자료 : https://7942yongdae.tistory.com/49filter는 Array에 존재하는 것을 걸러주는역할을 합니다. 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용합니다. ECMA에는 다음과 같이 정의되어 있습니다.주어진 배열의 값

아래의 코드 동작을 보고, 결과가 어떻게 될지 예측해보자.이렇게 자바스크립트의 코드가 만들어졌고, 이에 따른 결과는 아래와 같다.a called가 2,3, 사이에 등장했다. console.log("a called")가 가장 위쪽에 있지만, 실제로 함수 호출은 2와 3

이번주의 스터디 주제는 바닐라 JS를 이용하여 TodoList를 만드는 것이었다.일단 완성화면을 보고, 내가 이 TodoList를 어떻게 만들었는지 정리해보고자 한다. 뼈대는 이렇게 간단하게 만들었다. 대부분의 기능을 JavaScript가 수행할 예정이기 때문이다.먼저

최근 기업에서 FrontEnd Test 과제로 바닐라JS를 활용하여 간단한 기능을 구현하는 것을 요구한다는 것을 많이 알게 된 이후, JS를 제대로 이용할 수 있는 환경을 만들어야겠다 싶어서 DOM의 구조와 Event 객체를 활용하여 간단한 기능을 직접 구현할 수 있는

지금까지 이벤트 핸들러에 대한 코드를 작성할 때 이벤트 핸들러가 어떤 역할을 하는지 잘 알지 못한 채로 이벤트 객체 e를 사용하였는데, 이번 글을 통하여 이벤트 핸들러와 이벤트는 어떻게 일어나는지 정리해보고자 한다. 1. 이벤트 객체가 무엇일까? DOM과 관련된 이벤

스크롤 이벤트는 공부해야지.. 공부해야지.. 했다가 이번 기회에 한번 싹 정리해보고자 하여서 공부하게 되었다.위와 같은 간단한 예제를 만드는 소스코드를 보고, 그 소스코드에 사용된 요소 하나하나를 보도록 하자.스크롤 이벤트를 컨트롤 할 때 getBoundingClien

인터랙티브한 웹을 구현할 때 자주 쓰이는 시간 관련한 함수를 알아보도록 하자!코드를 바로 실행하지 않고, 기다렸다가 실행해야 하는 경우가 있다. 하지만 여기는 JS 환경이고.. CSS 처럼 transition-delay을 이용할 수 없는 일이다. 이럴 때에는 setTi

JS에서 프로토타입을 사용하면 더욱 깔끔한 코드를 짤 수 있다..이런 말은 많이 들어 봤으나 왜 정작 프로토타입을 사용하는지에 대해서 알지 못하였다.이번 기회에 JS의 프로토타입, 생성자에 대해 개념 빡시게 정리해보자 🤗객체를 생성하는 방법에는 여러 가지가 있다. 어

이제 CSS/JS 복습의 마무리에 다다랐다. 최종장인 3D 스크롤을 구현하는것을 연습하면서 그동안 진행했던 CSS/JS 학습을 총정리하면서 마무리를 하려고 한다.화면의 3D 시점은 perspective 라는 속성으로 인하여 결정된다. 먼저 스크롤을 통하여 캐릭터가 전진

데브코스를 열심히 수강하면서 바닐라 자바스크립트와 친해질 수 있는 기회를 많이 얻게 되어서 순수 자바스크립트로 약 3주간 다양한 기능들을 만들어 보고 있다. 평소 React나 NextJs같은 프레임워크만으로 복잡한 기능들을 구현하다 보니, 짜맞춰진 프레임워크와 라이브러

약 1주 반의 기간동안 바닐라 JS를 이용하여 협업 도구로 많이 사용하는 노션을 클론하였다.문서 정보에 대한 것은 바닐라 JS를 담당하시는 강사님께서 만들어주셨기 때문에 서버를 직접 생성할 필요는 없었고, 온전히 구현에만 집중할 수 있었다.처음에는 이걸 어떻게 구현해야