도룩이의 개발일기

화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..

Document document도 윈도우 객체의 속성이기 때문에 window.document 이렇게 접근해야합니다. 하지만 window는 생략 가능(전역 객체)하기 때문에 그냥 document로 접근하면 되겠습니다. 역시 콘솔에 document하고 점을 쳐보면 수 많은 속성과 메소드들을 보실 수 있습니다. window 객체 때 했던 것처럼 document 객체에서도 자주 쓰이는 것만 집어드리겠습니다. document는 html에 관한 것들을 담당하는 객체이니만큼 대부분의 것들이 태그를 선택하고 조작하는 데 사용됩니다. document.getElementById(아이디) html에서 해당 아이디를 가진 태그를 선택합니다. document.getElementById('app-root'); // ... doc..

1. 대표적인 내장 함수 ( console.log ) 예시 1. console.log(console)한 결과. 이 때 console은 Object이고, log는 함수이다. t { log: [Function], error: [Function], info: [Function], warn: [Function], dir: [Function], time: [Function], timeEnd: [Function], trace: [Function], assert: [Function], clear: [Function], stdout: { [Function] clear: [Function] }, _times: {} ... } 예시 2. 함수 호출하기. 이 때 `(백틱)을 사용하여 깔끔한 문장을 구사하였다. functio..

1. Array(배열) 1) 배열에 데이터를 보관하고 조작하는 기본 방법 const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; console.log(daysOfWeek); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ] console.log(daysOfWeek[2]); // Wed console.log(daysOfWeek[100]); // undefined //배열 선언, new Array()로도 가능하지만, []가 간단하고 성능 상 차이도 없어서 []를 많이 쓴다. var a = []; //배열 안에는 함수, 배열, 객체 등 모든 타입이 다 들어갈 수 있다. var a = [1,2,..

Javascript 데이터 타입 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다. JavaScript의 데이터 타입 종류 원시 타입 (Primitive data type) : 원시 타입의 값은 변경 불가능한 값 (immutable value)이며 pass-by-value(값에 의한 전달) 이다. Number String Boolean null undefined symbol (ES6에서 추가됨) 객체 타입 (object / reference type) * object 1. Number (숫자형) 프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일하다. 우리는 숫자를 이용하여 덧셈(+)/뺄셈(-)/곱셈(*)/나눗셈(/..

1. var (변수 재선언 가능) var variable = '변수선언함'; console.log(variable); //변수선언함 var variable = '또 변수선언함'; console.log(variable); //또 변수선언함 변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있습니다. 이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있습니다. 이를 보완하기 위해 ES6부터 let, const가 추가되었습니다. 2. let (변수 재선언 불가능, 변수 재할당 가능) let variable = '변수선언함'; console.log(variable); //변수선..

Variable (변수) 란? 변경되거나 변경될 수 있는 것. 예시 : a = 5 a는 빈 상자와 같다. 하나로 쓰이면 의미가 없지만 그 안에 무엇을 담느냐에 따라 우유상자가 될 수 있고 주스상자가 될 수도 있다. 우리는 빈 상자에 자유롭게 우유를 담기도, 주스를 담기도 한다. 이처럼 변경되거나 변경될 가능성이 있는 것. 이것을 변수라고 한다. JS 변수 기본문법 : 1. 문법은 한 줄에 하나씩 서술한다. 2. 문법이 끝나면 ; 부호를 넣어준다. 3. 변수의 시작에 let을 넣는다. (변수의 종류가 두가지라 이를 구분하기 위해 사용한다.) 변수가 작용되는 순서 : 1.만든다. 2.초기화한다. 3.사용한다 필요할 때 1,2는 동시에 할 수 있다. ex) a(1번) = 221(2번) b = a(3번) - 5..

Vanilla JS VanillaJS는 JavaScript의 한 종류로, 브라우저를 통해 제공된 JavaScript이다. Library나 Framework가 없는 JavaScript이다. (화장 없는 JavaScript, 도움 없는 JavaScript, 날 것의 JavaScript이다. Library, Framework는 메이크업, 화장같은 존재이다) Vanilla JS를 배워야 하는 이유 VanillaJS는 못생겼지만 처음부터 배워두는게 좋다고 생각한다. VanillaJS를 쓰는게 능숙해질 때 다음으로 넘어가는 것을 추천한다. 이유는 뭘까? JavaScript에 재능있는 사람을 찾을 수가 없다. React나 Jquery를 아는 사람들을 찾기 쉽고 Library, Framework를 아는 사람들을 찾기 ..