일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Python #Baekjoon
- Redux
- BOJ
- Hooks
- nextjs
- Nullish Coalescing Operator
- Python
- CSS
- firebase
- es11
- JavaScript
- react
- HTML
- Template literals
- Default parameter
- Next
- optional chanining
- 프로그래머스
- 카카오맵 api
- es6
- React Kakao map
- css #html
- Python #CodeUp
- HTML #CSS
- spread operation
- React #Hooks
- 카카오맵
- Today
- Total
목록es6 (6)
거북이개발자
1. Template Literals (1)기존의 문자 작성시 const name='Ryu'; const age='27'; console.log('my name is '+name+' my age is '+age); 이런식으로 +기호를 이용하여 작성했다. (2)Template Literals이용시 const name='Ryu'; const age='27'; console.log(`my name is ${name} my age is ${age}`); 이렇게 간소화가 가능하다.
1. Default parameters (1)일반적 default 값 처리 { function printMessage(message){ if(message==null){ message='default message'; } console.log(message); } printMessage(); } 일반적으로 함수를 정의시 default 값을 정의할때 if(message==null) 이런식으로 사용한다. (2)Default parameters 사용시 { function printMessage(message = 'default message'){ console.log(message); } printMessage(); } 이런식으로 간단하게 쓸 수 있다.
1. Spread Syntax (1)객체, 배열등을 복사 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy=[...array]; console.log(array, arrayCopy); 위와같이 array를 복사할시 const arrayCopy=[...array]; 이렇게 사용가능하다. - ...은 배열, 객체 등의 안의 속성들의 각각을 의마한다. (2)객체, 배열등을 복사2 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy2=[...array, {key:'key3'..
1. Destructuring Assignment (1)일반적 객체내 값 접근시 const student1={ name : 'Ryu', age : 18, }; { const name=student1.name; const age=student1.age; }; 이런식으로 각각의 요소를 객체.요소와 같은 식으로 접근해줬다. (2) Destructuring Assignment-객체 const student1={ name : 'Ryu', age : 18, }; { const{name, age}=student1; console.log(name, age); }; const{name, age}=student1;을 통해서 name, age로 바로 접근이 가능하다. (3) Destructuring Assignment-배열..
1. Shorthand property names (1)일반적 객체생성시 const name='Ryu'; const age=18; const student1={ name : name, age : age, }; 이런식으로 name : name처럼 작성해준다. (2) shorthand prorperty names const name='Ryu'; const age=18; const student2={ name, age, }; 간편하게 name, age로 작성이 가능하다. 결과값이 같은걸 볼 수 있다.
1. Spread Operator (1)사용 배경 es6에 추가된 문법으로 ...을 사용해서 배열의 값을 받아고서나, 확장할 수 있다. (2) 배열 합치기 const singerOne = [1, 2, 3] const singerTwo = [7, 8, 9] const combinedTwo = [...singerOne, ...singerTwo]; const combinedOne = [...singerOne, 5, 6, ...singerTwo]; 위의 예제처럼 합쳐서 배열을 만들 수 있고, 중간에 다른 값들도 넣을 수 있다. (3) 배열 받아오기 const singerOne = [1, 2, 3] const cloneOne = [...singerOne]; 위처럼 스프레드 연산자를 통해서 배열을 쉽게 갖고 올 수..