생각정리
3년쯤 다닌 SI회사를 그만두면서
앞으로 '백앤드냐 프론트냐'에 대한 고민이 생겼다.
"그래도 역시 백앤드?!" 라는 생각에 자바와 스프링을 공부하던 중,
기회가 되어 새 회사에 들어오게 되었다.
그리고 맡게 된 파트는 프론트 ㅎ (이것 또한 무스비.....)
눈칫밥으로만 쓰던 자바스크립트에 좀더 익숙해지기 위해,
이곳저곳에서 본 팁들을 정리해보아야겠다.
삼항연산자 (Ternary Operator)
- IF문 처리 시 사용
- '?' ':'
[before]
const passOrFail = (score) => {
if(score > 90){
return "pass";
}else{
return "fail";
}
}[After]
return score>90 ? "pass" : "fail";
널 병합 연산자 (Nullish coalescing operator)
- null 과 undefined를 체크
- 왼쪽코드가 null 또는 undefined가 인 경우 오른쪽 코드 실행
- 값 뿐만 아니라 함수도 입력 가능
- '??'
[before]
const printMessage = (text) => {
let message = text;
if(text===null || text === undefined){
message = 'nothing to display'
}
console.log(message);
}[After]
const printMessage = (text) => {
const message = text ?? 'Nothing to display';
console.log(message);
}
논리 Or 연산자 (Logical Or operator)
- falsy 체크
- 왼쪽코드가 falsy인 경우 오른쪽 코드 실행
- falsy에 해당하는 것들 : undefined / null / false / 0 / -0 / Nan / '' / ""
- '||'
[before]
const printMessage = (text) => {
let message = text;
if(text===null || text === undefined){
message = 'nothing to display'
}
console.log(message);
}[After]
const printMessage = (text) => {
const message = text || 'Nothing to display';
console.log(message);
}
구조분해할당 (Object Destructuring)
- 객체의 속성을 해체하여 그 값을 개별 변수에 담음
- 객체.value 식의 반복을 피할 수 있음
[before]
const person = {
name :'gyuho',
age : 32,
phone : '01011112222'
}
const instroducePerson = (person) => {
displayName(person.name);
displayAge(person.age);
displayPhone(person.phone);
} [After]
const person = {
name :'gyuho',
age : 32,
phone : '01011112222'
}
const instroducePerson = (person) => {
const {name, age, phone} = person;
displayName(name);
displayAge(age);
displayPhone(phone);
}
전개구문 (spread-syntax)
- 열이나 문자열과 같이 반복 가능한 문자
-> 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장- '...'
[before]
const item = {
type : 'shirt',
size : 'M'
}
const detail = {
price : 1000,
made : 'korea',
gender : 'M'
}
item['price'] = detail.price;
const newObject = new Object();
newObject['type'] = item.type;
newObject['size'] = item.size;
newObject['price'] = detail.price;
newObject['made'] = detail.made;
newObject['gender'] = detail.gender;[After]
const item = {
type : 'shirt',
size : 'M'
}
const detail = {
price : 1000,
made : 'korea',
gender : 'M'
}
//오브잭트 속성 합하기
const newShirt2 = {...item, ...detail};
//price 값만 덮어쓰기
const newShirt2 = {...item, ...detail, price : '2000'};
//push
const newShirt3 = {...item, brand:'nike'};
//unshift
const newShirt4 = {brand:'nike', ...item};?.연산자 (Optional-chaining)
- 객체의 속성에 접근 시 간결성 & 안정성 확보
- '?.'
- 해당 객체가 undefined나 null인 경우에 undefined를 얻음.
[before]
const showJobTitle = (person) => {
if(person.job && person.job.title) {
console.log(person.job.title)
}
}[After]
// ?. 적용
const showJobTitle = (person) => {
if(person.job?.title) {
console.log(person.job.title)
}
}
// Nullish coalescing operator 응용
const showJobTitle2 = (person) => {
const title = person.job?.title ?? 'No Job Yet'
console.log(title)
}
템플릿 리터럴 (Template-literals)
- 문자열 출력 시 ${} 이용하여 문자열 내에 변수 출력
- '${}', '``'
[before]
const person = {
name : 'bob',
score : '4'
}
console.log(
'hello' + person.name +', your score is :' + person.score
);[After]
const person = {
name : 'bob',
score : '4'
}
//${} 사용
console.log(
`hello ${person.name} , your score is : ${person.score}`
);
// JPX에서 사용
<div>
hello {person.name} your score is {person.score}
</div>배열 (Loops)
- 배열 처리 시 사용
[before]
for문 이용[After]
const items = [1,2,3,4,5,6];
//filter, map, reduce 적용
const getAllEvnes = (items) => {
return items.filter((num) => num % 2 === 0)
}
const multiplyByFor = (items) => {
return items.map((num) => num *4 )
}
const sumArray = (items) => {
return items.reduce((a,b)=> a+b,0)
}
// 변수 형으로 표현
const evens = items.filter((num) => num % 2 === 0);
const multiples = evens.map((num) => num *4 );
const sum = multiples.reduce((a,b)=> a+b,0);
// 한번에 표현
const result = items.filter((num) => num % 2 === 0)
.map((num) => num *4 )
.reduce((a,b)=> a+b,0)중복제거 (Set 자료구조)
- set 자료구조는 중복 허용 불가하므로 이를 이용하여 중복 제서
[before]
const array = [1,3,6,2,3,1,2,5,2];
console.log(array)[After]
const array = [1,3,6,2,3,1,2,5,2];
console.log([...new Set(array)])비동기 적용 (async , await)
- promise 형태를 async, await형태로 구현하기
[before]
displayUser(){
fetchUser()
.then((user)=> {
fetchProfile(user)
.then((profile)=>{
updateUI(user,profile);
})
}
)
} [After]
async displayUser () {
const user = await fetchUser();
const profile = await fetchProfile(user);
updateUi(user,profile);
}자료출처
프로그래머를 꿈꾸는 코더