Mo's Develog

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

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

1~4. 다음 코드의 콘솔창 출력결과는 무엇일까요? (문제1) 답은 함수는 잘 실행됩니다. 하지만 함수내부 코드가 이상합니다. let 변수는 특이하게도 Hoisting이 되긴 하지만 undefined라는 값이 할당되지 않습니다. 그래서 출력시 에러를 뿜습니다. let 변수는 hoisting 되지만 var 변수처럼 지동으로 undefined 라는 값을 할당(일명 initialization) 해주지 않습니다. 선언과 할당 사이에 시간차가 있기 때문에 그런 현상이 일어나는 것이고 let 변수는 그래서 쓸 수 없습니다 그래서 그냥 let const 변수는 그래서 엄격하게 쓸 수 있는 변수구나 외우시면 되겠습니다. (문제2) 답은 이번에도 답은 에러입니다. 정확히 말하면 함수가 아닌데요? 라는 에러입니다. 지금 ..

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을 보관하고 관리하는 전역..