Sangil's blog

업무를 하며 항상 javascript를 사용 했는데, 참 많이 모르고 사용하고 있구나란 생각이 든다.

javascript에서도 java와 같이 primitive type과 reference type이 나눠져 있다. 

primitive type은 아래와 같이 총 6가지가 있다. (Null과 Undefiend도 하나의 type이였구나) primitive type은 말그대로 원시적인 값 그 자체를 같는다. 

• String
• Boolean
• Null
• Undefined
• Number
• Symbol

-primitive type example

//primitive type
let a = "10";
let b = "20";
console.log(typeof a, typeof b); //string string
console.log(a, b); //10 20
b = a;
a = "100";
console.log(a, b); //100 10

JavaScript에서의 type은 데이터에 따라 컴파일될 당시에 정해지며 typeof를 이용하여 typ을 조회 할 수 있다. 

reference type으로는 Array, Object, Date type등이 있습니다. 

• Arrays
• Object
• Date

-reference type example

//reference type
let c = {
    a:10,
    b:20
}
let d = {
    a:30,
    b:40
}

console.log(typeof c, typeof d); //object object
console.log(c.a, c.b);  //10 20
console.log(d.a, d.b);  //30 40
c=d;
c.a=100;
console.log(c.a, c.b);  //100 40
console.log(d.a, d.b);  //100 40

reference type은 primitive타입과 다르게 c=d로 할당하면, c에 d의 레퍼런스값이 할당 되기 때문에 c의 값을 변경하면, d의 값도 같이 변경되는 것을 볼 수 있습니다.

Vue에서 Object를 사용하는데 Object.assign이란 함수를 많이 사용해서 이를 정리해보고자 했는데... 너무 잘 정리되어 있는 사이트를 발견해서 기록용으로 남기도록 한다

참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign(target, ...sources)

Object.assign함수를 사용하면 target 오브젝트에 sources에 오는 오브젝트들을 병합 할 수 있다. 

아하.. 이래서 vue에서는 default Obejct를 만들어두고, 특정 Object를 초기화해주는 형태로 많이 사용을 했구나. 

흐음 그런데 해당 참고 사이트를 보면 깊은 클로닝에 주의하라고 나와있다. 아래 소스는 위 사이트의 예제를 그대로 가져 왔다.
Object.assign의 경우 해당 값만을 가져오기 때문에 해당 값이 객체의 참조일 경우, 해당 객체의 참조값을 가져와서 아래와 같이 obj1, obj2의 값이 동일하게 변경 되는 것을 볼 수 있다. ( 사실 javascript에서도 객체 참조가 있다는 것을 여기서 처음 알았다 ) 

vue에서 작업하다보면 위와같이 사용 할 경우가 있을 수도 있을거같은데, 이런 부분은 알아두면 좋을거 같다 :)

React Native에서 화면을 전환할때 파라미터를 전달하는 방법을 공부하던 중 아래와 같은 const { itemId } = route.parms란 문법을 보게 되었다.

오잉.. 저게 뭐지? 변수를 {} 대괄호로 감싸서 받네... (참 공부할게 많구나..)

검색해보니 ( https://javascript.info/destructuring-assignment ) Destructuring assignment라는 용어가 나오는데 한국어로 하면 구조분해 할당이라고 한다... 아놔 구조분해 할당이 도대체 뭔말인가싶다.. 이해가 퐉 될만한 한국어는 없나..

내식대로 해석을 하면.. 자바스크립트에서는 객체, 데이터를 생성할 때Array나 Object 형태로 생성을 하는데, 해당 데이터를 가져올 때, const a = array[0] 이나 const a = object.a 라는 형태로 데이터를 가져온다. 

헌데 ES6의 자바스크립트 문법에서는, 구조를 분해해서 할당한다. 라는 개념으로 => object의 구조를 분해해서 변수로 할당한다!  => object 에서 a라는 변수를 분해해 const a에 할당한다! 라는 것을 Destructuring assignment라는 용어로 정리하고, 아래와 같이 쓰자고 정의했나 보다. 
-object 구조

let object ={
    a : "aaaa"
};
// const a = object.a; 기존 javascript 문법
const {a} = object;

-array 구조

let arr = ["a", "b"];
//let first = arr[0]; let second=arr[1]; 기존 javascript
let [first, second] = arr;

결과적으로 우리 기존에 썻던 문법에서 어레이나 오브젝트에서 값가져오는게 귀찮으니까 좀 줄여서 저렇게 쓰자! 라고 정의했나보다. 익숙하지 않아서 그렇지 사용하다보면 편할거 같긴 하다 :). 더 자세한 사용방법은 위에 참고한 링크에 정말 자세하게 소개되어있다 참고하도록 하자!