🍞 Front-End/JavaScript

기존의 자바스크립트에서는 prototype을 이용해 유사하게 상속을 구현했다. 그러나 ES6 이후 Class가 나오면서 명료하고 간편하게 객체를 생성하고, 상속을 구현할 수 있게 되었다. + 참고 📌 생성자 함수 생성자 메서드 constructor()는 속성을 설정하며 function 키워드 없이 작성한다. 이 메서드는 this 문맥을 생성하기 때문에 this에 속성을 할당하며 인수를 이용해 인스턴스마다 다른 속성을 부여할 수 있다. 메서드를 정의하려면 생성자 메서드와 마찬가지로 function 키워드 없이 작성한다. this로 현재 클래스 속성에 접근할 수 있다. Classes - JavaScript | MDN Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나..

일반 함수와 화살표 함수는 헷갈리지만 그만큼 매우 중요한 개념이다! 📌 일반(Normal) 함수는 호출 위치에서 따라 this 정의 📌 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의 일반 함수는 normal이 호출되는 부분에서 this가 정의된다. YeJin이 곧 this이고 name 부분을 꺼내서 쓴다. 이와 다르게 화살표 함수는 호출 위치와 전혀 상관없이 선언될 때 this가 무엇인지 알 수 있다. 현재 선언된 코드에선 this를 정확하게 알 수 없는데 name이라는 속성을 찾으려고 하기 때문에 undefined가 출력된다. YeJin의 noraml 함수 자체가 amy의 normal 함수에 할당된다. 그러므로 호출된 위치에 있는 name이 Amy로 바뀌어 출력되는 것을 볼 수 ..

하나의 객체만 있다면 firstName과 lastName을 각각 정의하기 쉬울 것이다. 그러나 여러 객체가 생긴다면 비슷한 객체를 정의하기에 매우 귀찮아지고 힘들어질 것이다. 그렇기 때문에 생성자 함수를 만들고 new 키워드로 객체 데이터를 생성한다. firstName과 lastName 부분은 인스턴스를 생성할 때마다 다른 내용이 들어올 수 있기 때문에 통일해서 메모리를 관리하기 어렵다. 그러나 getFullName 부분은 통일해서 메모리를 효율적으로 관리할 수 있다. 콘솔창을 보면 firstName과 lastName을 제외하고 prototype이 object인 것을 확인할 수 있다. user 함수에 숨어있는 prototype 속성 부분에 getFullName을 할당해줌으로써 몇 개의 인스턴스를 생성하더..

- 콜백(Callback)이란? 1. 함수의 인수로 사용되는 함수이다. 2. 특정한 실행 위치를 보장해주는 방법으로 콜백함수를 활용할 수 있다. setTimeout(함수, 시간) 여기서의 함수가 콜백을 뜻한다. timeout 함수가 먼저 실행이 되더라도 timeout 함수 내부에서 3초후에 실행하는 setTimeout함수가 있기 때문에 Done!이 먼저 출력되고 그 후 YeJin이 출력되는 것을 볼 수 있다. ❗ YeJin 다음에 Done이 출력되게 하려면? timeout을 호출할 때 화살표 함수를 통해 인수를 만들고, timeout 매개변수로 넣어준다. 아직 호출되지 않은 함수이므로 실행하고 싶은 곳에 매개변수(callback())를 적어줌으로써 실행 위치를 보장해준다. + 매개변수이기에 callbac..

setTimeout(함수, 시간) 일정 시간 후 함수 실행 setInterval(함수, 시간) 시간 간격마다 함수 실행 clearTimeout() 설정된 Timeout 함수를 종료 clearInterval() 설정된 Interval() 함수를 종료 📌 setTimout(함수, 시간) 일정한 시간 후에 실행되는 함수이며 시간 단위는 ms(1000ms = 1s)를 쓴다. setTimeout에서 바로 실행되기 때문에 익명의 함수로 적어주고 화살표 함수도 괜찮다. 3초 후에 setTimeout이 실행되어 콘솔 창에 YeJin이라고 뜬다. 📌 clearTimeout() 설정된 setTimeout 함수를 종료하는 함수이다. setTimeout이 시작되기 전, 3초 이내에 clearTimout을 실행하게 되면 tim..

- 호이스팅(Hoisting)이란? 자바스크립트 문법에서 변수나 함수를 선언 이전에 사용할 수 있다는 뜻이다. 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하기 때문에 실제 메모리에서는 변화가 없다. 📌 함수 표현식 원래 자바스크립트는 위에서부터 아래로 해석되어 읽혀진다. 그래서 아래 사진처럼 함수가 호출되는 부분을 윗부분으로 옮기게 되면 아직 함수가 만들어졌지 않았기 때문에 콘솔에 오류가 떠 실행이 불가능하다. 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다. 변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다. 📌 함수 선언문 그러나 함수 표현식이 아닌 함수 선..

화살표 함수가 일반 함수와 다른 점 중 하나는 일부 내용을 축약해서 최소화하여 사용할 수 있다. 화살표 함수는 매우 편리하기 때문에 앞으로도 많이 쓸 것이다!! 화살표 함수는 실행문이 간단하면 return 생략이 가능하다. 또한 매개변수가 하나라면 괄호를 생략할 수 있다. 추가적인 매개변수 존재하면 ,를 사용하여 넣어준다. 중괄호 기호도 하나의 객체 데이터가 아닌 블럭으로 해석된다. 기호가 겹치기 때문에 객체 데이터를 넣는다면 {} 괄호를 () 로 감싸준다.