var : 재정의와 재선언 가능. 함수 레벨 스코프. 함수 내에 선언된 변수는 해당 함수 내에서만 유효. 함수 외부에서 선언한 변수는 모두 전역 변수. let : 가변변수, 재정의 가능, 재선언 불가능. 블록 레벨 스코프. 변수의 호이스팅을 방지 const : 불변변수, 재정의와 재선언이 불가능하므로 선언과 동시에 정의해야함. 블록 레벨 스코프. 객체의 경우 할당된 주소값이 변경되는게 아니기 때문에 내용 변경이 가능. 객체(함수)나 배열 타입은 const 사용 추천. (함수는 객체 취급하기 때문에 함수 변수에 속성 추가가 가능함) 객체는 const
기존 var 의 문제점으로 인해 let과 const 키워드를 사용하는 것을 권장 1. var의 경우 유연한 사용이 가능하기 때문에 예기치 못한 값 반환 2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 전역변수로 사용 3. 변수 선언문 이전에 변수 참조시 오류가 아닌 undefined 반환 (호이스팅 발생)
let a = 1;
let b = 2;
// 기본 함수 형식
let sum = function(a, b) {
return a + b;
};
// 화살표 함수 형식
let sum1 = (a, b) => {
return a + b;
};
let sum2 = (a, b) => a + b; // { 다음에 return이 바로 올 경우 생략 가능
let sum2 = (a, b) => (a + b); // ()로 묶을 수 있음
let num1 = a => a + 2; // 인수가 하나인 경우 괄호 생략 가능
let print = () => alert("인수가 없음"); // 인수가 없을 경우 괄호만, 생략 불가
let num2 = (num1 % 2 == 0) ? () => alert('짝수') : () => alert('홀수'); // 삼항연산자로 함수 사용 가능
export/import (ES6~)
// named export 기본 형식
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';
// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';
Shorthand property names (ES6~)
// 객체 초기자
const name = "홍길동";
const id = "hong20";
const age = 20;
const object = {
name : name,
id : id,
age : age,
}
// 변수명이 동일할 때 생략 가능
const object2 = {
name,
id,
age,
}
Destructuring assignment (ES6~)
// 객체
const obj = {
name : "홍길동",
id : "hong20",
age : 20,
}
// 기존 변수 정의
const name = obj.name;
const id = obj.id;
const age = obj.age;
// 축약 가능
const {name, id, age} = obj; // 변수명과 동일한 속성의 값을 저장
// 배열
const fruit = ['사과', '귤', '수박']
// 기존 변수 정의
const fir = obj[0];
const sec = obj[1];
// 축약 가능
const {fir, sec} = fruit; // 순서대로 변수에 값이 들어감
Spread syntax (ES6~)
const obj1 = {fruit:'수박'};
const obj2 = {fruit:'딸기'};
const arr = [obj1, obj2];
// array copy
const arrCopy = [...arr]; // 배열 복사
/* 주소를 참조했기 때문에 arr을 수정하면 arrCopy에도 영항이 갈 수 있음 */
const arrCopy2 = [...arr, {fruit:'포도'}]; // 값을 추가해서 배열 복사
const fruits = [...arrCopy, arrCopy2]; // 배열 합치기
// object copy
const obj3 = {...obj2};
const obj4 = {...obj2, color:'red'}; // 값을 추가해서 객체 복사
const obj5 = {...obj1, ...obj2}; // 객체 합치기
/* key가 동일한 경우 마지막 값이 덮어씌어짐 */
Default parameters (ES6~)
function setValue(value) {
if(value == null || value == '') { // 값이 없을 경우
// default 값 설정
value = 0;
}
console.log(value);
}
setValue(); // 0 출력
// 인자가 전달되지 않을 경우 기본값 설정됨
function setDefaultValue(value = 0) {
console.log(value);
}
setDefaultValue(); // 0 출력
Template Literals (ES6~)
const name = '홍길동';
const age = 20;
console.log('제 이름은 ' + name + '입니다.\n 저는 ' + age + '살 입니다.');
console.log(`제 이름은 ${name}입니다.\n 저는 ${age}살 입니다.`); // 주의! ` 백틱으로 묶을 것
옵셔널 체이닝 Optional chaining (ES11~)
// 없는 속성 접근할 경우
const obj = {
name : '홍길동',
userInfo : {
birth : '20000101',
nationality : 'Korea',
subject : {
//first : '국어',
second : '영어',
}
}
}
// 값이 있는지 확인
console.log(obj.userInfo && obj.userInfo.subject && obj.userInfo.subject.first);
console.log(obj.userInfo ? .subject ? .first ); // 간소화 가능
널 병합 연산자 Nullish Coalescing Operator (ES11~)
// 기존
const userName = name || '홍길동';
/* &&, || 연산자의 false 판정 >> false, '', 0, null, undefined 전부 false */
const name = '';
const userName = name ?? '홍길동'; // name 값이 있다면 name, 값이 없다면 '홍길동'
고차 함수 Higher order function
함수를 인자로 받거나, 함수를 return 하는 함수.
Array.prototype.map,Array.prototype.filter,Array.prototype.reduce등 언어 내부에 포함된 (built-in) 고차함수도 있다.
const num = 21;
function odd() {
return '짝수';
}
function even() {
return '홀수';
}
// ES5~ 방식
function number1(num, fn1, fn2) {
let typeStr = '';
if(num % 2 == 0) { // 홀수
return fn1();
}
else if(num % 2 == 1) { // 짝수
return fn2();
}
}
// 함수를 인자로 넘기며 함수를 return 받는다.
console.log(num + '은 ' + number1(num, odd, even) + '입니다.');
// ES6~ 방식
const number2 = (num, fn1, fn2) => {
let typeStr = '';
if(num % 2 == 0) { // 홀수
return fn1();
}
else if(num % 2 == 1) { // 짝수
return fn2();
}
}
// 함수를 인자로 넘기며 함수를 return 받는다.
console.log(`${num}은 ${number2(num, odd, even)}입니다.`);
Array.prototype.map 예제
> map() 메소드는 배열 내 모든 엘리먼트를 인자로 제공받는 콜백 함수를 호출 => 새로운 배열 생성
