map 함수에 객체를 바로 return 하려고 하니 undefined 이 나타나게 되었습니다. 그리하여... 화살표 함수의 비밀을 파헤쳐보기 시작했습니다. map 함수로 간단한 예시를 보여드리겠습니다. let arr = [1,5,412,2,156,2] arr.map(x => {x}) [undefined, undefined, undefined, undefined, undefined, undefined] 화살표 함수 뒤에 리턴값을 불러오게 되면 모든 것이 생략되고 리턴 값만 작성하면 되는데 객체를 불러오면 undefined가 뜹니다. 그 이유는 저 {x} 객체를 함수로 인지해서 return 값이 없기 때문에 그렇다고 합니다. 객체 안에 값을 넣으려면 arr.map(function(x){ return {x} ..
addEventListener 어떤 이벤트를 진행했을 때 함수 내부의 내용을 실행을 요청하는 함수입니다. (event 뜻 : 사건, 행사, 경기 ...) 요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 }); 지정한 요소에 이벤트리스너 함수를 지정하고 이벤트의 종류를 사용자가 실행하면 그 안에 함수가 실행되는 느낌입니다. 이벤트 종류에는 많은 것들이 있는데, (그냥.. 사용하고 싶은 이벤트가 있으면 찾아서 하는 것으로... 뭔가 직접 사용해봐야 알 것 같다) click : 클릭 contextmenu : 마우스 오른쪽 메뉴 선택 이벤트, 키보드 dblclick : 더블클릭 mousedown : 마우스를 눌렀을 때 mouseenter : 마우스가 ..
객체와 배열에서 사용가능한 for in 문을 먼저 알아보도록 해요. for - in 문 배열이나 객체 전체에 반복문을 줄 때 사용하는 문법입니다. const arr = ["coconut", "banana", "pepper", "coriander"]; //첫 번째 방법 for (let i = 0; i < arr.length; i++) { console.log(i); console.log(arr[i]); } //두 번째 방법 for (let i in arr) { console.log(i); console.log(arr[i]); } 첫 번째 방법은 아시다시피 for 구문을 이용하는 방법 입니다. 개인적인 생각으로 for 구문은 조금 더 정밀한 방법으로 반복문을 진행하는 방법이라고 생각이 됩니다. index의 ..
HTML 파일과 자바스크립트 파일이 열리는 과정을 확인하면서 async와 defer의 차이를 확인해봅시다. (드림코딩사랑해요) HTML 파일을 parsing 하는 과정 중 js 파일을 먼저 실행하기 위해서 html 부분에 태그를 넣으면 js 파일이 html파일pasing 중간에 진행된 후 html 파일이 실행됩니다. 이렇게 진행하게 될떄, js 파일이 어마어마하게 크고 복잡하다면 html 파일이 pasing되지 않아서 웹페이지가 보이지 않을 수도 있다는 단점이 있습니다. 그래서 body 밑에 script 파일을 넣어서 html 파일을 다 pasing 하고 js 파일을 오픈하는 방법을 사용하면 웹 페이지는 빨리 열리겠죠? 하지만.... 이것 또한 문제가 있습니다. 어떤 문제일까요... 바로 기본적인 htm..
Class 객체지향 프로그래밍의 핵심입니다. 이 클라스라는 것이 왜 필요하는지 생각을 해보면 백만개의 오브젝트를 만들면 자바스크립트 파일에 너무나도 많은 양의 데이터를 삽입해야합니다. 그래서 큰 틀을 만들고 큰틀에 재료만 바꿔서 데이터를 찍어내는 느낌으로 진행을 하면 작성해야하는 양이 확연히 줄게 되겠죠? 뭐... 롤 케릭터나 자동차의 정보 등 너무 많은 케릭터나 차가 있다면? 이 클라스를 사용하여 정보를 만드는 것이 편하다고 생각합니다. 롤을 좋아하기 때문에 롤 케릭터로 예를 만들어 보겠습니다. (하기에 작성한 유투버의 class 설명은 100번 봐도 유의미합니다. 아주 좋습니다.) const 가렌 = { Q : '침묵', W : '방어' } const 누누 = { Q : '강타', W : '눈덩이 굴..
Scope 변수가 어디까지 쓰일 수 있는지 의 범위를 의미합니다. scope를 알기전에 block이란 중괄호 {} 로 감싸진 것을 block 이라고 합니다. function 의 내부는 하나의 block 입니다. Block 이제 block 의 예제를 보실까요. function getResult() { let result = 10; console.log(result); } console.log(result); 이렇게 진행을 했을 때, 아마 is not defined 가 나타날 것입니다. block 외에서 함수가 선언이 되지 않으면 result의 값은 외부로 노출이 되지 않기 때문에 getResult()를 선언해야만 비로소 result를 알게됩니다. 따라서 getResult()를 한번 선언하고 콘솔을 확인하게..
