자바스크립트의 구성
ECMAScript
언어의 저수준에 해당하는 부분을 정의함
문법, 타입, 선언문, 키워드, 예약어, 연산자, 객체
DOM
XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 인터페이스 문서를 표현한 트리 생성, DOM API 통해 노드(HTML) 조작 가능
var buttons = document.getElementsByTags('button');
document.body.removeChild(buttons[0]);BOM
브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스
window, location, navigator, screen, history (쿠키), Ajax 관련 객체 등
HTML5에 표준 명세 제정됨
자바스크립트 개발환경
- 브라우저
- Node.js
패키지 매니저 - npm, Yarn
정적 분석 & 포메터 - ESLint, Prettier
테스트 - Jest, cypress, Storybook
번들러 - webpack, rollup.js, Parcel
프레임워크 - Vue, React, Angular
자바스크립트 문법
변수선언
- var
식별자 이름으로 사용할 수 없음 - 식별자
myVariable
함수, 프로퍼티, 함수의 매개변수 이름
카멜 케이스 표기를 권장 - 값 할당
ECMAScript는 느슨한 변수 타입 사용
var myVariable = 1000; // 숫자 타입 값 할당
myVariable = 'training'; // 문자열 타입 값 할당
//(???) 에러 안남!데이터 타입
변수의 데이터 타입을 확인하는 용도
문자열로 데이터 타입 반환
기본 데이터 타입
- undefined : 변수를 선언만 하고 초기화하지 않았을 때 할당되는 값
- null : 값 : null, 예외적으로 typeof로 타입을 확인하면 object가 반환됨
undefined vs null
Undefined는 정의되지 않음, Null은 빈 값
- number : 부동소수형, 정수형 2가지가 존재
- number 타입 값 - Infinity : 무한대
var maxVal = Number.MAX_VALUE;
var minVal = Number.MIN_VALUE;
var infinityVal = maxVal * 2;
var negInfinityVal = -infinityVal;- number 타입 값 - NaN
숫자가 아님(Not a Number) 을 의미
숫자 반환을 예상하고 조작한 값이 잘못되었을 때 반환되는 값
어떤 값과도 일치하지 않음 - Boolean
- String
참조 타입
- 객체
- 특정 참조 타입의 인스턴스
- new 연산자를 사용해 생성자의 인스턴스를 생성
- 클래스와 다름
- 데이터와 기능의 집합
- 키(key) - 값(value) 쌍을 순서 없이 저장
- Object 타입
- 객체의 키는 문자열 및 심볼 타입만 허용, 값은 모든 타입 허용
var obj = new Object();
obj.name = 'tigger';
obj['age'] = 10;
typeof obj // "object"
obj // {name: "tigger", age: 10}
obj.name // "tigger"
obj['age'] // 10- 객체 리터럴
- 중괄호({})를 사용해 객체 생성
var person = {
name: 'tigger',
age: 10,
isDeveloper: true
};- Array 타입
var arr = new Array('foo', 123);
typeof arr // "object"
arr // ["foo", 123]
arr[1]; // 123
arr.length; // 2
arr.push(true); // ["foo", 123, ture]- 배열 리터럴
var arr = [];
var obj = {};
var total = ['foo', 123, arr, obj];- 유사 배열
- 배열은 아니지만 length와 인덱스(arr[3])로 값을 참조할 수 있는 객체
- DOM API getElementsByClassName()의 반환 값
- arguments 객체
- 문자열
var buttons = document.getElementsByTagName('button');
buttons.pop(); // Uncaught TypeError: buttons.pop is not a function
# [].slice.call() 사용 - 유사배열을 배열로 만듦
var btns = [].slice.call(buttons);
btns.pop(); // 잘 동작 함!- function 타입
function say(message) {
return message;
}
say('hello'); // 'hello'
typeof say; // 'function'- 그 외 참조타입
- Date 타입
- RegExp 타입 : 정규 표현식 생성 시 사용
var pattern1 = new RegExp('training', 'g');
var pattern2 = /training/g; // 리터럴 사용
pattern1.test('js-training'); // true
pattern2.exec('js-training'); // [...]- 동적 프로퍼티
- 객체 타입의 속성은 어떤 값으로든 변경 가능
// 기본 데이터 타입
// 원시타입에 속성을 추가하려고 하면 무시됨
var person = 'tigger';
person.age = 20;
console.log(person.age); // undefined
// 참조 타입
// 참조타입에 속성을 추가하려고 하면 추가됨
var person = {};
person.age = 20;
console.log(person.age); // 20
person.age = 10;
console.log(person.age); // 10
delete person.age;
console.log(person.age); // undefined표현식과 연산자
비교연산자-동등비교
- 피연산자들의 타입이 서로 다르면 같은 타입으로 변경 후 일치성을 비교 : 암시적인 타입 변환(Type Casting)
1 == 1 // true
'1' == 1 // true : Number('1') == 1
1 == '1' // true
0 == false // true : Boolean(0) == false
0 == null // false : 0 == Number(null)
0 == undefined // false : 0 == Number(undefined)
null == undefined // true비교연산자-일치비교
- 같은 타입일 때 값이 일치하는지까지 비교 - 다른 타입일 경우 '거짓'을 반환
- 일치연산자를 사용하는 것을 추천합니다.
3 === 3 // true
3 === '3' // false
3 !== '3' // true
4 !== 3 // true형 변환 연산자
- 자바크립트의 형 변환 특징
- 변수를 느슨한 형태(Dynamically Typed) 로 처리
- 연산자와 연산식에 따라 암묵적인 형 변환이 발생할 수 있음
- 명시적인 형 변환을 위해 타입별로 형 변환 함수 제공
함수를 사용한 형 변환
- Number 타입으로 변환
Number('10'); // 10
parseInt('10', 10); // 10
parseInt('0xA', 16); // 10
parseInt('1010', 2); // 10
parseFloat('10.5'); // 10.5- Boolean 타입으로 변환
Boolean(0); // false
Boolean(''); // false
Boolean(NaN); // false
Boolean('false'); // true- 문자열 타입으로 변환
var numVal = 100;
var booleanVal = true;
numVal.toString(); // "100"
booleanVal.toString(); // "true"연산자를 사용한 형 변환
- 이중 부정 연산자 사용
!!0; // false
!!''; // false
!!NaN; // false- 덧셈 연산자 사용
+'10'; // 10
+true; // 1
+false; // 0
10 + '10'; // '1010'
10 + true; // 11
'10' + true; // '10true'
+'10' + true; // 11형 변환 연산자 사용 시 주의할 점
- 복잡한 연산식에서 암묵적 형 변환은 유지보수를 어렵게 함
- 정적인 형태(Statically Typed)의 언어처럼 프로그래밍하기 권장
// bad
var baseCount = '9';
var count = 2;
console.log('Total: ' + baseCount + count); // Total: 92
console.log('Total: ' + (+baseCount + count)); // Total: 11- 형 변환 함수, 형 변환 연산자 적절하게 섞어서 사용할 것
// good
var baseCount = parseInt('9', 10); // string to number
var count = 2; // number
var totalCount = baseCount + count; // number + number
console.log('Total: ' + totalCount); // Total: 11Falsy, Truthy
- Falsy
거짓 같은 값
Boolean 형 변환 시 false로 평가되는 값
undefined, null, 0, false, NaN, '' - Truthy
참 같은 값
Boolean 형 변환 시 true로 평가되는 값
Falsy 값을 제외한 나머지 값
논리 연산자 비교
false && true || true; // true
false && (true || true); // false단축 평가
- 단순한 true/false의 판단이 아니라 표현식을 수행하고 그 수행 결과를 반환하는 것
- 논리 연산자 사용에 따라 단축 평가 값이 달라짐
- && : expr1 && expr2 expr1의 결과가 Falsy이면 expr1의 결과 반환, 그렇지 않으면 expr2의 결과 반환
- || : expr1 || expr2 expr1의 결과가 Truthy이면 expr1의 결과 반환, 그렇지 않으면 expr2의 결과 반환
function greet(greeting, name) {
greeting = greeting || '안녕하세요!';
name = name || '홍길동';
console.log(greeting, name);
}
greet(); // "안녕하세요! 홍길동"
greet(null, '수강생들'); // "안녕하세요! 수강생들"
greet('hello!'); // "hello! 홍길동"
greet('hello!', 'tigger'); // "hello! tigger"함수
- 함수 생성과 호출 1 - 함수 생성자 사용 : 비추
- 함수 생성과 호출 2 - 함수 선언식 사용
function add(a, b) {
return a + b;
}
add(2, 3); // 5- 함수 생성과 호출 3 - 함수 표현식 사용
- 익명함수
var add = function(a, b) {
return a + b;
};
add(2, 3); // 5- 기명함수
var add = function add(a, b) {
return a + b;
};
add(2, 3); // 5
함수호이스팅의 차이가 있음
함수 사용 비교 1 - 함수 선언식 vs 함수 표현식
- 호이스팅에 차이가 있음
- 함수 선언식: 함수를 선언 하기 전에 호출해도 에러가 발생하지 않음.
- 함수 표현식: 함수를 호출하려면 반드시 선언과 초기화부터 해야함. -> 더 좋은 방법
왜냐? 코드의 예측 불가능성을 줄여주기 때문
"앞, 뒤 어디있는진 모르겠지만 실행해도 잘 돌아가니까 함수가 어딘가에 있겠지~" 라는 생각이 들면 안됨! - tip) 호이스팅(hoisting)이란?
자바스크립트 엔진이 코드를 파싱할 때 var키워드와 function을 먼저 코드 상단으로 끌어올려서(hoist) 미리 준비해두는 것
함수 사용 비교 2 - 익명 함수 vs 기명 함수
- 성능 차이 없으나 기명 함수를 사용할 때 디버깅에 유용함
즉시 실행 함수
- self-executing anonymous function
익명 함수를 괄호로 감싸서 호출하는 방식
자바스크립트는 function 키워드를 함수 선언의 시작으로 인식하기 때문에 괄호가 없으면 에러 발생함 - 전역 객체에 추가되는 변수나 함수를 제한하기 위해 주로 사용
// Good
// 전역을 오염시키지 않고 영향을 주지 않음
(function() {
console.log('hello world');
})();
// Bad
function() {
console.log('hello world');
}(); // ERROR!!일급 객체
- 일급 객체(First-class object) 조건
변수나 데이터 구조에 할당 가능
매개변수로 사용
반환 값으로 사용 - 추가 조건
런타임에 생성 가능
익명 함수로 사용
중첩 함수로 사용
동적 프로퍼티 사용
함수는 자바스크립트에서 일급 객체이다.
// 1. 변수나 데이터 구조안에 담을 수 있다.
var foo = function() {
console.log('hello javascript');
};
// 2. 매개변수로 전달할 수 있다.
function bar(fn) {
fn();
};
bar(foo);
// 3. 반환 값으로 사용할 수 있다.
function baz() {
return foo;
}
var newBar = baz();
newBar();ES2015 = ES6
- 간편하고 강화된 문법
- 새로운 API 제공
- 새로운 프로토콜 제공
최신 프론트엔드 개발 환경
ES2015를 지원하지 않는 브라우저에서 어떻게 실행할 수 있을까?
트랜스파일러
- 최신 버전으로 작성된 자바스크립트 문법을 특정 버전의 문법으로 바꾸어주는 도구
- Babel
주요기능
- const, let
- 이제 var 쓰지 마세요!
- TDZ(Temporal Dead Zone) 생성
- 재선언 불가
- 값 변경 여부
const - 변경 불가
let - 변경 가능
- TDZ
- 일반적인 호이스팅과 다르게 동작
- 초기화 전에 해당 변수를 참조할 경우 참조 에러(ReferenceError) 발생
- 블록의 시작부터 초기화가 처리될 때까지 변수 이름을 예약하고 사용하지 못하게 함
function foo() {
let x = 3;
if (true) {
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 2;
}
}
foo();- 모듈
- 자바스크립트 파일을 모듈 단위로 나누고 다른 파일에 있는 변수, 함수를 참고할 수 있도록 방식 제공
- 모듈 가져오기 - import 구문 사용
- 모듈 내보내기 - export 구문 사용
// lib.js
export default function sum(x, y) { // Default export
return x + y;
}
export function square(x) { // Named export
return x * x;
}
// main.js
import sum, { square } from 'lib';
// import Default, { ...Named } from 'lib'
sum(1, 2); // 3
square(11); // 121- 화살표 함수
- 기존의 함수 표현식을 단순화
- this를 변경하지 않음
const identity = function(a) { // ES3+
return a;
}
const identity = a => a; // ES2015+
// ES3+
btn.addEventListener('click', function() {
console.log('click!!');
});
// ES2015+
btn.addEventListener('click', () => console.log('click!!'))화살표 함수를 기명함수로 쓰고 싶을 때,
- promise
- 전통적인 콜백 패턴이 가진 단점을 보완함
- 비동기 처리 시점을 명확하게 표현
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => { // 이벤트 콜백 사용
console.log('complete');
});
xhr.open('GET', '/');
xhr.send();
// Promise 사용한 비동기 통신 라이브러리 사용
axios.get('/')
.then(() => { console.log('complete'); })- 3개의 상태
pending(대기 중) - 비동기 작업 완료 전
fulfilled(완료) - 비동기 작업이 문제 없이 완료됨
rejected(실패) - 비동기 작업 수행 중 에러 발생
promise
- 이벤트 콜백 지옥(ES3+)
connection.setRemoteDescription(new RTCSessionDescription(offer), () => {
connection.createAnswer((answer) => {
connection.setLocalDescription(answer, () => {
socket.emit('singnaling', connection.localDescription);
}, logError);
}, logError);
},logError);- Promise 사용해 단순화
connection.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => connection.createAnswer())
.then((answer) => connection.setLocalDescription(answer))
.then(() => socket.emit('signaling', connection.localDescription))
.catch(logError);
열심히 굽고 있어요🍞