Programming language/JavaScript

this

this 실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장된다. 실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장된다. 그 밖에는 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다르다. 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 ㄸ애문에 혼란의 여지가 없거나 많지 않다. 그러나 자바스크립트에서의 this 는 어디서든 사용할 수 있다. 상황에 따라 this 가 바라보는 대상이 달라지는데, 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 엉뚱한 대상을 바라보는 경우도 있다. ! 상황에 따라 달라지는 this 자바스크립트에서는 기본적으로 실행 컨텍스..

호이스팅(Hoisting)

📔호이스팅이란 코드에 선언된 변수 및 함수의 `선언`을 코드 상단으로 끌어올리는 것을 말합니다. 해당변수의 범위에 따라 다르게 수행됩니다. 변수가 함수 내에 있다면, 해당 함수 안의 최상단으로, 변수가 함수 밖에 있다면, 스크립트의 최상단으로 끌어올립니다. 여기서 주의해야 할 점은 변수의 `선언` 부분만 끌어올린다는 것입니다. (변수는 선언 - 초기화 - 할당 의 과정을 거쳐 생성) 📔 변수 호이스팅 var를 쓰지 않기로 한 이유가 여기서 나타납니다. 함수를 선언해서 값을 할당하기 전에 콘솔을 찍어봤는데 에러가 아닌 undefined가 나옵니다. 바로 선언만 됐다는 의미인데 동작 코드는 다음과 같습니다. 선언 부분만 맨 위로 끌어올려지고 값을 할당하지 않았으니 undefined가 나옵니다. 다음 값을 할..

async vs defer (외부 스크립트 파일 불러오기)

📔 외부 스크립트 불러오기 html에 js파일을 불러오는 방법은 아래와 같이 세가지 입니다. 이렇게 기본으로 불러오는 것은 js의 로딩이 끝날 때까지 아무것도 하지 못하게 됩니다. async의 옵션을 주게 되면 js의 로딩에 들어가더라도 html문서의 렌더링을 막지 않습니다. 하지만 만약 js파일이 여러개라면 순서에 상관없이 먼저 다운로드 되는 js파일이 먼저 실행됩니다. (순서X) defer의 옵션을 주게 되면 async와 같이 js의 로딩에서 html의 렌더링을 막지 않습니다. 하지만 모든 js 파일을 다운로드 받아도 바로 로딩되지 않고 html의 렌더링이 끝난 후 순차적으로 로딩이 됩니다. defer를 쓰면 화면에 자바스크립트 실행되기 전에 페이지가 출력되는 점에 유의해야 하고, async를 쓰면 ..

[vue] axios 전역으로 사용하기

📗 axios 전역으로 사용하기 axios 를 사용할 때 필요한 컴포넌트에서만 import 를 해서 사용할 수도 있지만, 사용해야 하는 컴포넌트가 너무 많아진다면 axios를 매번 import 하지 않고 전역으로 사용하면 된다. 🟢 axios 설치 npm install --save axios 🟢 axios 전역으로 설정 - main.js 에서 다음과 같이 추가해 준다. 🟢 axios 사용하기 - 설정한 이름 $axios 앞에 this 를 붙여서 사용

[Vue] Vuex 시작하기 전에...

🚗 ES6+ 에서 Obj를 간결하게 선언 const name = 'deok' const obj1 = { name: name, sayHello: function() { return `Hi my name is ${this.name}` } } const obj2 = { name, sayHello() { return `Hi my name is ${this.name}` } } obj1과 ob2는 완전히 같다. 🚓 객체의 비구조화(destructuring) const student = { name: 'deok', email: 'deok@deok.com', phone: '01012345678' } // 1번 // const name = student.name // const email = student.email /..