본문 바로가기

IT/Javascript

[javascript] var, let, const 차이 결론부터 말하자면, ES6에서는 var보다는 const와 let을 사용해서 좀 더 명확한 코드를 만들어 내는 것을 권장합니다. var 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력됨. var name = 'cho' console.log(name) // cho var name = 'javascript' console.log(name) // javascript 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다. let & const 공통점은 둘다, 변수 재선언이 되지 않.. 더보기
[javscript] ES6 const/let 블록 스코프 var의 변수스코프는 function단위, const/let은 block 단위, const는 상수, let는 변수 function foo() { let a = 1 if (true) { let a = 2 console.log(a) // 2 } console.log(a) // 1 } 템플릿 / 백틱 document.addEventListener('DOMContentLoaded', () => { const you = "Chris", name = "Charles", surname = "Barkley" const tmp = `Hello, ${you}. My name is ${name} ${surname}` const el = document.getElementById("el") el.. 더보기
[javascript] 배열속 원하는 값 찾기(indexOf, includes) 자바스크립트에서 배열속 원하는 값을 찾고싶을때, indexOf 와 includes 를 이용하여 쉽게 찾을 수 있습니다. indexOf 는 찾은 값의 첫번째 원소의 위치를 반환해주며, 없을경우 -1을 리턴합니다. includes 는 true / false 로 있다, 없다를 직관적으로 리턴해줍니다. indexOfvar a = [1,2,3,4,5,1,2,3] a.indexOf(3) //2 a.indexOf(6) //-1 3이라는 원소는 배열의 2,7 번째 두곳에 위치해 있지만 첫번째 위치를 리턴합니다. 6은 배열에 존재하지 않기때문에 -1을 리턴하는것을 알 수 있습니다. includesvar a = [1,2,3,4,5,1,2,3] a.includes(3) //true a.includes(6) //falsein.. 더보기
[javascript] 배열 추가, 삭제 자바스크립트 배열 추가, 삭제 함수배열 추가 : Array.push(), Array.unshift(), Array.splice()배열 삭제 : Array.pop(), Array.shift(), Array.splice() 배열 요소를 추가하는 방법var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'c', 'd'] arr.push('d'); // 배열의 끝에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['d', 'a', 'b', 'c'] arr.unshift('d'); // 배열의 앞쪽에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'd', 'c'] arr.splice(2, 0, 'd');.. 더보기
[javascript] 이벤트 추가 및 제거 자바스크립트 이벤트 추가 및 제거하기(addEventListener, removeEventListener) 자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수 있으며 이 때 removeEventListener()를 사용합니다. element.removeEventListener('이벤트타입', 이벤트 콜백 함수) 이때 추가된 이벤트를 제거하기 위해 아래와 같이 세 가지 값이 필요합니다. 1. 제거할 엘리먼트 요소 2. click, keypress 등의 이벤트 타입 3. 제거할 이벤트 콜백 함수 이벤트 추가하기(addEventListener)그럼 아래에서 간단한 이벤트를 추가해보고 다시 이를 제거하는 예제를 만들어보겠습니다. Hello 이제 위 버튼에 클릭.. 더보기
[javascript] 이벤트 버블링과 캡처링 출처: ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info 버블링버블링(bubbling)의 원리는 간단합니다.한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. FORM DIV P 가장 안쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.에 할당된 onclick 핸들러가 동작합니다.바깥의 에 할당된 핸들러가 동작합니다.그 바깥의 에 할당된 핸들러가 동작합니다.. 더보기
eslint 자동완성 이슈 자동완성 기능이 안되있는 상태에서 quasar framework을 켰을때, blog.uniqbuild.co.kr/?p=559 Strings must use singlequote 에러 Strings must use singlequote 에러 Prerequisite vue 2.8.2. webpack 2.6.1 eslint 3.19.0 문제점 Vuejs를 사용하면서 라이브러리를 사용하고 싶을 때가 생깁니다. 제 경우는 table 관련 라이브러리를 원해서 찾아보던 중, blog.uniqbuild.co.kr 위와같은 유사한 에러가 발생했다. 원인은 eslintrc.js 파일. eslintrc.js 파일에서 'eslint:recommended', 살리고 standard 죽이고, 'import/named': 'err.. 더보기
자바스크립트 코딩 테스트에서 가장 많이하는 실수들 자바스크립트 코딩 테스트에서 가장 많이하는 실수들 https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%94%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%97%90%EC%84%9C-%EA%B0%80%EC%9E%A5-%EB%A7%8E%EC%9D%B4%ED%95%98%EB%8A%94-%EC%8B%A4%EC%88%98%EB%93%A4-a10df2c884c 더보기