Programming/JavaScript 썸네일형 리스트형 [JavaScript] This값이 판별되는 4가지 경우 함수 내부에 위치한 this의 값은 함수의 실행문에 의해 결정되고 함수 밖(전역 공간)에 위치한 this값은 전역객체가 된다. 함수의 실행문에 의해 this의 값이 결정되는 4가지의 경우와 그 특징들을 알아보자. *전역객체는 브라우저에서는 window, node.js환경에서는 global이다. 우선 전역 공간에서의 this의 값부터 살퍼보자. 아래 예시에 나온 모든 this값은 모두 전역공간에 정의되어있으므로 window이다. 특히 24, 25번 코드에 있는 객체 내부에 선언된 this값에 주의하자. 함수 내부에 포함되어있지 않기 때문에 this의 값은 전역 객체, 즉 window가 된다. 단, 이러한 this사용은 매우 좋지 않다. this는 함수 내부에서 실행 방식에 따라 다른 값을 가지며 코드의 재.. 더보기 [javaScript] map 메소드 자바스크립트의 객체를 간편하게 다룰 수 있게 해주는 map 메소드를 알아보고 Object(객체)와의 차이점도 알아보자. map 메소드 : 배열의 요소 각각을 callback 함수에 넣어 그 결과값으로 새로운 배열을 만들어주는 메소드이다. - map 메소드의 기본적인 문법 array.map( callbackFunction ( currentValue, index, array), thisArg) callbackFunction : 모든 배열의 요소에 실행할 function을 정의한다. callbackFuction은 reurn을 함축적으로 가지고있다. thisArg : callbackFunction 내에서 this로 사용될 값 (이게 몬소리지?) currentValue : 배열 내 현재 값 index : 배열 내.. 더보기 [JavaScript] textContent / innerText / innerHTML JavaScript에서 HTML문서의 요소를 가져오는 방법에는 textContent, innerText, innerHTML가 있다. 각각의 차이점을 알아보고 특정 상황에서 어떤 방법이 가장 좋을지 알아보자. 결론부터 말하자면, 오늘날에는 textContent를 사용하는 것이 더 현명한 방법이다. 그 이유를 알아보자. Hello World 위 코드에서 innerText로 반환되는 값은 "Hello"이고 textContent로 반환되는 값은 "Hello World"이다. This element is strong and has some super fun code! 이제 자바스크립트에서 id값 blog-test를 이용해 요소를 불러왔을 때 어떤 차이점이 있는지 비교해보자. 1. innerHTML document.. 더보기 [JavaScript] var vs. let vs. const 변수명을 효율적이고 올바르게 선언하기 위해서는 전역 변수의 사용을 최소화하여야 한다. 즉, 최대한 변수의 사용 가능한 범위를 최소화 하는 것이 좋다. poiemaweb.com/es6-block-scope#3-var-vs-let-vs-const let, const | PoiemaWeb ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 poiemaweb.com 변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리상의 주소를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명.. 더보기 [JavaScript] 배열(Array) 1. 배열 배열은 다수의 데이터를 묶어서 처리해야 하는 경우에 유용하게 사용된다. 특히 배열과 for문을 같이 활용하면 100개 혹은 10000개 혹은 그 이상의 개수의 데이터들도 단 몇줄로 구현할 수 있게되고 인덱스를 비롯한 배열을 처리하는 여러가지 함수들을 통해 해당 데이터들에 손쉽게 접근하여 활용할 수 있게 된다. 즉 배열을 통해 코드를 훨씬 더 축소하여 효율적으로 사용할 수 있게 된다. - 배열을 선언하는 방법 var arr1 = New Array(); var arr2 = New Array(1, 2, 3); var arr3 = [1, 2, 3]; var arr4 = []; - 배열에 원소를 추가, 제거하는 방법(push, unshift, pop, shift) 배열에 원소를 추가하는 메소드는 두 가.. 더보기 [Javascript] DOM이란? | DOM의 선택자 | DOM tree | node vs element HTML을 위한 프로그래밍 인터페이스인 DOM(Documnet Object Model)에 대해 알아보자. issabmsangare.medium.com/nodes-vs-elements-in-the-dom-1865885d0b9b Nodes vs Elements in the DOM In my early JavaScript learning process, I came across two objects: ‘nodes’ and ‘elements’ which triggered some confusion in my mind. I… issabmsangare.medium.com developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 -.. 더보기 [JavaScript] Jasmine이란? 간단한 예제로 알아보기 BDD 프레임워크의 한 종류인 Jasmine에 대해 알아보고 간단한 예제를 직접 구현해보자. www.dailysmarty.com/posts/jasmine-specs Jasmine Specs introduction.js Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This gu www.dailysmarty.com * 본 포스팅은 위 문서를 .. 더보기 [JavaScript] 객체(Object) 객체 객체는 키와 값으로 이루어진 사전 형태의 데이터타입이다. 배열과 유사하지만 인덱스값(키값)을 문자로 사용할 수 있다는 특징이 있다. - 객체의 생성 객체를 만드는 방법에는 여러가지가 있다. 예를 들어 상품의 가격을 저장하는 객체를 만들어보자. var prices = {'A' : 3000, 'B' : 4000, 'C' : 2500} 'A'는 인덱스값, 즉 key가 되고 3000은 value가 된다. 객체를 만드는 다른 방법 var price = {}; price['A'] = 3000; price['B'] = 4000; price['C'] = 2500; 또 다른 방법 var price = new Object(); price['A'] = 3000; price['B'] = 4000; price['C'] =.. 더보기 이전 1 2 3 다음
