Template Literal
1. 개념
새로운 문자열 표기법
- backtick(`)
- 변수 처리는 ${변수}
2. 예제
// D:\React\workspace\ES6 | |
01_template_literal.html | Template Literal |
JavaScript 연산자
1. 개념
- React 연산자
=== 같다
!== 다르다
- 삼항 연산자
[형식] 조건 ? true 일 때 : false 일 때
- && ; and 연산자 아님
[형식] true && 참일 때 수행하는 결과
- || ; or 연산자 아님
[형식] ( false, null, undefined ) 거짓일 때 수행하는 결과
2. 예제
// D:\React\workspace\ES6 | |
02_operator.html | JavaScript 연산자 |
화살표 함수
1. 개념
- function 키워드 대신 => 기호를 사용
- this 바인딩이 기존 함수와 다름
2. 형식
const 함수명 = (매개변수) => {
함수 본문;
};
- 기본 화살표 함수
const sum = (a, b) => {
return a + b;
};
console.log(sum(2, 3)); // 5
- 매개변수가 하나일 때: 괄호 생략 가능
const square = x => x * x;
console.log(square(5)); // 25
- 매개변수가 없을 때: 빈 괄호 사용
const greet = () => 'Hello!';
console.log(greet()); // 'Hello!'
- 함수 본문이 한 줄일 때: return과 중괄호 생략 가능
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5
3. 예제
// D:\React\workspace\ES6 | |
03_arrowFuction.html | 화살표 함수 |
배열, 메서드() 중 불변성 유지
1. 개념
push | 배열 뒷부분에 값을 삽입 (배열의 값이 변경된다) |
concat | 다수의 배열을 합치고 병합된 배열의 사본을 반환 기존의 배열은 건드리지 않음 - 불변성 유지 |
2. 예제
// D:\React\workspace\ES6 | |
04_push_concat.html | 배열, 메서드() 중 불변성 유지 |
map(); 반복문
1. 형식
배열.map((요소, 인덱스) => {
return 요쇼
});
2. 예제
// D:\React\workspace\ES6 | |
05_map.html | map(); 반복문 |
filter
1. 개념
filter도 map함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한 번씩 돌리면서 콜백함수의 몸체 부분에서 true를 반환하는 원소들만 걸러준 결과 배열
2. 형식
const newArr = arr.filter( 현재값 => 조건 )
3. 예제
// D:\React\workspace\ES6 | |
06_filter.html | 필터 |
find 함수
1. 개념
배열에서 조건에 맞는 첫 번째 요소를 반환
요소가 없으면 undefined 를 반환
2. 예제
// D:\React\workspace\ES6 | |
07_find.html | find 함수 |
indexOf 함수
1. 개념
객체를 선언할 때에는 이렇게 {} 문자 안에 원하는 값들을 넣어준다
{키 : 값}
2. 예제
// D:\React\workspace\ES6 | |
08_indexOf.html | indexOf 함수 |
비구조 할당(구조분해)
1. 개념
객체나 배열의 속성/값을 개별 변수에 쉽게 할당할 수 있도록 해주는 JavaScript 문법
2. 형식
const object = {a:1, b:2, c:3}
const {a, b, c} = object 낱개로 받음
3. 예제
// D:\React\workspace\ES6 | |
09_destructuring_assignment.html | 비구조할당(구조분해) |
spread (전개) 연산자
1. 개념
- … 를 사용하여 배열이나 객체의 요소를 개별적으로 분해하거나 복사할 때 사용되는 JavaScript 문법
- 주로 배열과 객체를 쉽게 복제하거나 병합하는 데 유용
2. 형식
...
3. 예제
// D:\React\workspace\ES6 | |
10_spread.html | 전개 연산자 |