반응형
Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- 부천데이트
- 전세사기
- reduce함수 예제
- 전세대출
- Docker
- 제주도여행
- 교토여행
- 부천술집
- 오사카여행
- Linux
- 컴퓨터구조
- 허그전세대출
- 부천맛집
- 혼공컴운자습문제
- 제주여행비용정리
- windows10
- 결혼준비예상비용
- 부천데이트맛집
- 혼공컴운스터디
- 일본첫여행
- WSL2
- 우메다홀릭호텔
- 일본여행
- 문래맛집
- 부천역맛집
- 강서구웨딩홀추천
- 제주도가성비여행
- 비아인프라임교토에키
- 교토숙소
- 혼공컴운
Archives
- Today
- Total
sugar.kim
자바스크립트 es6 주요 문법 정리 (리액트에 필요함) 본문
728x90
반응형
1. 템플릿 문자열 [template stirng]
- 작은 따옴표(') 대신 백틱(`)으로 문자열을 표현
- 병합연산자(+)를 사용해서 문자열+문자열, 문자열+변수 하던것을 그냥 백틱 안에 `문자열 문자열 ${변수}` 형태로 사용가능
2. 전개 연산자 [spread operator]
- 독특하면서도 매우 유용한 문법
- 나열형 자료를 추출하거나 연결할 때 사용한다.
- 사용 방법은 배열이나 객체 변수명 앞에 마침표 세 개(...)를 입력한다. 다만, 배열[], 객체{}, 함수 인자() 표현식 안에서만 사용해야 한다.
3. 가변변수와 불변변수
- 가변변수 : 값을 수정할 수 있는 변수, let 키워드로 선언한다.
- 불변변수 : 값을 수정할 수 없는 변수, const 키워드로 선언한다.
- 무결성 제약 조건에 위배되었다. > 불변 변수는 값을 다시 할당 할 수 없지만, 값을 변경 할 수는 있음. 선언한 변수에 내장함수(push, splice, ...) 사용해서 값 변경 가능....
- 불변 변수로 정의된 배열이나 객체를 내장 함수로 수정하는 것을 암묵적으로 금지하여 무결성을 유지할 수 있다. (개발자 스스로가 아니면 팀이 어떻게 관리할 지 정하는 것)
- 무결성을 유지하면서 불변 변수의 값을 수정해야 하는 경우에는, 수정할 불변 변수를 새로 만들어서 새 값을 할당하는 방법으로 수정해야 한다. 수정한다기보다 새로 정의한다는 개념에 가까움.
- 기존 자바스크립트의 가변 내장 함수 & 무결성 내장함수 (무결성 함수는 객체나 배열을 직접 수정하는 것이 아니라 새 결과를 반환하는 함수를 말한다. -> 무결성 제약 조건을 지키는 함수)
가변 내장 함수 | 무결성 내장 함수 |
push(...items) | concat(...items) |
splice(s,c,...items) | slice(0,s).concat(...items,slice(s+c)) |
pop() | slice(0,len - 1) |
shift() | slice(1) |
불변변수를 사용하는 이유는 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있고, 수정 전과 후의 변수값을 비교할 수 있어 가변 변수보다 더 유용하다. 실제로 실무에서도 불변변수(const)를 더 많이 사용하긴 한다.
4. 클래스
- 기존 자바스크립트에서는 클래스 표현식이 없어서 prototype으로 클래스를 표현했다.
- prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소이다.
- ES6에서는 class 키워드가 생기므로 코드가 훨씬 간결해진다. (Java와 같은 기존 언어 패턴과유사하지만 다중 상속이나 인터페이스는 지원하지 않음)
- class 키워드로 class 정의를 할 수 있으며 생성자 constructor함수도 사용 가능, 객체가 생성될 때 함께 만들어질 변수가 클래스 변수 (static)를 클래스 선언 블록 안에 정의 가능.
- 생성자, 클래스 변수, 클래스 함수 정의에는 변수 선언을 위한 키워드(var, let, const,...)를 사용하지 않는다.
- extends 키워드를 사용해서 클래스 상속 하며 부모 함수 참조할 경우 super()를 사용한다.
5. 화살표함수 (arrow function)
- 화살표 기호(=>)로 함수를 선언한다.
- 화살표 기둥 =을 사용해서 fat arrow function이라고 부르기도 함.
- 이름이 없는 익명 함수 (anonymous function)를 선언해서 변수에 대입하는 방법과 유사하며, function 키워드를 생략하고 인자블록 ()과 본문블록 {} 사이에 =>를 표기한다.
- 본문 블록이 비어 있고 결과값을 바로 반환하는 경우에는 {}중괄호 생략이 가능하다.
- 반환값이 객체라면 ()중괄호로 결과값을 감싸 간결하게 표현이 가능하다.
- 함수 표현식을 간결하게 할 수 있고 '계단형 함수 선언'과 같은 구조가 만들어지지 않게 해준다.
- 화살표 함수를 사용해서 간결한 코드로 함수를 반환할 수 있다.
- this범위로 생기는 오류를 피하기 위한 bind(this)함수를 생략해도 된다.
6. 객체 확장 표현식과 구조 분해 할당
- 기존 자바스크립트에서는 객체와 객체의 값을 선언하기 위해 키읆과 값을 각각 할당해야 했지만 아래와 같이 개선됨.
var x = 0;
var y = 0;
/* 1. 키이름이 키 값과 동일하다. */
// var obj = {x:x, y:y};
/* 1-ES6.객체 변수 선언할 때 키 값을 생략하면 자동으로 키의 이름으로 키 값을 지정한다. */
var obj = {x,y};
console.log(obj);
var randomKeyString = 'other';
/* 2. 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성 해야 한다. */
// var combined = {};
// combined['one'+randomKeyString] = 'some value';
/* 2-ES6. 객체생성 블록 안에 대괄호를 사용하여 표현식을 작성하면 추가하여 계산된 키 값을 생성할 수 있다. */
var combined = {
['one ' + randomKeyString]: 'some value',
};
console.log(combined);
var obj2 = {
/* 3. 객체에 함수 추가할 때 변수에 할당 해야 한다.*/
// x: x,
// methodA: function(){ console.log('methodA'); },
// methodB: function(){ return 0; }
/* 3-ES6. function 키워드 생략하여 함수를 선언할 수 있습니다. */
x,
methodA() { console.log('method A');},
methodB() { return 0; },
}
console.log(obj2);
- 자바스크립트 구조(객체나 배열) 분해 사용 방법
//기존 자바스크립트에서는 객체나 배열의 특정자료를 아래와 같이 분해함
var list = [0,1];
//1. 배열의 인덱스를 사용해서 변수에 할당한다.
var item1 = list[0];
var item2 = list[1];
//2. || 연산자를 이용해서 배열의 해당 인덱스에 값이 없으면 기본값으로 할당한다.
var item3 = list[2] || -1;
//1-ES6. 대괄호 블록[] 사이에 추출하고자하는 값의 인덱스 위치에 변수를 배치한다.
var [
item1,
item2,
item3 = -1, //2-ES6. 선언부호를 변수와 함께 사용하여 기본값을 할당한다.
] = list;
//3. 배열의 두 값을 치환한다.
var temp = item2;
item2 = item1;
item1 = temp;
//3-ES6. 인덱스 위치에 각각 변경할 변수를 교차 배치하여 배열의 두 값을 치환한다.
[item2, item1] = [item1, item2];
var obj = {
key1: 'one',
key2: 'two',
};
// 4. 객체의 키 값을 변수에 할당한다.
//var key1 = obj.key1;
//var key2 = obj.key2;
// 5. ||연산자를 이용하여 객체의 해당 키값이 없으면 기본 값으로 할당한다.
//var key3 = obj.key3 || 'default key3 value';
// 6. 객체의 키값을 다른 변수에 할당한다.
//var newKey1 = obj.key1;
var{
key1: newKey1, //6-ES6. 콜론 : 부호와 함께 새 변수명을 선언하여 추출된 키값을 다른 변수명으로 할당한다.
key2, //4-ES6. 객체의 키 값을 변수에 할당
key3 = 'default key3 value', //5-ES6. 선언 부호 = 를 변수와 함께 사용하여 기본값을 할당한다.
} = obj;
- 구조 할당 시에 앞에서 배운 전개연산자(spread operator)를 함께 사용한다.
- 구조분해와 구조할당은 함수 인잣값을 다루거나 JSON데이터를 변환할 떄 유용하게 사용하므로 꼭 기억하는 것이 좋다.
//구조분해와 분해할당 전개 연산자 사용
var [item1, ...othersItems] = [0,1,2];
var {key1, ...others} = {key1: 'one', key2: 'two'};
//othersItems = [1,2]
//others = { key2: 'two' }
7. 라이브러리 의존성 관리
- 의존성 : 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것.
- 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했는데, script 엘리먼트의 선언 순서가 매우 중요했다. (선언순서가 꼬일경우 정의되지 않은 함수를 참조하는 의존성 문제가 발생...)
- 하지만, ES6에서는 참조 순서에 따른 의존성 문제를 해결했는데 import 구문을 사용해서 script 엘리먼트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하도록 변경했다.
//1. import구문을 사용해 지정된 파일(MyModule.js)의 기본으로 공유하는 모듈을 부른다.
import MyModule from './MyModule.js';
//2. 이름을 맞춰서 모듈안의 특정 함수 혹은 변수를 참조 할 수도 있다.
import { ModuleName } from './MyModule.js';
//3. 객체 구조 할당과 유사하게 특정 모듈을 가져올 때 이름이 충돌할 경우 다른 이름으로 변경하여 불러들일 수 있다.
import { ModuleName as RenameModuleName } from './MyModule.js';
function Func() {
MyModule();
}
//4. 변수, 클래스 이름을 다른 파일에서 참조할 수 있도록 export로 정의한다.
export const CONST_VALUE_ = 0;
export class MyClass {}
//5. 현재 파일이 다른 파일에서 기본으로 참조하게 되는 항목을 정의한다.
exprot default new Func();
8. 배열 함수
- 자주 사용하는 함수 forEach(), map(), reduce()만 보겠음.
- forEach()는 기존 for()문에서 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정을 생략하고 쓸수 있음
function parse(qs){
const queryString = qs.substr(1);
const chunks = queryString.split('&');
let result = {};
chunks.forEach((chunk) => {
const [key,value] = chunk.split('=');
result[key] = value;
});
return result;
}
console.log(parse('banana=10&apple=20&orange=30'));
- 위의 예제에서 가변변수 let을 사용했으나 불변변수 const사용하고 싶으면 map()함수를 사용하면 된다.
- map()함수는 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새 배열을 반환한다. (배열을 가공해서 새 배열을 만드는 함수
function parse2(qs){
const queryString = qs.substr(1);
const chunks = queryString.split('&');
const result = chunks.map((chunk) => {
const [key,value] = chunk.split('=');
return {key, value}
});
return result;
}
console.log(parse2('banana=10&apple=20&orange=30'));
- 위에서 작성한 코드로 얻은 결과값은 객체가 아닌 배열이다. 배열을 객체로 변환하고 싶으면 reduce()함수를 사용하면 된다.
- reduce((첫번째 인자 변수,객체)=> { 변수[객체 키 값] = 객체 밸류 값; return 첫번째 인자 변수; },첫번째 인자 변수 초기값);
function parse3(qs){
const queryString = qs.substr(1);
const chunks = queryString.split('&');
return chunks
.map((chunk) => {
const [ key, value ] = chunk.split('=');
return { key, value } ;
})
.reduce((result, item)=>{
result[item.key] = item.value;
return result;
}, {});
}
console.log(parse3('banana=10&apple=20&orange=30'));
9. 비동기 함수
- 비동기 처리란 작업시간이 많이 걸리는 A라는 작업을 실행할 때 다른 작업들(B,C...)이 대기하고 있는 상황이라면 다른 작업들(B,C)부터 먼저 진행하도록 하고 작업 A를(작업A와 관련된 작업들) 이후에 처리하는 방식을 말한다.
- 여러 작업을 효율적으로 처리하기 위해 필요한 비동기 처리.
- 기존 자바스크립트의 비동기 함수 처리 방법
//기존 자바스크립트의 비동기 함수 처리 방식
function work1(onDone) {
setTimeout(()=> onDone('작업1 완료!'), 100);
}
function work2(onDone) {
setTimeout(()=> onDone('작업2 완료!'), 200);
}
function work3(onDone) {
setTimeout(()=> onDone('작업3 완료!'), 300);
}
function urgentWork(){
console.log('긴급 작업!');
}
work1(function (msg1) {
console.log('100ms :' + msg1);
work2(function (msg2) {
console.log('200ms :' + msg2);
work3(function (msg3) {
console.log('300ms :' + msg3);
});
});
});
urgentWork();
- 위에 함수는 총 3개의 지연함수(work1,work2,work3)들이 콜백함수로 총 3개의 계단 모양으로 되어있다. (계단형 콜백 함수를 콜백지옥 이라고 부름....) 지연 작업을 해야하는 함수가 100개 이상이고 모두 연결되어있다면? ES6에서 해결 방법이 나와있다.
- ES6에서는 Promise 클래스의 객체를 생성해서 처리할 수 있음
- Promise 객체를 생성할 때는 클래스의 resolve() 함수 또는 reject()함수에 해당하는 콜백 함수를 직접 전달해야 한다.
const work1 = () =>
new Promise(resolve => {
setTimeout(()=> resolve('작업1 완료!'), 100);
});
const work2 = () =>
new Promise(resolve => {
setTimeout(()=> resolve('작업2 완료!'), 200);
});
const work3 = () =>
new Promise(resolve => {
setTimeout(()=> resolve('작업3 완료!'), 300);
});
function urgentWork(){
console.log('긴급작업!!');
}
const nextWorkOnDone = (msg1) => {
console.log(`done after 100ms: ${msg1}`);
return work2();
};
work1()
.then(nextWorkOnDone)
.then((msg2) => {
console.log('done after 200ms: ' + msg2);
return work3();
})
.then((msg3) => {
console.log('done after 600ms: '+ msg3);
});
urgentWork();
- 위와 같이 Promise 객체를 반환하는 형식으로 코드를 작성하면, 지연 작업들을 콜백 지옥 없이 구현할 수 있음.
728x90
반응형
'DEV > React' 카테고리의 다른 글
React Component 상위 컴포넌트로부터 갱신된 프로퍼티 값 동기화하기 예제 (1) | 2024.11.21 |
---|---|
React Component Lifecycle (컴포넌트 생명 주기) (0) | 2024.11.21 |
vscode js파일 실행 방법 (0) | 2024.11.15 |
맥mac에 vscode(비주얼스튜디오코드) 설치 , 플러그인 설치 (2) | 2024.11.14 |
[React yarn 실행하여 package.json 모듈설치 실행 에러해결] The engine "node" is incompatible with this module. (1) | 2024.11.12 |
Comments