🔤 Language/🟨 JavaScript

JS. ES6 Classes

ES6 Classes Class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화하는데 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다. const imae = { name: 'imae', normal: function () { console.log(this.name) }, arrow: () => { console.log(this.name) } } imae.normal() imae.arrow() 실행 결과 imae undefined ES6에서는 클래스 문법을 흉내내는 것이 가능하다. prototype을 쓰는 대신 class를 사용하여 생성자 함수를 만들 수 있다. function User(first, l..

JS. this

this 일반(Normal) 함수는 호출 위치에서 따라 this 정의! 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의! const imae = { name: 'Imae', normal: function () { console.log(this.name) }, arrow: () => { console.log(this.name) } } imae.normal() imae.arrow() 실행 결과 Imae undefined 또 다른 위치에서 amy라는 변수를 만들어내서 객체 데이터를 할당한다. imae.normal, imae.arrow 등 위에 있던 데이터를 amy에 할당되는 구조이다. const amy = { name: 'Amy', normal: imae.normal, arrow: ima..

JS. 생성자 함수(prototype)

생성자 함수(prototype) 생성자 함수와 일반 함수의 기술적 차이는 없다. 하지만 생성자 함수는 두 가지 관례를 따라야 한다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 'new' 연산자를 붙여준다. 일반적인 함수의 모습이다. 또한 리터럴 방식으로 코드가 작성된다. 리터럴 방식 자바스크립트는 리터럴 표기법을 이용해, 필요한 요소들을 열거하는 것 만으로 객체를 만들 수 있다. 이러한 표기법은 JSON에도 영감을 주었다. { }, [ ], " " 등을 예로 들 수 있다. const imae = { firstName: 'Imae', lastName: 'Kwak', getFullName: function () { return `${this.firstName} ${this.lastName}` } } ..

JS. 콜백(CallBack)

콜백(CallBack) 함수의 인수로 사용되는 함수 ex. setTimeout(함수, 시간) 콜백 활용 'imae!'라는 문장을 출력하고 성공했다는 의미에서 'Done!'을 출력할 것인데 setTimeout 함수는 3초후에 실행되기 때문에 'Done!'이 먼저 나온다. 이 문제를 해결하기 위해서는 어떻게 해야할까? function timeout (callback) { setTimeout(() => { console.log('imae!') // imae! callback() }, 3000) // 1000ms } timeout(() => { console.log('Done!') // Done! }) timeout이라는 함수 안에 callback이라는 변수를 선언하고 setTimeout 함수 안에 callba..

JS. 타이머 함수

타이머 함수 일정 시간이 지난 후 특정 코드 또는 함수가 실행될 수 있도록 해주는 함수와 일정 시간마다 함수가 실행될 수 있도록 해주는 함수를 말한다. 타이머 함수의 종류 setTimeout(함수, 시간): 일정 시간 후 함수 실행 const timer = setTimeout(() => { console.log('imae!') // imae! }, 3000) // 1000ms 3초 후에 'imae!'가 출력된다. ms 단위를 사용한다. clearTimeout(): 설정된 Timeout 함수를 종료 const h1El = document.querySelector('h1') h1El.addEventListener('click', () => { clearTimeout(timer) }) setTimeout 함수..

JS. 호이스팅

호이스팅(Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 기존의 작성 방식을 적용하면 코드를 위에서 아래로 읽는데 오류가 발생하지 않나? 함수 선언식을 사용하면 오류가 발생하지 않는다. const a = 7 double() // 14 function double () { console.log(a * 2) } 함수 선언을 밑에 작성해도 함수 호출이 가능하다. 함수에는 복잡한 내용이 있다. 함수만 따로 지정해서 진행 과정을 해석하기 좋도록 호이스팅을 사용하는 것이다. 전체 코드의 최하단에 놓으면 가독성이 좋아진다.

JS. IIFE, 즉시실행함수

IIFE, 즉시실행함수 특정한 함수를 즉시 실행할 수 있다. double() 뒤에 세미콜론(;)을 붙이지 않으면 오류가 난다. const a = 7; function double () { console.log(a * 2) }; double(); (function () { console.log(a * 2) })(); 일반적인 함수는 위와 같은 방법으로 작성한다. 하지만 즉시실행함수는 소괄호(())로 묶어서 작성한다. 즉시실행함수 작성 방법 // 방법 1 (function () { console.log(a * 2) })(); // 방법 2 (function () { console.log(a * 2) }()); 방법 1과 방법 2가 있다. 권장되는 방법은 방법 2이다.

JS. 화살표함수

JS 화살표함수와 기존 함수의 차이점 // 화살표 함수 // () => {} vs function () {} const double = function (x) { return x * 2 } console.log('double: ', double(7)) // 14 const doubleArrow = (x) => { return x * 2 } console.log('doubleArrow: ', doubleArrow(7)) // 14 화살표함수와 차이점은 function 키워드 대신 '=>' 를 사용한다. 가장 큰 차이점은 축약형으로 조금씩 줄여줄 수 있다. 화살표 함수를 줄이면 어떻게 줄이는가? const doubleArrow = x => x * 2 console.log('doubleArrow: ', dou..

JS. 함수

함수 선언과 호출 // 함수 선언 function sum (a, b) { // 실행 코드 console.log(a + b) } // 함수 호출 sum (1, 2) 함수란 특정 동작(기능)을 수행하는 일부 코드의 집합이다. 익명 함수와 기명 함수 function () {} // 익명 함수 function sum () {} // 기명 함수 특정한 이름이 있는 함수를 기명 함수라고 한다. 그와 반대로 특정한 이름이 없는 함수는 익명 함수이다. 기명 함수와 같은 경우는 함수 선언식, 익명 함수는 함수 표현식이라고 한다. 함수 표현 const a = function () {} 함수를 변수로 선언하여 표기하는 것은 함수 표현이라고 한다. 익명 함수의 경우, 함수 호출을 하기 위해서는 변수로 선언해주어야 한다. 반환..

JS. var, let, const, 형변환

🌐 JS 변수 유효범위 // 변수 유효범위 // var, let, const console.log('변수 유효범위 var let const') // let , const는 블럭 내에서 유효 // var은 되도록 사용 x function scope () { if (true) { var a = 123 }; console.log(a) } scope() // 123 🌐 JS 형변환 // 형변환 console.log('형변환') // Truthy (참같은 값) // true, {}, [], 1, 2, 'false', -12, '-3.14', ... // Falsy (거짓같은 값) // false, '', null, undefined, 0, -0, NaN const q = 1 const w = '1' console..