[js] 리액트 들어가기전 꼭 알아야되는 ES6 문법 복습

>> 디스트럭팅 (destructing : 객체를 분해해서 가져오는 것)

let person = {
	name='hong',
    age=17
}

//원래는 
// let name = person.name;
// let age = person['age'] 했는데,

let {name,age} = person

// 이렇게도 쓸 수 있음

 

 

배열에도 똑같이 적용할 수 있음

let array = [ 1,2,3,4,5 ]

let {a,b} = array ;

//결과값
console.log(a,b)
// 1,2 출력
// 젤 첫번째꺼 두 개 출력된다.

 

>> ...rest : 앞의 a,b 제외한 나머지 값 다 가져오기

만약, 배열 나머지값 다 가져오고 싶으면?

 a,b,...rest

-->  a,b를 제외한 나머지 값들을 다 가져올 수 있음

let {a,b,...rest} = array
// '...rest' 문법 사용하면 나머지값 다 가져올 수 있음
// 결과값 : 3,4,5

 

>> spread 문법 : 깊은 복사

⭐️객체를 '복사'해서 그대로 가져오는 것(ref값 가져오는게 아니라)

...rest랑은 다른 문법 ==> spread 문법 (...)

spread 문법

let person = { name : "hong" , age : 17 }

let person2 = {...person}
// 이렇게 작성하면 '깊은 복사'가 된다.

 

 

let person2 = {...person}

 

과

 

let person3 = person

 

의 차이점??

 

person3는 person의 참조값(ref)만 가져온 것 (한마디로, 주소값만 가져왔음)

person2는 아예 새로운 데이터가 복사되어 생기는 것 ( person과 다른 데이터를 바라보고 있는 것 )

 

 

심지어, 깊은 복사하고 값 추가도 가능함 ㄷ ㄷ

let person = { name : "hong" , age : 17 }

let person2 = {...person, address : 'korea' }
// 이런식으로 프로퍼티 추가하여 데이터 생성도 가능하다. 



오메 , 기존 프로퍼티 value값 바꾸는 것도 가능하네 ㄷㄷ

let person = { name : "hong" , age : 17 }

let person2 = {...person, name : 'newName' }
// 기존 프로퍼티의 값을 변경하는 것도 가능!!! 

 

 

>> 삼항연산자

값이 true면 왼쪽거, 없으면 오른쪽거! 

let person =  { name : 'hong' , age : 17 }

if ( person )  { 
	console.log(person.name);
}
else { 
	console.log('person이 없습니다')
}

//이걸 삼항연산자로 바꾸면?
console.log( person? person.name : 'person이 없습니다.' )