공부노트/JavaScript 9

JavaScript - 화살표 함수(Arrow function)

화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다. // 일반 함수 var foo = function () { console.log("foo") }; // foo // 화살표 함수 var bar = () => console.log("bar"); // bar 1. 화살표 함수의 기본문법 // 매개변수가 없는 경우 var foo = () => console.log('bar'); foo(); // bar // 매개변수가 하나인 경우 var foo = x => x; foo('bar'); // bar // 매개변수가 여려개인 경우 var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{..

[JavaScript] innerHTML vs innerText vs textContent

비슷비슷하지만 서로 다른 세 가지 속성 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다. innerHTML vs innerText vs textContent 눈으로 쉽게 확인 할 수 있도록 예시로 만들어 보았습니다. 1. innerHTML innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. 위 예제에서 'innerHTML' 버튼을 클릭하면, div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다. 사용자가 브라우저에서 div의 내용을 Ctrl+C하여 클립보드에 복사한 내용을 가져온다고 생각하면 이해하기 쉽습니다. 2. innerText innerText는 'Elemen..

[JavaScript] foreach와 for in , for of 반복문

foreach foreach 반복문은 오직 " Array " 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다. let arr1 = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); //: item, item2, item3 for …in 반복문 for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습..

[JavaScript] Arrow Function(화살표 함수)

Arrow 함수 - 화살표 함수는 기존에 있던 function의 익명 선언 방식을 축약한 것이다. - 화살표 함수는 익명 함수이며 사용할 경우는 두 가지 경우가 있는데 하나는 단 한번만 사용하는 콜백함수에서 사용되거나 변수에 할당하여 사용할 경우 두가지 케이스가 존재한다. - 화살표 함수를 축약하는 방식은 상황에 따라 여러가지 방법으로 축약이 가능하며 각 상황에 맞추어 축약하지 않을 경우 에러가 발생한다. 1) 화살표 함수(Arrow function)으로 변환방법 및 법칙 1-0. 기본형 const funcA = function(one, two){ return one + two; } console.log(funcA(2,3)); 1-1. " function " 을 생략하고 " => " 로 간단하게 대체가능..

[JavaScript] This (공식화)

This 태그 - this 키워드는 자기 자신을 가리키고자 할 때 쓰이는 키워드 - 자기 자신이라 함은 현재 위치에서 바인딩 즉 연결되는 바로 위 상위 객체를 의미한다. - 하지만 this의 위치가 어디냐에 따라 바인딩 되는 곳이 달라지므로 this의 원리를 이해하고 쓰기보단 그냥 어디에 this가 쓰였을 때 여기를 가리킨다 라는 공식처럼 외우는 것이 편하다. (고 하여 다른 게시글이나 자료를 통해 이해해보려고도 하였으나 역시 쉽지 않아 수학에서도 종종 이런 경우가 있었기 에 그 방법으로 한번 해보려합니다.) 대표적인 this 위치에 대한 바인딩되는 객체는 다음 아래와 같다. 1. 아무것도 없는 단순 로직 상에서의 this는 최상위 객체인 window를 가르킨다. 2. 함수(function) 2-1. 일..

[JavaScript] DataType(데이터 타입) 정리

1. Number : typeof instance === "number" 숫자를 표현하거나 산술 연산을 할 경우 필요한 데이터 타입 기본적으로 +(더하기), -(빼기), *(곱하기), /(나누기) 등의 산술 연산이 가능하며 Math라는 내장 객체를 활용하여 수학함수를 이용한 결과를 얻을 수 있다. 명세에 따르면 숫자의 범위는 -(2^53-1)~(2^53-1) 까지로 명시되어 있으나 사실상 표현되는 숫자는 여러 라이브러리의 사용으로 인해 무한대로 증폭도 가능하다. 정수만을 표현하거나 실수만을 표현하기 위한 자료형은 따로 존재하지 않으며 전부 Number 형으로 통일된다. 9진수나 16진수의 형태의 자료형도 표현이 가능하다. -> F12 를 눌러 Console 창에서 Result 확인 2. Boolean :..

[JavaScript] 자바스크립트 데이터 화면 및 출력

자바스크립트 데이터 화면 및 출력 내용 변경 *● document.write( ) * : ()안에 것을 화면에 출력시키는 method ●w**indow.alert() ** : 경고(알림)창을 띄워 ()안의 것을 출력시키는 method ●*innerHTML=" " * : 예를 가지고 이해하는 것이 빠르다. 예를 들어 HTML로 [ 피카츄 ]이라는 콘텐츠를 화면에 출력하였다. 이 HTML 요소에 접근하여 [ 피카츄 ]을 [ 라이츄 ]으로 바꿔 출력하게 만들려면 이 innerHTML=" " **속성을 사용해야 한다. 그리고 HTML 요소에 접근하려면document.getElementById**메서드를 함께 사용한다. 기본의 피카츄를 출력하는 HTML 요소의 id인 "pikachu"로 접근하여 **innerHT..