본문 바로가기

FRONTEND20

[Javascript] This 정리 This Javascript에서 '나 자신' 이라는 뜻이다. 어떤 상황인지에 따라서 '나 자신'은 계속해서 바뀌고 This가 무엇인지에 따라서 의미(값)도 바뀐다. var myName = 'window name'; function log() { console.log(this.myName); } var obj = { myName: 'jasn', logName: log, }; log(); // undefined obj.logName(); // jasn 바닐라코딩 영상을 보면서 this를 정리해봤는데 처음부터 막힌 부분은 vscode에서 node를 이용해서 출력해보니 log(); 를 실행했을 때 'window name'이 아니라 계속 undefined가 나오는 것이었다. 이유를 찾아보니 node와 웹에서 전역.. 2021. 5. 2.
[Javascript] primitive type(기본 타입) Varaibale(변수) 변수란 변할 수 있는 값을 나타내는 말이다. 어플리케이션을 실행하게 되면 어플리케이션 마다 쓸 수 있는 메모리가 할당되어진다. let을 이용해서 myName이라는 변수를 정의하게 되면 하나의 메모리를 가르킬 수 있는 포인터가 생성된다. myName이라는 변수가 가르키는 메모리 어딘가에 변수의 값이 저장된다. 추후 메모리에 다른 값을 변경하여 저장할 수 있다. // let이라는 키워드를 이용해 myName이라는 변수를 선언하고 jasn을 할당 let myName = 'jasn'; console.log(myName); // jasn // myName에 hello라는 새로운 값을 할당하면 myName이 가르키는 메모리에 새로운 값이 저장된다. myName = 'hello!'; cons.. 2021. 5. 1.
[Javascript] async / defer head에 js script 삽입 순서 parsing html -> fetching js -> executing js -> parsing html 설명 browser가 한 줄 한 줄 html을 parsing(분석)을 하다가 태그를 만나면 parsing을 멈추고 server로부터 js를 fetching(가져오다) 하고 excuting(실행) 한다. 단점 js가 크면 웹사이트를 보는 데 까지 많은 시간이 소요된다. body 가장 아래에 js script 삽입 순서 parsing html -> fetching js -> executing js 설명 browser가 html을 다 parsing 한 다음 js를 fetching하고 executing 한다. js를 받기 전에도 사용자가 페이지를 볼 수 있다. 단점 .. 2021. 4. 30.
[Javascript] 배열 추가 / 삭제 정리 (push, unshift, pop, shift, slice, filter, splice, length) 배열 추가 (맨 뒤) - push 배열의 끝에 요소를 추가하고, 배열의 새로운 길이를 반환한다. const arr = ['1', '2', '3']; const count = arr.push('4'); console.log(count); // 4 console.log(arr); // ['1', '2', '3', '4'] arr.push('5', '6', '7'); console.log(arr); // ['1', '2', '3', '4', '5', '6', '7'] Array.prototype.push.apply(arr, ['8', '9', '10']); console.log(arr); // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] 배열 추가 (맨 앞) -.. 2021. 4. 24.
[Javascript] 최대값 / 최소값 구하기 Math.max() / Math.min() Math.max(value1, value2, ...) 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환. Math.min(value1, value2, ...) 주어진 숫자들 중 가장 작은 값을 반환. console.log(Math.max(1,2,3,4,5)); // 5 console.log(Math.min(1,2,3,4,5)); // 1 Math.max.apply(null, arr) / Math.min.apply(null, arr) JavaScript 엔진의 인수 길이 제한을 초과하는 위험을 주의해야 한다. let array = [1, 2, 3, 4, 5]; console.log(Math.max.apply(null,array)); // 5 console.. 2021. 4. 23.
[Javascript] D-day 계산기 index.html Time Until Christmas Eve🎅 26day 05hour 05minute 29second styles.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* Add Reset.css */ body { font-family: sans-serif; } div { width: 100vw; height: 50vh; } div:first-child { background: #bb2528; color: white; font-weight: 600; text-align: center; } h1 { padding: 90px 0px; font-size: 40px; }.. 2021. 4. 23.
[Javascript] Array 중복 값 제거(Remove Array Duplicates) Set 사용 ES6에 도입 된 새로운 데이터 개체이다. 고유 한 값만 저장하고 배열을 전달하면 중복 값이 ​​제거된다. let array = [1, 1, 1, 2, 2, 2, 3, 3]; const set = new Set(array); // Set {1,2,3} // 다시 배열로 변환하는 두 가지 방법 array = [...set]; // [1,2,3] Array.from(new Set(array)); // [1,2,3] filter 사용 제공하는 조건을 통과하는 요소들로 새로운 배열을 만드는 함수. 요소가 통과하면서 true를 반환하면 필터링 된 배열에 포함된다. indexOf 배열에서 제공된 요소에서 찾은 첫 번째 인덱스를 반환. let array = [1, 1, 1, 2, 2, 2, 3, 3]; .. 2021. 4. 22.
[Javascript] Array.sort() 정리 Array.prototype.sort() 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다. 유니코드 값을 따르기에 기본으로 정렬하면 다음과 같이 나온다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] arr.sort(.. 2021. 4. 22.
[Javascript] String.split() 정리 String.prototype.split() String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나누는 Method. const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words[3]); // expected output: "fox" const chars = str.split(''); console.log(chars[8]); // expected output: "k" const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over .. 2021. 4. 22.
[Javascript] Array.join() / Array.fill() / Array.map() Array.prototype.join() 배열의 모든 요소를 연결해 하나의 문자열로 만드는 method. const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); // expected output: "Fire-Air-Water" var a = ['바람', '비', '불']; var myVar1 = a.join(); // myVar1에 '바람,비,불'을 대입 var myVar2 = a.join.. 2021. 4. 21.