에크마스크스크립트(ECMAScript)
: 자바 스크립트 표준 명세서; 자바스크립트 프로그래밍 언어의 표준
모던 자바스크립트 (Modern Javascript)
현 시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
Javascript 자료형 8
: number, string, boolean, null, undefined, object, symbol, bigint
문장(Statements)
: 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
표현식(Expressions)
: 하나의 값이 되는 모든 코드
Symbol
: 코드 내에서 유일한 값을 가진 변수 생성
const user = Symbol('설명')
똑같은 설명을 가진 symbol이라도 다르다
const symbol_A = Symbol('this is Symbol');
const symbol_B = Symbol('this is Symbol');
console.log(symbol_A === symbol_B); //false
BigInt
: 아주 큰 정수를 표현 (-> 자바스크립트의 숫자형 값에는 9000조 정도의 정수 표현의 한계가 존재하기 때문)
일반 정수 마지막에 알파벳 n을 붙이거나 BigInt 라는 함수 사용
console.log(9007199254740993n);
console.log(BigInt('9007199254740993'))
BigInt 타입끼리만 연산 가능, 소수 표현 사용불가
typeof 연산자
▷ null --- object
typeof null; // object
function sayHi(){
console.log('Hi!?!');
}
typeof sayHi; // function
falsy vs truthy 값
▷ falsy
: false, null, undefined, NAN, 0, ''
▷truthy
: [], {} , 나머지
AND 연산
왼쪽 값이 Truthy하면 오른쪽 값 리턴 / 왼쪽 값이 Falsy하면 그대로 왼쪽 값을 리턴
console.log('Codeit' && 'JavaScript'); // JavaScript
console.log('0' && NaN); // NaN
OR 연산
왼쪽 값이 Truthy하면 왼쪽 값 리턴 / 왼쪽 값이 Falsy하면 오른쪽 값 리턴
console.log(0 || true); //true
console.log({} || 123); // {}
* AND 연산자가 OR 연산자보다 우선순위가 높다
null 병합 연산자 '??'
: 연산자 왼편의 값이 null이나 undefined - 연산자 오른편의 값 리턴
: 연산자 왼편의 값이 null이나 undefined 아님 - 연산자 왼편의 값 리턴
const ex1 = null ?? 'I'; //I
const ex2 = false ?? 'codeit'; //false
var 문제점
1. 호이스팅 2. 중복 선언 가능
3. 변수의 유효범위(scope)에 차이 - var은 함수 단위로만 가능(: 지역변수 생성불가) : 함수 스코프
함수 선언 : 함수 선언을 변수에 할당하는 방식
const printCodeit = function(){
console.log('Codeit');
};
printCodeit();
* 함수 표현식(Function Expression) : 함수 선언을 값 처럼 활용하는 방식
-- 기명 함수 표현식(Named Function Expression)
자동으로 'name'이라는 프로퍼티 가짐
const sayHi = function printHiInConsole(){
console.log('Hi');
};
console.log(sayHi.name); //printHiInConsole이때 이 함수이름은 함수 내부에서 함수 자체를 가리킬 때만 사용가능 - 외부에서 호출할 땐 불가능
+) 프로퍼티 이름과 값으로 사용할 함수, 변수 명이 같을 경우 한번만 적어줘도 됨
//ex
const title = 'Codeit';
const birth = 2017;
const user = {
title,
birth
};
함수 선언과 함수 표현식의 가장 큰 차이 : 호이스팅, 스코프
- 함수 표현식은 변수가 선언된 이후에 함수를 호출해야 동작
즉시 실행 함수(표현) Immediately Invoked Function Expression : IIFE
(function(x, y){
console.log(x+y);
})(3, 5);
- 외부에서 재사용할 수 없음
- 선언과 동시에 실행이 이루어짐
--일급 함수
콜백 함수(Callback Function)
: 다른 함수의 파라미터에 전달된 함수
고차 함수(Higher Order Function)
: 함수를 리턴하는 함수
아규먼트(Argument)
: 함수를 호출하는 부분에서 파라미터로 전달하는 값에 해당하는 부분
'arguments' 라는 객체를 사용하여 유사 배열로 아규먼트 출력가능
함수에 'undefined' 값을 전달하면 기본값을 사용할 수 있다
function printArguments(){
for(const arg of arguments){
console.log(arg);
}
console.log('------------------');
};
printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
//Young
//Mark
//Koby
//-----------------------------------
//Captain
레스트 파라미터(Rest Parameter)
: 파라미터 앞에 ... 붙인 것
배열이므로, 배열의 메서드 모두 사용가능
//ex1
function printArguments(...args){
console.log(args);
};
printArguments('Suri', 'Jack', 'Joy', 'Noel');
//ex2
function printRank(first, second, ...others){
생략
}
printRank('Phil', 'Won', 'Emma', 'Min', 'Luke');
Arrow Function
: 이름이 없는 함수
어떤 이름을 가진 변수에 할, 다른 함수의 아규먼트 선언
//ex1
const getTwice = (number) => {
return number * 2;
};
//간단하게 변경
const getTwice = number => number * 2;
//ex2
myBtn.addEventListener('click', () =>{
console.log('button is clicked!');
});내부의 동작이 return문 하나라면 return 키워드도 생략할 수가 있음 ; 이때 반환하는 값이 객체이면 소괄호로 한 번 감싸줌
this 키워드
기본값 : Window 객체
- arrow function --- 선언되기 직전의 유효한 this 값과 똑같은 값을 가짐
조건 연산자(Conditional operator) = 삼항 연산자
: 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
-- 내부에 변수나 함수를 선언한다거나 표현식이 아닌 문장은 작성할 수 없음
Spread 구문
: 여러 개의 값을 하나로 묶은 배열을 다시 각각의 개별 값으로 펼치는 문법
하나의 값이 아니라 여러 값을 가진 목록 -> 객체에 할당 가능, 변수에 할당 불가능
배열은 객체로 펼칠 수 있지만 객체는 배열로 펼칠 수 없
const numbers = [1,2,3];
console.log(numbers);
console.log(...numbers);
//[1,2,3]
//1 2 3
앞에 ... 을 붙이는 방식 레스트 파라미터와 동일
--> BUT rest parameter : 여러 개의 arguments 를 하나의 파라미터로 묶는 방식
> 배열 복사할 경우 편리하다 - 기존의 slice() 메소드 사용하여 배열 복사했던 것 필요 없어짐
//기존의 slice() 메서드 활용한 배열의 복사
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPublishing.slice();
interactiveWeb.push('JavaScript');
console.log(webPublishing);
console.log(interactiveWeb);
//['HTML', 'CSS']
//['HTML', 'CSS', 'JavaScript']
//Spread 구문을 활용한 배열의 복사
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];
console.log(webPublishing);
console.log(interactiveWeb);
//['HTML', 'CSS']
//['HTML', 'CSS', 'JavaScript']
> 두 배열을 합친 새로운 배열을 만들 때도 간편해짐
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
//[1,2,3,4,5,6]
옵셔널 체이닝
옵셔널 체이닝 연산자 : ?.
function printCatName(user){
console.log((user.cat === null || user.cat === undefined) ? undefined:
}
구조분해(Destructuring)
1. 배열
const rank = ['유나', '효준', '민환']
const [mackbook, ipad, airpods, coupon = '없음'] = rank;변수의 개수 > 배열 길이 : 넘치는 변수 undefined 로 할당됨
변수의 개수 < 배열 길이 : 넘치는 배열 요소 할당 안됨
2. 객체
const macbook = {
title : '맥북 프로 16형',
price : 3690000,
memory : '16GB',
storage : '1TB SSD 저장 장치',
display : '16형 Retina 디스플레이',
};
const {title, price} = macbook;나머지 원리들은 배열이랑 비슷함
* 변수이름과 프로퍼티 네임이 같지 않을 경우
const {title: product, ...rest} = macbook;
// 프로퍼티네임 : 객체 이름
구조분해를 사용해서 여러 argument 가 아니라 하나의 배열을 전달 받는 함수로 바꿀 수 있음
= 함수의 파라미터 부분에서 바로 destructuring 문법 사용가능
// ex1
function printWinners([macbook, ipad, airpods, ...coupon]){
//생략
}
const ranks = ['효준', '효신', '재훈', '소원', '현승', '종훈'];
printWinners(ranks);
//ex2
function printSummary({title, color, price}){
//생략
}
- html에서 dom이벤트 다룰 때 사용 --> 매번 이벤트 객체 접근 불필요
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
event.target.classList.toggle('checked');
});
//구조분해 사용하면
btn.addEventListener('click', ({target}) => {
target.classList.toggle('checked');
});중첩 객체 구조 분해라는 것도 있다 --> 한번 더 destructuring 문법 사용하는 것
자바스크립트는 에러 발생 시 자동으로 에러 객체 생성
에러 객체 : 에러 이름(name), 에러 메세지(message)
종류)
ReferenceError : 존재하지 않는 변수나 함수를 호출한 경우
TypeError : 잘못된 방식으로 자료형 다루는 경우
SyntaxError : 문법적으로 코드에 오류가 있는 경우(코드 실행전 에러 발생 시킴)
...etc....
에러객체 생성 (에러 발생 아님)
const error = new TypeError('타입 에러가 발생했습니다.');
에러 발생 (throw 키워드 사용)
throw error;
//에러 객체 출력
console.error(e); //실제 에러 메세지처럼 출력할 경우
예외 (Exception) : 실행 가능한 코드에서의 에러 ➡️ try-catch문 이용
배열 만의 반복문
1. forEach
const members = ['영훈', '윤수', '동욱', '태호'];
members.forEach(function(member){
console.log('${member}님이 입장하셨습니다.');
});파라미터 : 배열의 요소 받아올 변수, 인덱스, 배열 자체
단순히 반복만 수행하므로 변수에 담을 경우 = undefined
2. map
메소드의 호출 결과로 새로운 배열을 리턴
const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];
fistNames.map((firstName, i) => {
return lastNames[i] + firstName;
});
특별한 조건에 따라 요소 찾는 것
filter 메소드
> 무조건 배열을 리턴함
> 결과값이 true/false 임
> 이 중 하나의 값을 찾는 것 == 'find 메소드'
filter VS find
> 리턴값
filter = 배열 / find = 값
> 반복횟수
filter = 모든 요소 / find = 하나 찾는 즉시 종료
some 메소드
: 조건을 만족하는 요소가 1개 이상 있는 지
every 메소드
: 모든 요소가 조건을 만족하는 지 (= 조건을 만족하지 않는 요소가 1개 이상 있는 지)
const numbers = [1, 3, 5, 7, 9];
const someReturn = numbers.some((el) => el>5);
const everyReturn = number.every((el) => el>5);
console.log('some: ', someReturn); //true
console.log('every: ', everyReturn); //false
reduce 메소드
const numbers = [1,2,3,4];
numbers.reduce((acc, el, i, arr) => {
return nextAccValue;
}, initialAccValue);콜백함수가 여러번 실행됨. 마지막 콜백함수의 리턴값이 결국 reduce 메소드의 리턴값.
각 콜백함수의 리턴값이 다음 콜백함수의 accumulator에 전달됨
배열 정렬
sort 메소드
아무런 아규먼트도 전달하지 않을 시, 유니코드에 정의된 문자열 순서대로 정렬
➡️메소드를 실행하는 원본 배열의 요소들을 정렬
reverse 메소드
배열의 순서를 뒤집어주는 메소드
파라미터 존재하지 않음
➡️메소드를 실행하는 원본 배열의 요소들을 정렬
Map
: 이름이 있는 데이터 저장
메소드를 통해서 값을 추가하거나 접근가능
메소드
○ map.set(key, value) : key를 이용해서 value를 추가하는 메소드
○ map.get(key) : key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined 반환
○ map.has(key) : key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드
○ map.delete(key) : key에 해당하는 값을 삭제하는 메소드
○ map.clear() : Map 안의 모든 요소를 제거하는 메소드
○ map.size : 요소의 개수를 반환하는 프로퍼티 (메소드 아님)
Map 객체는 메소드를 통해 값을 다루므로, 다양한 자료형을 key로 활용할 수 있음
Set
: 여러개의 값을 순서대로 저장
메소드를 통해서 값 다룰 수 있음
메소드
○ set.add(value) : 값을 추가하는 메소드 (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신 반환)
○ set.has(value) : Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드
○ set.delete(value) : 값을 제거하는 메소드 (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환)
○ set.clear() : Set 안의 모든 요소를 제거하는 메소드
○ set.size : 요소의 개수를 반환하는 프로퍼티 (메소드 아님)
Map VS Set
일반 객체는 프로퍼티 네임으로, Map은 get 메소드로, 그리고 배열은 index를 통해 개별 값 접근. Set에는 개별 값에 접근하는 방법 없음
Set : 중복되는 값을 허용하지 않음
→ 배열 내에서 중복을 제거한 값들의 묶음을 만들 때 Set 활용