일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Prisma
- ucpc 2024 예선 e번
- Express.js
- 백준 32028번
- PROJECT
- 더 흔한 색칠 타일 문제
- html5
- HTTP
- ucpc 2023 예선 d번
- MySQL
- string
- 게임 서버 아키텍처
- 백준 28303번
- localstorage
- JavaScript
- ERD
- map
- branch
- Github
- MongoDB
- ucpc 2023 예선 i번
- 지금 자면 꿈을 꾸지만
- Next
- ccw 알고리즘
- pm2
- insomnia
- router
- 그리디
- 자바스크립트
- 백준 32029번
Archives
- Today
- Total
dh_0e
[JavaScript] ES6 문법 정리 (구조분해할당, 단축 속성명, 전개 구문 ...) 본문
내일배움캠프/HTML,CSS,JavaScript
[JavaScript] ES6 문법 정리 (구조분해할당, 단축 속성명, 전개 구문 ...)
dh_0e 2024. 4. 23. 03:121. 구조분해할당 (destructuring)
de(not/분해) + structure(구조) + ing
객체의 속성을 하나 하나 분해해서 값을 변수에 담을 수 있게 해주는 문법
// Array
let arr = [1, 2, "hi"];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 1 2 hi undefined
// Object
let person = {
name: "kdh",
age: 23,
height: 182
}
let { name, age, height: tall, weight = 75 } = person;
console.log(name, age, tall, weight); // kdh 23 182 75
2. 단축 속성명 (property shorthand)
객체를 정의할 때 Key와 value의 이름이 같다면 value를 생략하여 표현하는 방식
obj = {name: name, age: age} ≫ obj = {name, age}
const name = "kdh"
const age = 23;
let obj = { name: name, age: age };
let obj2 = { name, age };
console.log(obj); // { name: 'kdh', age: 23 }
console.log(obj2); // { name: 'kdh', age: 23 }
3. 전개 구문 (spread operator)
구조분해할당(destructuring)과 함께 가장 많이 사용되는 ES6 문법 중 하나로
...Object로 표현하여 객체의 중괄호(소괄호)를 지우고 안에 들어있는 값을 풀어줌
let Arr = [1, 2, 3, 4, 5];
let Obj = { name: "kdh", age: 23, };
let Obj2 = { height: 182, weight: 75 };
console.log(...Arr); // 1 2 3 4 5
console.log({ ...Obj, ...Obj2 }); // { name: 'kdh', age: 23, height: 182, weight: 75 }
4. 나머지 매개변수 (rest parameter)
매개변수의 수를 한정시켜놓지 않고 배열로 받는 문법
function f(...args) {
console.log(args); // [ 1, 2, 3, 4, 5 ]
}
f(1, 2, 3, 4, 5);
5. 템플릿 리터럴 (Template Literal)
문자열을 입력할 때 ``(백틱)안에 문자열 외에도 ${}로 필요한 내장된 표현식을 불러올 수 있음
멀티라인으로 여러 줄을 편리하게 출력할 수 있음
let name = "kdh";
let age = 23;
console.log(`My name is ${name}.
And I'm ${age} years old
I also put string in here!`);
/*
My name is kdh.
And I'm 23 years old
I also put string in here!
*/
6. 일급 객체로서의 함수 (First-Class Object)
Javascript에선 함수를 일급 객체(First-Class Object)라고 표현하여 함수를 객체처럼 여러가지 방식으로 다룸
일급 객체(First-Class Object)의 특징으로는
1. 변수에 함수를 할당할 수 있음
let f = function (a) {
return a * 2
};
console.log(f(5)); // 10
2. 함수를 인자로 다른 함수에 전달할 수 있음
function ff(f, a) {
f(a);
}
ff(function (a) {
console.log(a * 2); // 10
}, 5);
2-1. 고차함수 - 함수를 인자로 받거나 return하는 함수 (콜백함수를 전달받는 함수)
2-2. 콜백함수 - 매개변수로써 쓰이는 함수 (고차함수의 한 매개변수)
function f(str, func) { // 고차함수
for (let val of str) {
func(val);
}
}
let str = [1, "a", 2, "b", 3, "c"];
let printAll = val => { // 콜백함수1
console.log(val);
}
let printNumber = val => { // 콜백함수2
if (typeof val === "number") console.log(val);
}
f(str, printAll); // 1 a 2 b 3 c
f(str, printNumber); // 1 2 3
3. 함수를 반환할 수 있음
function f(val) {
return function (val2) {
return val + val2;
}
}
const ff = f(10);
console.log(ff(1000)); // 1010
위에서 f()에 넣은 10은 val에 들어가 대입되어 결국 ff를 다음과 같은 함수로 만들어준다.
const ff = function (val2) {
return 10 + val2;
};
val2에 1000의 값이 들어가면 1010을 return하게 되며 콘솔에 1010이 찍히게 된다.
'내일배움캠프 > HTML,CSS,JavaScript' 카테고리의 다른 글
[JavaScript] 주요 문법 정리(1) (실행 컨텍스트, this binding, 유사 배열 객체) (0) | 2024.04.25 |
---|---|
[JavaScript] Map/Set (0) | 2024.04.24 |
[JavaScript] How to use String(문자열), Array(배열), Object(객체) in JavaScript (0) | 2024.04.22 |
[JavaScript] Hoisting? Arrow function? JavaScript 기초 문법 (0) | 2024.04.18 |
[JavaScript/HTML5] 비밀번호 기능 구현 및 현재 날짜와 시간 가져오기, input Type(HTML5) (0) | 2024.04.17 |