호다닥

DOM (Document Object Model) : 자바스크립트로 웹 페이지를 제어하도록 해준다. document.getElementsByTagName() : 태그 이름으로 요소 찾기 document.querySelector() : 선택자 이름으로 요소 찾기 document.getElementsByClassName() : 클래스 이름으로 요소 찾기 document.getElementsById() : ID 이름으로 요소 찾기 → h1 태그를 가진 모든 요소들을 배열형태로 담은 다음 0번째 인덱스의 요소를 temp 변수에 넣는다. Event 이벤트는 웹페이지에서 사용자가 행한 행위에 반응하는 것을 의미한다. 일반적으로 빠르게 이벤트를 적용할 때는 인라인(inline) 방식을 사용한다. 체계적으로 이벤트 처..

JavaScript: What is the ternary operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 삼항연사자와 함께 쓰인 if문을 간결하게 하는 방법과 4가지 예시를 함께 배울 것이다. 전형적인 IF 문 우리가 사람들의 나이를 가지고 있고, 만약 그들이 운전을 할 수 있는 나이라면 true 값을 할당하고 그렇지 않으면 false를 할당하고자 한다. 그리고 운전을 하기 위해서는 16세 이상이어야 한다고 가정해보자. 이 시나리오에서 IF문은 아래와 같을 것이다. let age = 20; let d..

JavaScript: What is short-circuit evaluation? 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. variable들을 쉽게 할당하기 위해 논리적인 OR( || )을 어떻게 사용할지 배우기. 3가지 논리적인 연산자들 자바스크립트에는 3가지 논리연산자들이 있다. AND && OR || NOT ! 오늘 우리는 OR || 에 대해 배워볼 것이다. 자바스크립트에서 OR 연산자는 모든 피연산자함수가 true일 때, true를 return한다. true || true; // true true ||..

Javascript & The spread operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 이게 무엇처럼 보이나? 점 세개 : . . . 이것은 무엇일까? spread 연산자는 여러개의 elements / variables / arguments가 예상되는 곳에서 표현식을 확장시켜준다. 몇가지 예시를 통해 spread 연산자가 정확히 무엇인지 알아보자. middle 이라는 배열을 만든다. middle 배열을 포함하는 두번째 배열을 만든다. 결과값을 기록한다. var middle = [3, 4]; var..

JavaScript: Template Literals & Tag Functions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 대부분의 사람들이 그러는 것처럼 나는 click-bait title들을 싫어한다. 하지만 진지하게 "당신 코드의 가독성을 즉시 높여줄 간단한 한가지 트릭"이라는 제목을 사용하겠다. Back-tick은 당신의 친구입니다. 템플릿 리터럴은 작은 따옴표( ' )나 따옴표( " ) 대신 back-tick( ` )을 사용한다. console.log(`Hello World`..

JavaScript: Learn Regular Expressions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 자바스크립트에서 정규표현식은 문자열에서 문자조합과 대응시키기 위해 사용되는 객체이다. 첫번째 정규표현식 만들기 정규표현식을 만드는 방법에는 2가지가 있다. 하나는 정규표현식 리터럴 방식이고 하나는 정규표현식 생성자 함수를 사용하는 것이다. // Regular Expression Literal - Uses slashes ( / ) to enclose var option1 = /c..

JavaScript For Beginners: the 'new' operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 4가지 법칙 new 예악어가 무엇인지 이해하는 것은 new 예악어를 이해하는 가장 간단한 방법이다. new 예악어를 사용할 때, 4가지의 일들이 발생한다. 새로운 빈 객체를 만들어낸다. this를 새로 만들어진 객체에 bind한다. 새로 만들어진 객체에 "__proto__"라 불리는 property를 더한다. 이것은 constructor 함수의 prototype 객체를 의미한다. retur..

JavaScript: What the heck is an Immediately-Invoked Function Expression? 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. Function Declaration vs. Function Expression 함수 선언식 vs 함수 표현식 IIFE가 얼마나 유용한지 배우기에 앞서 우리는 함수 선언식과 표현식이 어떤 것들인지 이해해야한다. 우선 전형적인 함수 선언식에 대해 배워볼 것이다. **FUNCTION DECLARATION** function doSomething..

JavaScript: Arrow Functions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. Benefit #1 : Shorter Syntax 화살표 함수의 첫번째 이점은 문법을 간결하게 할 수 있다. 우선 일반인 함수를 한번 보자. function funcName(params) { return params + 2; } funcName(2); // 4 위 코드는 화살표 함수를 만들어야 하는 2가지 이유 중 한 가지에 대해 잘 보여준다. : 문법을 짧게 할 수 있다. 화살표 함수를 사용하..

The Keyword ‘This’ for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. This 는 다소 복잡한 개념이지만, 이제부터 설명할 5가지 일반적인 법칙을 이해한다면 this 를 어떻게 사용할지, 언제 사용할 지 결정하는데 도움이 될 것이다. 물론 이 법칙들이 모든 경우를 설명할 수 있는 것은 아니지만 특수한 경우를 제외하면 대부분의 상황에서 도움이될 것이다. #Global Object 크롬 개발자 콘솔을 열고 Console.log(this); 를 입력하면 // Window {...} 가..