💡 화살표 함수(Arrow Function)란 화살표 함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한 표현으로 간단하게 사용 가능하다. // 일반함수 function fun() { // ... } // 화살표 함수 const arrFun = () => { // ... } 💡 일반 함수와 화살표 함수의 차이 1️⃣ this ✅ 일반함수 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this 라는 객체가 추가된다. ▪️ 함수 실행시에는 전역(window) 객체를 가르킨다. ▪️ 메소드 실행시에는 메소드를 소유하고 있는 객체를 가르킨다. ▪️ 생성자 실행시에는 새롭게 만들어진 객체를 가르킨다. 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 ..
📌 자바 스크립트에 지원하고 있는 자료형 ✅ 기본 자료형 (Primitive) ◾ boolean : 논리적인 요소. true와 false값이 있다. ◾ null : 빈 값 ◾ undefined : 값을 할당하지 않은 변수가 가지는 값 ◾ numer : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN (숫자가 아님) 값을 포함한다. ◾ string : 문자열 ◾ symbol (ES6에 추가됨) ✅ 객체 자료형 ◾ object 심볼(Symbol)이란, 다른 값과 중복되지 않는 자료형(unique) 이다. 프로그램에서 이름(변수명)의 충돌 없이 사용하기 위해 활용한다. 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 📌 심볼 값 생성 심볼은 전역 함수 Symbol을 사용해서 생성한다. const sy..
1️⃣ for...in for...in 문은 객체의 key를 하나씩 가져온다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3', } for (const key in obj) { console.log(key + ' : ' + obj[key]); } // key1 : value1 // key2 : value2 // key3 : value3 2️⃣ for...of for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set 에서 값을 하나씩 가져온다. 객체는 iterable이 아니기 때문에 사용할 수 없다. const obj = { key1: 'value1', key2: 'value2', key..
📌 예제코드 HTML 삽입 미리보기할 수 없는 소스 📌 코드 높이를 조절할 textarea 요소를 준비해줍니다. textarea { width: 240px; height: 30px; } textarea의 기본 Height를 지정해주고, 이 크기는 JavaScript 코드에서도 사용하게 됩니다. const DEFAULT_HEIGHT = 30; // textarea 기본 height const $textarea = document.querySelector('#textarea'); CSS에서 지정한 Height를 'DEFAULT_HEIGHT' 변수에 저장시켜줍니다. document.querySelector() 선택자로 textarea 요소를 가져와줍니다. // Textarea 자동 높이 조절 $textarea..
