Extra Study - Debug, Object(property)

sanghun Lee·2020년 8월 21일

ExtraStudy js

JavaScript

목록 보기

2/3

코딩스타일

https://ko.javascript.info/coding-style
구글, 에어비앤비 등 다양한곳의 스타일 가이드가 있으니 참고해보자

delete연산자 in Obj

다양한 프로퍼티 선언 방법들

계산된 프로퍼티 선언법

보통 객체에서 키와 값을 가지고 있는데 '키'를 변수로 선언해놓은 뒤 외부에서 변경을 할 수 있도록 만든 형태이다. 언젠가 써먹을 수도 있을 것 같은데 딱히 방식이 생각나지는 않는다.

아래와 같이 혼합해서 사용할 수도 있다.(미리 특정단어 설정 뒤 해당 단어를 맞춰사용하기에 적합)

TIP

자바스크립트는 다른언어와 달리 객체내에 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.
undefined는 변수는 정의되어 있으나, 값이 할당되지 않은경우에 쓰이기떄문에 프로퍼티 값이 undefined인 경우는 흔치 않다. 값을 알수없거나(unknown) 비어있다는(empty)것을 나타낼 때는 주로 null을 사용한다.

in 연산자로 프로퍼티 존재 여부 확인하기

자바스크립트는 다른언어와 달리 객체내에 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.
undefined는 변수는 정의되어 있으나, 값이 할당되지 않은경우에 쓰이기떄문에 프로퍼티 값이 undefined인 경우는 흔치 않다. 값을 알수없거나(unknown) 비어있다는(empty)것을 나타낼 때는 주로 null을 사용한다

for ... in 반복문

for(;;)반복문과는 완전 다르게 '객체' 의 모든 'key' 를 순회할 수 있다.

객체 정렬 방식

키값이 정수라면 정수프로퍼티(interger property)에 의해 자동으로 정렬될 것이다.
그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.

for in 활용

배열에서는 인덱스를 통해 쉽게 접근이 가능하여 for(;;) 반복문을 통해 value를 쉽게 얻어 낼 수 있으나
객체는 각자의 키값에 따른 값을 가지고 있으며 인덱스가 없기에 아래와 같이 for in문을 이용하여 모든 키값에 접근 뒤 새로운 변수에 값을 할당해주는 방식을 사용하면 편하다!

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130,
}

const sumsum = (obj)=>{
  let sum = 0;
  for(let key in obj){
    sum += obj[key];
  }
  return sum
}

sumsum(salaries)

TIP-
-값이 특정 자료형을 필요로한다면 obj[key] === 'number' 와 유사한 자료형을 보여주는 조건을 걸면 된다.

참조에 의한 객체 복사

음 무슨소리인가 했는데 자바스크립트에는 크게 원시타입(PRIMITIVE)과 객체!
라는 것이 존재하는데 객체는 참조에 의해 저장되고 복사된다는 것이다(주소라 생각하면 쉬움) 대신 문자열, 숫자 등과 같은 원시형은 값 그대로 저장,할당되고 복사된다는 소리고

그니까 객체는 메모리주소인 객체에 대한 참조값이 변수에 저장되는 것이다.

보통은 객체를 복사할 일이 없다고 하는데 (꽤 있는 것 같던데 ...)

여튼 방법은 Object.assign 이라는 메서드를 이용하면 된다

위 방법은 알고리즘 등을 풀 때 특정값을 제외하고 새로운 배열을 만들때 아마 쓰임이 있지 않을까 생각만 든다 ㅇㅅㅇ..

그래서 더 간단한

object.assign(값 넣을 친구(객체), 넣을친구 들...)

이 존재한다.

만약 동일한 키값을 가지고 있는 객체를 assign 해버린다면 그 키에 해당하는 값이 바뀌어 버린다.

클론을 하고 싶으면

let clone = Object.assign({}, gonnaClone);

이러면 gonnaClone은 clone이라는 친구에게로 복사되어버린다.

중첩객체 복사

만약 객체의 참조값(sampleObject.keyofObject)인 것을 복사하고 싶다면 위와 같은 방식으로는 복사가 되지 않는다고 하는데

위와 같이 객체 전체를 복사하여 각 값을 검사하고 그값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용해야한다고 한다.
위 케이스 같은경우 user의 값에 플러스를 했는데 클론친구도 플러스가 되어있다
이말인 즉 참조가 지속되고 있다는 것이니 deep cloning이 아니라고 판단하나보다.
(새로운 무엇인가가 생긴것이 아니니까!)