일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- optional chanining
- Next
- css #html
- nextjs
- spread operation
- HTML #CSS
- Template literals
- JavaScript
- Python #CodeUp
- 프로그래머스
- Python #Baekjoon
- Default parameter
- BOJ
- 카카오맵 api
- Python
- react
- HTML
- React Kakao map
- es6
- es11
- CSS
- Hooks
- Redux
- Nullish Coalescing Operator
- 카카오맵
- firebase
- React #Hooks
- Today
- Total
목록Web/ES6 (7)
거북이개발자
1. || 연산자 문제점 { const name=''; const useName=name || 'Guest'; const num=0; const message=num || 'undefined'; console.log(useName); console.log(message); } 위의 코드를 보면 ||연산자는 '', 0을 모두 false로 인식한다. 이러한 인식은 사용자에게 혼란과, 버그를 야기할 수 있다. 2. Nullish Coalescing Operator { const name=''; const useName=name ?? 'Guest'; const num=0; const message=num ?? 'undefined'; console.log(useName); console.log(message); ..
1. Optional chaining const person1={ name:'Ryu' job : { title 'Engineer', manager:{ name : bob, }, }, }; const person2={ name:'Kim', }; { function printManager(person){ console.log(person.job.manager.name); } } person1 과 person2의 객체가 있고, 매니저의 이름을 프런트하는 함수를 구현하고 싶다. (1)문제점 printManager(person1); printManager(person2); 위의 사진처럼 person2객체는 job, manger이 정의 되어있지 않아서 오류가 난다. (2)해결(&&연산자) { function pri..
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로 작성이 가능하다. 결과값이 같은걸 볼 수 있다.