javaScript

TypeScript

타입스크립트는 javascript의 슈퍼셋으로 데이터 타입을 지정하지 않는 javascript에 타입 지정을 필수로 만들어준 언어로 대부분의 많은 프로젝트에서 사용된다. 그렇기에 javascript가 익숙해졌다면 typescript도 꼭 도전해보자. 지피지기면 백전무패! 타입스크립트의 장단점과 특징, 타입스크립트를 도입해야 하는 이유에 대해서 알아보자 타입스크립트의 특징 1. 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때..

이벤트 버블링, 이벤트 캡쳐,

이벤트 등록 본문에 들어가기 앞서 가장 기본적으로 이해하고 있어야 하는 내용은 바로 웹 애플리케이션의 이벤트 등록이다. 여기서 말하는 이벤트 등록이란 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. add one itemHTML var button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 위 코드는 add one item이라는 간단한 버튼을 만들어 클릭했을 때, addItem이라는 함수를 실행시키는 코드이다. 버튼을 클릭하고 나면 addItem 함수가 실행되고 addItem 함수에 event 인자가 넘어온..

this

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); 자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다. 아래 Java 코드의 생성자 함수 내의 this.n..

클로저(closure)

클로저(closure)란? MDN에서는 클로저를 다음과 같이 정의하고 있다. 💡 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게 된다. 말로 설명하면 설명하기가 복잡하니 우선 코드를 보자. function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'variable 1' 위에서 정의한 getClosure()는 함수를 반환하고,..

호이스팅(Hoisiting)

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. 호이스팅의 범위 var 변수 선언과 함수선언문은 함수 단위 호이스팅을 한..

Array Method

Array Method ✏️ 메소드는 this(원본 배열)를 변경한다. 🔒 메소드는 this(원본 배열)를 변경하지 않는다. 1. Array.isArray(arg: any): boolean ES5 정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다. // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); // false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(1); Array.isArray('Array'); Array.isArray(..