본문 바로가기

개발/Web Front-End

[클린코드 자바스크립트] 배열 및 객체

shorthand property

const person = {
getFullName : funtion(){...}
}


const person ={
getFullName (){...}
}

 

위의 getFullName프로퍼티나 아래 getFullName프로퍼티나 같다.

즉 shorthand property를 쓰고 있음을 인지하기


let result = score >= 50 ? "pass" : "fail";


조건 ? true일때 피연산자 : false일때 피연산자

 


좌항프로퍼티?.우항프로퍼티 


좌항프로퍼티가 falsy값(null undefined 외)이면 우항프로퍼티 참조
null undefined시 우항 프로퍼티 참조하지 않음.

좌항 ?? 우항


좌항이 null 또는 undefined시 우항 반환.

let result = 0 ?? "null or undefined"

console.log(result) // 0

let result = null ?? "not null or undefined"

console.log(result) // 0

그렇다면 falsy값을 전부 거르고 싶다면 어떻게?

** falsy값 : false, undefined, null, 0, NaN, ''

 

좌항 || 우항
좌항이 falsy값이면 우항 반환

//object destructing

function person({ name , age }){
this.name = name;
this.age = age;
}

const poll = new Person({name : 'poll', age:30})


// 보통 인자가 세개 이상일 때 구조분해.

 

object destructing

function person({ name , age }){
this.name = name;
this.age = age || 0;
}

const poll = new Person({name : 'poll', age:30})

또는 this.age = age || 0 
위와 같이 falsy값에 대응할 수 있다.

// 뭔가 필수적인 인자를 드러내고 싶다면

object destructing

function person(name, { loc , age }){
this.name = name;
this.age = age;
this.loc = loc;
}

const poll = new Person(name : 'poll', {loc : 'seoul', age:30})


(name , {age, loc}) 과 같이 optional은 destructing형식으로,
name만 분리해서 드러낼 수 있다.


const orders = ['first', 'second', 'third']
const f = orders[0];
cont d = orders[2];

const [f, , d] = orders // 결과는 같다.

const {0 : f , 2 : d } = orders 
// 객체로해도 같다.




모델에 직접 접근 지양하기.
예측가능한 코드를 작성해서 동작이 예측가능하게 해라.

=> 내가 작성한 것에 대입해보기.

'개발 > Web Front-End' 카테고리의 다른 글

URL과 URI  (0) 2022.09.10
SSR vs CSR , SEO문제 해결  (0) 2022.09.10
Executive Context  (0) 2022.08.28
이벤트 버블링  (0) 2022.08.08
브라우저 렌더링 프로세스 - 1  (0) 2022.08.07