내가 보기 위해 쓰는 것/Javascript
-
템플릿 리터럴, 태그된 템플릿내가 보기 위해 쓰는 것/Javascript 2020. 1. 23. 11:23
템플릿 리터럴은 ES2015에 명세된 문법으로 표현식, 문자열 삽입, 태깅 등의 수행하는 문법입니다. 1. 기본 문법 기존 문법은 표현식 삽입법입니다. 기존 문법을 먼저 살펴보겠습니다. var a = 10; var b = 20; var userName = "홍길동"; var userStr = "안녕하세요." + userName + "님, 당신은 " + (a + b) + "살 입니다."; 익숙하고 직관적인 방법이지만 복잡해지면 가독성이 떨어지는 문제가 있었습니다. 이에 새롭게 나온 문법이 템플릿 리터럴입니다. const a = 10; const b = 20; const userName = "홍길동"; const userStr = `안녕하세요. ${userName}님, 당신은 ${a + b}살 입니다.`; ..
-
JavaScript - this (this가 쓰이는 세가지 경우)내가 보기 위해 쓰는 것/Javascript 2019. 10. 28. 10:58
JavaScript에서 this는 쓰이는 상황에 따라서 의미가 달라진다. 오늘은 this가 쓰이는 세가지 상황을 정리해볼까 한다. 물론 더 있을텐데, 나는 크게 세가지경우로 나뉜다. 세가지 상황을 보기전에, 그냥 this라 하면 뭐가 나오는지 보고 시작하는게 좋을 것 같다. console.log(this) this는 기본적으로 Window다. Window가 아닌 경우의 this 세가지를 ARABOJA. 1. 객체를 가르키는 this function Car (name, maxSpeed) { this.name = name this.maxSpeed = maxSpeed this.whoIsThis = function () { console.log(this) console.log(this.name) } } var ..
-
JavaScript - var, let, const의 차이내가 보기 위해 쓰는 것/Javascript 2019. 10. 25. 10:51
1. let, const는 ES6에서 추가된 문법 2. var는 기존에 있던 문법 let, const와 var의 차이를 이해하려면 hoisting, scope에 대한 개념이 필요하다. 먼저 기존의 var에 대해서 알아보자. 1. var var는 기존 문법으로 매우 유연하고 관대한 녀석이다. 그런데 너무 관대해서 문제도 좀 있었다. 1-1. scope var의 scope는 function이다. var a = 'im free' function imLockedUp () { var a = 'im locked up' console.log(a) } imLockedUp() console.log(a) if(true){ var a = 'im free' } console.log(a) 위 예제들로 var의 scope를 명확..
-
JavaScript - Prototype & Prototype chain (프로토타입과 프로토타입 체인)내가 보기 위해 쓰는 것/Javascript 2019. 10. 24. 11:24
프로토타입은 이럴 때 필요하다. 예를 들어 자동차라는 객체를 정의한다고 가정해보자. function Car (name,maxSpeed,n) { this.name = name this.maxSpeed = maxSpeed this.currentSpeed = 0 this.speedUp = () => { this.currentSpeed += n } this.speedDown = () => { this.currentSpeed -= n } } 정상적으로 작동할 것이다. 그런데 문제가 있다. 만약 Car 객체가 아주 많다면 어떻게 될까? 모든 Car 객체가 speedUp, speedDown 기능을 내장할 것이다. 모든 Car객체가 같은 기능을 중복으로 가지고 있는 것이다. 즉 메모리 낭비다. 그렇기 떄문에 proto..
-
JavaScript - 쓰로틀링(Throttling)내가 보기 위해 쓰는 것/Javascript 2019. 10. 23. 10:41
쓰로틀링은 주로 이벤트에 사용하는 기능이다. 흔한 경우로 웹이 인터렉션 효과를 넣다 보면 쓰로틀링이 필요한 시점이 생긴다. 예를 들어보자면 scroll 이벤트가 있다. box가 scroll 될 때마다 display none~block으로 토글되는 이벤트가 있다고 가정해보자. let target_state = true; function event_scroll() { const target = document.querySelector('.box') target_state = !target_state if(target_state){ target.style.display = 'block' }else{ target.style.display = 'none' } console.log('scroll!!') } 클라이언..
-
Javascript - Closure내가 보기 위해 쓰는 것/Javascript 2019. 10. 7. 15:04
생활코딩에서 쭉 봤는데 거기서 나오는 마지막 예제가 하이라이트 인 것 같다.. 내가 쓴 예제를 이해하려면 호이스팅과 IIFE 개념이 필요하다. Closure의 개념은 내부함수가 외부함수의 변수등에 접근할 수 있다는 것이다. block scope의 관점에서 봤을 때 당연해 보이기도 하는데 중요한건 외부함수가 소멸하거나 호출되지 않은 경우에도 참조 할 수 있다는 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var arr; var i; var index; arr = []; for(i = 0; i
-
Javascript - 호이스팅개념내가 보기 위해 쓰는 것/Javascript 2019. 10. 7. 11:53
우선 아래와 같은 코드를 보고, 어떻게 작동할지 예측해보자 1 2 3 4 5 if(true){ var hey = 'hello'; } console.log(hey); cs 일반적인 경우 hey는 if문안에 {} 영역에서 선언되었으므로 그 밖의 영역에 있는 console.log 에서는 호출할 수 없어야 한다. 그런데 이 소스는 작동한다. 그 이유는 var hey가 호이스팅 되었기 때문이다. 위 소스는 아래처럼 호이스팅 된다. 1 2 3 4 5 6 7 var hey; if(true){ hey = 'hello'; } console.log(hey); cs 즉 호이스팅이란 선언과 할당이 분리되는 현상을 말한다. 선언은 선언된 block의 최상단으로 옮겨진다. 위 예시에서는 var를 사용하였다. 그리고 var는 fu..