Mo's Develog

ES6 Spread Operator 라는 문법을 알아봅시다 그냥 마침표를 연달아서 3개... 찍으시면 그게 spread operator라는 문법입니다. 한글로는 펼침연산자이렇게 번역가능한데 무슨 역할을 하냐면 아주 쉽게 설명하자면 "괄호제거 해주는 연산자" 입니다. Array에 붙여보도록 합시다. 그럼 어레이라는 array에 붙어있던 괄호를 제거해줍니다. ▲ 3번줄처럼 spread operator를 붙여서 출력해보시면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력됩니다. 이게 spread operator의 기능 끝입니다. 동작원리는 쉬워요. 문자에 붙이면 문자에 붙은 괄호를 제거해줍니다. 괄호가 어딨냐고요? 실은 문자도 array 자료형과 매우 비슷합니다. 안보이는 대괄호가 쳐져있다고 보시..

자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법입니다. 따옴표 대신 backquote, backtick 이라는 `요런` 기호를 사용해서 문자를 만드시면 되는데 (키보드 물결기호 밑에 있습니다) 장점이 뭔지 알아보도록 합시다. 1. 문자 중간 엔터키 입력이 가능합니다. 자바스크립트 문자열은 문자 중간에 엔터키치시면 안됩니다. 하지만 백틱으로 문자를 만드시면 엔터키가 자유롭게 가능합니다. 2. 문자 중간에 변수를 집어넣을 때 편리합니다. 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야합니다. 하지만 백틱으로 문자를 만드시면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있습니다. 그래서 자바스크립트 문자로 HTML을 작성하실 때도 유용합니다. ..

ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했습니다. arrow function 이라는 문법인데 이걸 이용하시면 함수를 만들 수 있습니다. 그냥 기존 function () {} 이게 있는데 왜 새로 추가했냐고요? 지금부터 알아보도록 합시다. Arrow function 문법 자바스크립트에선 함수를 이런식으로 만들어서 사용합니다. 함수는 (1) 또는 (2)처럼 만들고 함수(); 이렇게 사용합니다. 근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있습니다. function이라는 길고 복잡한 키워드 대신에 => 이런 예쁜 화살표를 사용해서 함수를 만들어내는 신문법입니다. 그냥 그런게 있구나 하고 외워가시면 되겠습니다 . 근데 외우기 전에 이 문법의 용도를 아는게 ..

개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양합니다. 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데 이번 기회에 총정리해봅시다. 1-1. 그냥 쓰거나 함수 안에서 쓰면 this 는 window를 뜻합니다. 그냥 HTML 파일 아무거나 하나 만들고 중간에 태그를 열어서 일단 this라는 키워드를 콘솔창에 출력해보도록 합시다. 그러면 this 키워드는 그냥 window 어쩌구 이런 값이 나옵니다. 비슷하게 일반 함수 내에서 this라는 값을 불러보면 똑같이 this라는 값은 window 라고 출력됩니다. 이것이 this의 첫째 뜻입니다. 그냥 window입니다. Q. window가 뭔가요? A. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역..

let 키워드 15.2.3 변수 호이스팅 var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 다음 예제를 보자. 이처럼 let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생한다. var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화단계"가 한번에 진행된다. 즉, 선언단계에서 스코프(실행 컨텍스트의 렉시컬환경(Lexical Environment))에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 따라서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하..

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, boolean, null, undefined, symbol, 객체 타입)은 크게 원시타입(primitive type)과 객체타입(object/reference type)으로 구분할 수 있다. 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는 무엇일까? 원시 타입과 객체 타입은 근본적으로 다르다는 의미일 것이다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 개체는 변경 가능한 값(mutable value)이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를..

10.5 프로퍼티 접근 프로퍼티에 접근하는 방법은 다음과 같이 두 가지다. 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation) 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation) 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 JS에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다. 마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다. 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근 연산자의 내부에는 프로퍼티 키를 지정한다. 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반..

mousedown 및 mouseup이벤트(scale 및 색상변경) mousedown 이벤트(위치이동) mouseover 및 mouseout이벤트 테이블에 적용 번호 제목 작성자 1 제목1입니다 작성자1 2 제목2입니다 작성자2 3 제목3입니다 작성자3 이미지에 적용 ▲현재 body상태 window.addEventListener('DOMContentLoaded',function(){ var legend = document.querySelector('#title'); var div1 = document.querySelector('fieldset:nth-child(1) > div'); var div2 = document.querySelector('fieldset:nth-child(2) > div'); var ..

onfocus란? : input창의 경우 마우스클릭 또는 키보드 tab키로 focus상태일때, button등은 키보드 tab키로 focus상태일때를 말한다. onblur란? : focus된 상태가 사라졌을 때의 상태를 말한다. focus 및 blur이벤트 focus 및 blur이벤트 예제(HTML5의 속성 이용-IE에서만 적용됨) 아이디 비밀번호 focus 및 blur이벤트 예제(자바스크립트로 구현) 아이디 비밀번호 ▲ 현재 body의 상태 ▲ 첫번째 input창에 focus이벤트가 발생 시 멘트와 focus이벤트를 잃었을 때의 멘트이다. 이는 각각의 태그에 on이벤트처리를 통해 구현했다. 두번째 fieldset의 내용은 우리가 placeholder로 input창을 만들었을 때의 상태이다. 세번째 fie..

key이벤트 테스트 keydown: keyup: keypress: 주민번호 - ▲현재 body의 상태 keydown : 키보드의 모든키를 눌렀을 때 발생하는 이벤트 keyup : 키보드의 모든키를 눌렀다 땔 때 발생하는 이벤트 keypress : 영문자와 숫자 그리고 스페이바를 누를 때만 이벤트가 발생. 그 외의 키는 눌러도 이벤트발생 안함 window.addEventListener('DOMContentLoaded',function(){ var input=document.querySelector('input'); input.onkeydown=function(e){ console.log('keydown이벤트 발생'); console.log(e.type);//keydown console.log('e.key:..