본문 바로가기

programming study/JavaScript

 (186)
JavaScript - this 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. JavaScript의 변수 scope JavaScript의 변수 scope는 기본적으로 전역임 JavaScript 변수를 선언하면, window(브라우저 객체)에 생성됨 2. window 객체 브라우저 객체 브라우저에 대한 정보, DOM에 대한 접근을 나타냄 모든 변수, 함수의 최상단에 있음 첫번째 this는 window 객체를 가리킴 consoel.log(this); // window 3. function 선언문 함수 안에서의 this 또한 window를 가리킴 두번째 this 이와같은 혼동을 방지하기 위해서 'use strict'(strict mode) 사용 f..
실행 컨텍스트(2) 본 내용은 10분 테코톡 하루님의 강의를 토대로 작성하였습니다. 1. Outer로 JS 스코프체이닝 이해하기 Outer Outer Enviroment Reference 외부환경 참조 바깥 Lexical Enviroment를 가리킴 식별자 결정 Identifier Resolution 코드에서 변수나 함수의 값을 결정하는 것 Call Stack 안에 동일한 식별자가 여러개일때 JavaScript 엔진이 Outer를 활용해서 의사결정 Lexical Enviroment가 생성되었을 때, 바깥 Lexical Enviroment로 돌아갈 수 있는 Outer를 남김 필요한 경우에, 이전 실행 컨텍스트의 환경 레코드에 저장된 식별자도 참조할 수 있게 됨 JavaScript Engine은 원칙적으로 실행 컨텍스트의 환경..
실행 컨텍스트(1) 본 내용은 10분 테코톡 하루님의 강의를 토대로 작성하였습니다. 1. 실행 컨텍스트란 Execution Context JavaScript 스펙을 위한 메커니즘 JavaScript를 실행시키면 JavaScript Engine은 Call Stack이라는 통에 Global Execution Context를 담음 Global Execution Contextd에는 Record와 Outer가 담겨 있음 임의의 함수 A를 호출하면 함수 A의 Execution Context를 생성해서 Call stack에 담음 이또한 Record와 Outer가 담겨 있음 Call Stack에서는 가장 최근에 추가된 Execution Context만 활성화 됨 함수 A가 종료되면 함수 A의 Execution Context는 사라짐 전역..
console 본 내용은 드림코딩 by 엘리님의 콘솔 로그 제대로 쓰고 있을까? 강의를 토대로 작성하였습니다. console 중요도나 심각성에 따라서 메소드가 있음 1. console.log 데이터를 출력 배열 형태로 여러가지 출력 가능 배포시에는 삭제 성능에 영향 console.log('log'); 2. console.info 특정한 정보를 출력 배포시에는 삭제 console.info('info'); 3. console.warn 경보단계에서 출력 console.warn('warn'); 4. console.error 에러일 때 출력 예상하지 못한 에러, 시스템 에러 console.error('error'); 5. console.assert 거짓일 때만 출력하도록 할 수 있음 console.assert(2 === 3, ..
ES6 Modules 문법 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. import & export 기본 문법 모듈화 기능을 사용 export 다른 파일에서 가져다 사용할 변수, 함수 앞에 export 키워드 붙임 export된 파일은 import로 불러와 사용 가능 export 변수, 함수 import export된 함수 또는 변수를 {}에 선언 파일 경로는 상대 경로 import { 불러올 변수 또는 함수 이름 } from '파일경로'; 2. import & export 예시 // math.js export function sum(a, b) { return a + b; } // app.js import { sum } from './math.js'; conosle.lo..
ES6 - Modules 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. Modules - 자바스크립트 모듈화 방법 ES5 이전에는 모듈화 방법이 없었음 AMD, Commons JS 를 사용 모듈: 특정 기능을 수행하는 한 묶음 재사용성이 뛰어난 기능을 한데 묶음 자바스크립트 모듈 로더 라이브러리(AMD, Commons JS) 기능을 js 언어 자체에서 지원 파일별로 스코프를 가지게 됨 호출되기 전까지는 코드 실행과 동작을 하지 않는 특성 // libs/math.js export function sum(x, y) { return x + y; } export const pi = 3.141593; // main.js import ..
ES6 - Enhanced Object Literals 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. Enhanced Object Literals - 향상된 객체 리터럴 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능 const dictionary = { words: 100, // ES5 lookupA: function() { conosle.log('find words'); }, // ES6 lookupB: function() { console.log('find words'); } } 속성명의 축약 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능 const figures = 10; const dictionary =..
ES6 - Arrow Function 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. Arrow Function - 화살표 함수 함수를 정의할 때 function이라는 키워드를 사용하지 않고 =>로 대체 콜백 함수의 문법을 간결화 사용 문법 // ES5 함수 정의 방식 const sumA = function(a, b) { return a + b; }; // ES6 함수 정의 방식 const sumB = (a, b) => { return a + b; } 사용 예시 콜백을 사용할 때 더 간결한 문법으로 사용할 수 있음 가독성과 웹페이지의 바이트수 를 줄일 수 있음 // ES5 const arrA = ['a', 'b', 'c']; arrA.fo..

티스토리툴바