es6 ; 2015에 나온 버젼 ; 대규모로 쉽고 효율적으로 나옴
let(변수;선언할 때;재할당o, 선언x), const(상수;선언할때;재할당x, 선언x)
- 둘 차이 : 한 번 선언하고 재할당 할 때 가능한가, 아닌가
var : 2015이전 (선언o, 재할당o)
화살표 함수 - 함수 선언하는 방법이 2가지
;1.함수선언문 / 2.함수 표현식
function add () { / var add = function () {
return 1;
} / }
; 화살표함수(에로우펑션)로 쓴다면
var add = (x) => {
return 1;
} 인데, 리턴1줄 이면 var add = x => 1; 로 가능
삼항연산자 - condition ? true인 경우 : false인 경우
console.log(true ? '참' : '거짓'); 참
console.log(false ? '참' : '거짓'); 거짓
console.log(1 === 1 ? '참' : '거짓'); 참
console.log(1 !== 1 ? '참' : '거짓'); 거짓
조건
구조분해할당 : de(=not) + structure(=구조) + ing ; destructuring
구조를 반대로 찢어서 각각에 할당함 ; 배열(대괄호안에 있는)이나 객체(중괄호안에 있는)의 속성
ex) 1. 배열의 경우 ; 순서 중요
let [value1, value2] = [1, "new"] 오른쪽에 있는 스트럭쳐인 1과 new를 분해,
let 변수 = 배열 0번째 1은 value1에, 1번째 new는 value2에
console.log("1", value1); 각각 할당해줘
console.log("2", value2); 결과값 : 1 1 /다음줄에는 2 new
let arr = ["value1", "value2", "value3"];
let [a, b, c] = arr; 이면 value1에는 a, 2에는 b 이렇게 들어가는데
let [a, b, c, d] = arr; 가 들어온다면? defined (null은 개발자가 없다고 표현할때만)
let [a, b, c, d = 4] = arr; 기본 값을 4로 준다면, defined대신 4가 뜨고
let arr = ["value1", "value2", "value3", "value4"];
let [a, b, c, d = 4] = arr; 라면, 기본값이 있음에도 결과는 value값이 나옴
확인은 console.log(a);
console.log(b); 해보기
ex) 2. 객체인 경우 ; 키 중요 (배열은 순서중요)
// let user = {
// name: "nbc",
// age: 30,
// };
let {name, age} = { 라면 왼쪽 name이 nbc를
let user = { age가 30 가짐
name: "nbc", ; 구조분해할당에 걸맞음
age: 30, - 오른쪽에 있는 name:"nbc", age:30를 분해해서
}; 왼쪽에 있는 변수에 할당해줌
}
console.log("name => ", name); // string nbc
console.log("age => ", age); // number 30
;name age는ㄴ 더이상 객체가 아니라 일반 string과 number 타입으로 나옴
새로운 이름으로 할당
let user = {
name: "nbc",
age: 30,
};
let {
name: newname,
age: newage
} = user user에 위의 객체가 들어옴
-------
즉
let user = {
name: "nbc",
age: 30,
};
let { name: newname, age: newage} = user
원래는 name에 nbc, age에 30인데 왼쪽처럼 구조분해할당을 이렇게 잡는다면
name으로 가져온 값은 newname에 넣으라는 것 ; 값을 가져오려면
console.log("newname =>", newname); nbc
console.log("newage =>", age); 30
이것도 객체가 없으면 초기값 잡아주기
단축속성명 : property shorthand ; 이거 이해 못하면 나중에 다른사람이 짠거 해석힘듬
const name = "nbc";
const newage = "30";
const obj = { 자바스크립트에서 obj는 키벨류
(키➡️) name: name,(⬅️벨류) name은 name이다 라고 변수 세팅
age: newage 벨류 : 실질적 데이터 / 키 그냥 이름 => 오른쪽을 변수로도 사용가능
} 즉, 가끔가다 키, 벨류 이름 겹치면 생략 가능
const obj = {
name, 이렇게
age: newage (만약 age:age라면?)
}
const obj = {name, age}; 이렇게 가능. 배열같지만 객체다 ; 단축속성명 사용
전개구문 = spread operator (destructuring 과 함께 가장 많이 사용되는 es6 중 하나)
let arr = [1, 2, 3]; 배열을 말그대로 전개
console.log(arr); [1, 2, 3]
console.log(...arr); ... 1, 2, 3.
='...'이게 전개구문 문법;spread operator ; [1,2,3]을 전개해달라
; 전개구문 문법 언제쓰나? 구조를 벗고 새로운 구조로 덧입힐때
만약 let arr = [1, 2, 3]; 에 4를 더해서 new arr 만들고 싶을 때
let newarr = [...arr] ; 원래있던 arr를 풀러서 다시 배열로 묶어줌
let newarr = [...arr] ; [1, 2, 3]
let arr = [1, 2, 3];
let newarr = [...arr, 4]; 이면 [1, 2, 3, 4] 로 됨
객체도 가능
let user = {
name: "nbc",
age: 30,
};
let user2 = {...user}; {name: 'nbc', age:30}
console.log(user2); {name: 'nbc', age:30}
나머지 매개변수 ; 매개변수의 갯수를 정확히 모를 때
function examplefunc(a, b, c, ...args) { 추가적으로 더 들어올 수 있음을 명시해줌
console.log(a, b, c); 1, 2, 3
console.log(...args); 4, 5, 6, 7 (...⬅️스프레드 빼주고 args만 있으면 [4, 5, 6, 7] 배열형태로 나옴
}
examplefunc(1, 2, 3, 4, 5, 6, 7);
... 이걸로 명시해줘야만 나머지 매개변수 인식할 수 있음
템프릴 리터럴 ; template literal ; 멀티라인 지원 ; 활용범위 넓음
console.log(`hello world`); ``입력해주면 안에 자바스크립트 내용(변수,연산등) 들어갈 수 있음
예시
console.log(`hello world ${3 + 3}`); hello world 6
const test = "안녕";
console.log(`hello world ${test}`); hello world 안녕
tip) 기본적 따옴표 기반의 문자열은 멀티라인 지원안함, ``으로는 가능