Life and IT

이번 글에서는 호이스팅에 대해 찾아본 것을 정리할 것이다. Hoisting이란 무엇인가? Hoisting(호이스팅)이란, 선언문이 맨 위로 움직이는 자바스크립트(JS)의 표준이 되는 움직임을 말한다. 그렇다면 선언문이란 어디까지를 뜻하는 것일까? var x//

MDN에서 function.prototype.apply()에 대해 공부하면서 폭풍 검색을 하던 중 this에 대해 공부하게 되었다. this는 메소드를 호출한 객체를 담는 속성이다. this를 함수의 이자로 넘기어 this의 값들을 사용하고, 변경할 수 있다는 것이다. 또한 메소드를 호출한 객체가 무엇이냐에 따라 value와 this.value가 같을 수도, 달라질 수도 있다. this가 만들어지는 5가지의 경우를 통해 이해해보려고 한다. 일반 함수에서의 this 중첩 함수에서의 this 이벤트에서의 this 메소드에서의 this 메소드 내부의 중첩 함수에서의 this 1. 일반 함수에서의 this var value = 10; function case1 () { this.value = 11; value ..

불필요한 주석 제거한다. 꼭 필요한 것이 아니라면 주석 달지 않도록 한다! 변수 정의할 때 var 사용 자제한다. const, let이 나온 이후 var은 잘 사용하지 않는다. 함수 안에서, 밖에서 재할당 되는 값인지 생각하고 일관성을 갖자. 변수의 이름을 지을 때, 제 3자가 봐도 쉽게 이해할 수 있도록 작성하자. 변수의 이름이 길어지는 것에 두려워말자! 할당된 변수는 재할당하지 않는다. 코드가 길고 복잡한 경우, 예상치 못한 결과가 발생될 수 있다! class name을 작성할 때, camel case가 아닌 kebab case로 작성한다. 일반적인 컨벤션이라고 한다! 가독성에 신경쓰자. 책을 쓴다고 생각하자! 함수를 빠져나올 때는 return! 함수 안에 for문에서 볼일 다 봤으면(?) retur..

null의 타입이 object인 이유 JS의 값들은 tag와 value의 형태로 표현되었다. 오브젝트의 태그 값은 0이었고, null은 null pointer로 표현되었다. 대부분의 플랫폼에서는 0x00이라는 값이 주어진다(이 형태가 무엇을 의미하는지는 더 알아봐야겠다). 결론적으로 null은 태그 값으로 0을 가지게 되어서 typeof(null)은 object를 반환하는 것이라고 한다. 이에 대한 수정이 ECMAScript에 요청되었지만, 거부되었다고 한다..? 왜일까.. String.prototype.trim() trim() 문자열의 시작과 끝 부분의 공백을 제거하여 반환한다. trimStart() 시작 부분만 제거 trimEnd() 끝 부분만 제거 출처 https://developer.mozilla..

JS에서는 boolean, number, string, null, undefined을 제외하면 모두 객체라는 특징이 있다. 배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다. 1. declaration const arr1 = new Array(); const arr2 = [1,2]; 2. index position const fruits =['a','b']; console.log(fruits); // a, b console.log(fruits[0]);// a | 대괄호 안에 숫자를 기입하면 이를 index로 인식한다. console.log(fruits[1]);// b console.log(fruits[fruits.length - 1]);//배열..

1. function 함수는 object의 일종이다. JS에서는 타입 정의를 따로 하지 않기 때문에 이것이 숫자인지 문자열인지 난해할 수 있다. 따라서 TS(TypeScript)를 활용하여 정확하게 변수의 데이터타입을 지정해주어야한다. TS활용 예시) function log(x: string): number {} // 함수에 타입을 정하는 방식 일반적인 함수 선언 function log(x){ console.log(x); } ​ 2. parameters primitive parameters: passed by value object parameters: passed by reference function changename(x){ x.name='coder'; } const hty = {name:'hty'..

JS Classes es6에서 소개되었으며, 기존 js에 문법적으로 추가된 것이다(완전히 새로운 것이 아님). 이를 syntactical sugar이라고 한다. 클래스는 붕어빵 기계의 틀과 같다고 할 수 있다. 이 틀에 반죽과 팥이라는 data를 넣었을때, 만들어진 붕어빵은 Object와 같다고 할 수 있다. 즉 클래스를 활용하여 다양한 오브젝트를 만들 수 있는 것이다(단팥, 피자, 초코 붕어빵 등등..). 클래스의 이름은 대문자로 시작하는 규칙이 있다. class Person{ //constructor constructor(name,age){ //field this.name=name; //this:생성된 오브젝트의 name this.age=age; } //methods speak(){ console.l..

1. string concatenation 문자열 연결 문자열과 숫자 연결의 경우 + 연산자를 이용 console.log('my'+'cat'); console.log('1'+2);​ 변수를 출력하는 경우 ( ` ` )안에 위치 console.log(`string literals: 1+2 = ${1 + 2}`); console.log('hatae\'s \nbook');​ ( ' ' )안에 '를 문자열로 입력해야하는 경우 \사용 console.log('hatae\'s \nbook');​ 2. numeric operator 사칙연산 및 거듭제곱(**), 나머지(%)를 활용 console.log(1+1); console.log(2**2);​ 3. increment and decrement operators le..

이번에는 엘리님의 자바스크립트 3번째 강의를 보고 이해한 것을 두서없이 정리해보았다. 변수 타입은 두 가지로 나누어진다. permitive, single item : number, string, boolean, null, undefined, symbol object, box container : function, first class function 첫 번째 타입은 메모리에 바로 저장되는 값으로 값이 바뀔 수 있지만(수정되는 것이 아님), 두 번째 타입은 함수 내에서 할당되는 오브젝트가 변할 수 있다는 차이가 있다. block scope {} 안에서 변수에 값을 할당하면 그 밖에서는 무시됨. global scope let vs var 변수에 값을 할당할 때, 기존에 사용하던 것은 var이었다고한다. va..

main.js와 html 구현을 효과적으로 할 수 있는 방법을 공부하여 간략히 내용을 정리하였다. head 아무것도 보여주지 못한 채로 시간만 흐름 body js 의존도가 높은 웹사이트라면, 치명적임 head+async async는 boolean값으로, html을 파싱 하면서 병렬로 함께 실행되게 함. main.js가 모두 다운로드되면 이때 html 파싱을 멈추고 js파일을 실행한 뒤 다시 html 파싱 하는 방식. 이로써 시간 단축의 이점이 있음. head+defer async과 비슷하지만 html이 모두 구현된 이후에 다운로드된 main.js를 실행하는 방식. 가장 빠름. 그리고 자바스크립트 코딩 시, 'use strict'을 정의하면 상당한 오류들을 예방할 수 있다고한다. 출처 : 드림코딩 by 엘리