2021.04.14 JavaScript Object

2021.04.14_JavaScript 객체_정리노트

 

오늘도 역시 ko.javascript.info/object 에서 본 내용들을 혼자 정리해서 주절주절 할 예졍!!!

 

 

단순히 객체는 여러 데이터의 집합을 나타난다고만 생각했는데, 뭐 사실 그게 다다. 하지만!!! 제대로 알아보기 위해서 다시 꼼꼼히 정리.

 

 

그으저언에_______

 

함수가 끝나고, 코드 품질을 위한 챕터가 하나 있었는데, 제대로 읽어보려면 아직 한참이겠지만, 그 중에서 하나만 짚고 넘어가려구 ..!

다음에 제대로 코드를 뚜들뚜들 할 때 열심히 이 챕터도 정리해야지..! 단순히 프로젝트 할 때 ESLint 라는 코드 익스텐션을 깔아서 썼었는데, 막 복잡해서 이거 꼭 써야하나..? 했는데 역시역시 훑어봐도 써야할 듯 함.. 쨋든쨋든 내가 왜 잠시 얘기를 하냐면, 나는 블로그에 쓸 때 하나하나 내가 알기 위해서, 그리고 이해가 쉽게 하기 위해서 주석을 진짜 겁 ㅂ ㅂ ㅂ ㅂ ㅂ  나 썼는데, 실제로 코드를 작성할 때는 매우 잘못된 방법인 것을 알고, 하나 정리하고 가기.

 

주석에 들어가면 좋은 내용

#고차원 수준 아키텍처
#함수 용례
#당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

-- 이는 나중에 내가 코드를 다시 보았을 때, 다른 사람이 내 코드를 보았을 때 효율성을 높인다.

주석에 들어가면 좋지 않은 내용

#'코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명
#코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만 주석을 넣으세요.

 

-- 이는 가독성을 매우 떨어뜨리므로, 넣지 않을 것,,,! 코드 이름과 코드의 스타일 등을 적극 활용해서 코드 자체만으로도 이 코드가 무슨 기능을 하는지 직관적으로 짤 생각을 해야지, 주석 통해서 주절주절 거리면서 설명하지 말아야 한다는 이야기...ㅎㅁㅎ

 

 

물론 나는 블로그에는 주석을 써서 하나하나 무슨 내용이 들어가는지 설명할 예정이다. ( but 내 블로그 제일 많이 보는 사람 = it's me )

하지만 실제로는 이렇게 코드 작성하면 안되니까 주석에 대해선 하나 짚고 넘어가자..!

 

---

 

 

자 이제 객체로 정리 갑씨다!

 

 

 

 

객체 생성자

let user = new Object(); // '객체 생성자' 문법
let user = {
     // key : value >>> property
     // "문자열" : 모든 자료형
 };  
// '객체 리터럴' 문법

 

 객체는 문자열로 이루어진 key 와 모든 자료형으로 이루어진 value 로 이루어지며, 이를 합쳐 프로퍼티 (property) 라 부른다.

 

프로퍼티는 여러개 올 수 있다.

 

여러 프로퍼티를 만들 때는 쉼표 (,) 로 구분하며, 마지막 프로퍼티의 끝은 , 로 끝날 수 있다. 

이를 trailing or hanging 쉼표라고 부르며, 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태이기 떄문에 프로퍼티를 추가, 삭제, 이동하는 것이 쉬워진다.

 

 

* const 객체는 수정이 가능하다.

 

- 객체에서 const 는 객체 전체를 설정하려고 할 때만 오류가 발생한다. ( 여기서는 user 전체 )

const user = {
     name: "me"
  };
  
  user.name = "Korin"; 
  
  alert(user.name); // Korin

 

여기서 점 표기법을 사용하여 user 안에 있는 name 의 value 를 korin 으로 바꾸어 주었다. 

이렇듯 obj.key 를 통해 value 를 읽어낼 수 있다.

 

 

 

하지만 점 표기법은 key 에 공백이 올 수 없고, 오직 유효한 변수 식별자만 읽을 수 있다.

 

 

그래서 key 를 좀 더 자유롭게 사용하고 싶다면,

 

 

대괄호 표기법

 

let user = {};

// set

//여기서 value 는 모든 자료형이 올 수 있으니 true라는 불리안 값으로 프로퍼티 세팅.

user["likes birds"] = true;
 
 

// get

alert(user["likes birds"]); // true

//delete

//delete 명령어를 통해 프로퍼티 삭제 가능.

delete user["likes birds"];

 

대괄호 표기법은 키에 어떠한 문자열이 있어도 읽을 수 있다. 다만 문자열인 경우, 따옴표("")를 사용해서 꼭 묶어 줘야함.

 

 

이를 응용해서 모든 표현식의 평가 결과를 프로퍼티의 key 로 사용 가능.

 

let user = {
	
    name: "korin",
    age : "30",
	
};

let key = prompt(" 사용자의 어떤 정보를 얻고 싶으신가요 ? ", "name" );


// 변수의 반환 값 ( 평가 결과 ) 이 "name" 이 된다면, korin 을 띄워줌.

// 즉, 우리가 프롬프트 창에 name 이라고 입력하면, name 의 value 값인 korin 이 alert 에 출력.

alert( user[key] ) //korin

 

 

또한 대괄호 안에는 복잡한 표현식이 오는 것도 가능

 

let fruit = "apple";

let bag = {
	[fruit + 'Computers'] : 1
};

alert(bag.appleComputers); //1

 

이렇듯 대괄호 표기법은 이름과 값으 제약을 없애주기 때문에 강력하다. 점 표기법으로는 할 수 없는 것들이 많기 때문. 

 

하지만 나도 그렇고 다들 객체를 처음 접할 때 점 표기법으로 객체를 자주 만났을 텐데 , 이는 점 표기법이 좀 더 직관적이고 작성하기 편하기 때문. 그러니 key 가  처음부터  확정적이고, 간단한 프로퍼티의 경우 점으로 접근하고, 아니면 대괄호로 나중에 바꿔보기!

 

 

 

계산된 프로퍼티

 

key 가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라 한다. 

이는 문자열, 문자열로 변환 가능한 값을 대괄호로 묶어서 사용하면, 동적으로 프로퍼티의 key 를 생성할 수 있음.

 

//동적으로 property key 생성하기.


let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {

  [fruit]: 5, // 변수 fruit에서 프로퍼티 key를 동적으로 받아옴.
  
 };

alert( bag.apple ); 

// fruit에 "apple"이 할당되었다면, 5가 출력.

//계산된 프로퍼티 사용해서 동적으로 property key 생성.


let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");


//빈 오브젝트 생성.

let bag = {};

// 변수 fruit을 사용해 프로퍼티 key 를 만듬.

bag[fruit] = 5;


alert( bag.apple ); // apple 이 할당 되었다면, 5 출력

 

이렇듯 밑의 예시처럼 계산된 프로퍼티로 생성하게 되면, 코드가 좀 더 깔끔해진다.

 

 

 

단축 프로퍼티

 

기존 변수에서 프로퍼티의 value를 받아와야 하는 경우가 있으면, 단축  프로퍼티를 사용 가능.

 

// name ,age 는 프로퍼티의 key 와 변수의 이름이 같음.


function makeUser(name, age) {
    return {
    
      name: name,
      age: age,
      
    };
  }
  
  let user = makeUser("korin", 23); // 기존 변수 name, age 사용.
  
  alert(user.name); // korin

 

// 단축 프로퍼티

function makeUser(name,age){

	return{
    
    	name, // == name : name
        age,  // == age : age
        
    };
}


let user = makeUser('Korin',23 )

alert(user.name) // korin

 

이렇게 사용하면 마찬가지로 코드가 간단해진다. 단축 프로퍼티와 일반 프로퍼티를 한 객체 안에서 섞는 것도 가능하다. 

 

//일반 프로퍼티, 단축 프로퍼티 혼합 사용 예시


function makeUser(name,age){

	return{
    
    	name:name, 
        age, 
        
    };
}

 

 

 

객체의 프로퍼티 key 에서 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환이 된다.

 

변수 이름엔 for, let ,return 과 같은 이미 문법적인 용도로 사용되고 있는 예약어들에 대해서는 사용이 불가했다. 하지만 객체의 프로퍼티의key 에서는 사용이 가능하다. 

 

 

let obj = {

    0: "test" //"0": "test" 로 자동 형변환.
    
  };
  
  
  alert( obj["0"] ); // test
  alert( obj[0] ); // test (동일한 프로퍼티)

 

 

in 연산자로 프로퍼티의 존재 여부를 확인 가능하다.

 

자바스크립트에서 객체의 중요 특징 중 하나는, 만약 내가 존재하지 않는 프로퍼티에 접근하려 할 때는 에러를 띄우지 않고 undefined 를 반환한다.

 

// 일치 연산자를 사용하여, 존재 여부를 찾는 방법


let user = {};

alert( user.noSuchProperty === undefined ); //true

 

//in 연산자 사용으로 존재 여부 확인 방법

let user = { name: "korin", age: 23 };

alert( "age" in user ); // true
alert( "blabla" in user ); // false

 

 

let user = { age: 23 };

let key = "age";

alert( key in user ); //true

// 여기서 key 는 "key" 라고 하지 않아서 key 라는 프로퍼티의 이름이 아니라, 변수에 저장된 "age" 로 인식해 true 출력. 

 

"key" in obj 의 형태로 in 연산자 사용이 가능한데, 따옴표를 붙이지 않으면 엉뚱한 곳에서 찾아올 수 있으니, 주의!!

 

근데 다르게 쓰는 방법일 뿐인 것일까? 그러면 그냥 === 써서 해도 되는거 아닌가?

 

let obj = {

  // 만약 test 에 undefined 를 할당했다면 ?

  test: undefined
  
};

alert( obj.test ); //undefined

// 분명 test는 있는 값인데 , 이게 undefined 를 할당해서인지, 아니면 test가 존재하지 않는다는 건지 헷갈림.

alert( "test" in obj ); // true

// `in`을 true or false 로 정확히 프로퍼티의 유무를 확인 가능.

 

 

 

객체에서 for in 반복문을 쓰면, 객체의 모든 key 를 순회할 수 있다.

 

let user = {
  name: "korin",
  age: 23,
  isAdmin: true
};

// for (props in obj) 형태

for (let key in user) {
  
  // key 출력
  
  alert( key );  // name, age, isAdmin
  
  //value 출력
  
  alert( user[key] ); // korin, 23 , true
  
}

 

 

 

 

정수 프로퍼티는 프로퍼티를 생성한 순서에 상관없이, 자동으로 정렬되어 나온다.

 

객체는 특별한 방식으로 정렬 된다. 정수 프로퍼티는 자동으로 정렬되고, 나머지는 객체에 추가한 순서대로 정렬된다.

 

정수 프로퍼티

정수에서 왔다갔다 할 수 있는 문자열로, "49" 와 같은 것들이 정수 프로퍼티. "+49" , "1.2" 같은 경우는 "49" ,"1" 로 각각 변형이 되므로 정수형 프로퍼티가 아니다.

 

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

// 정수형 프로퍼티는 1부터 자동정렬 하여 for문 순회.

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

 

정수형 프로퍼티는 이렇게 정렬되어 순회하는데, 만약 내가 작성한 순서대로 나오게 하고 싶으면 ?

 

 

// + 를 붙여 정수형 프로퍼티가 아니게 만들면, 내가 작성한 순서대로 나온다.

let codes = {
  "+49": "독일",
  "+41": "스위스",
  "+44": "영국",
  // ..,
  "+1": "미국"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

 

이런식으로 간단한 트릭을 사용하면 된다. 

 

 

 

지금까지 우리는 몇 가지 특수한 기능을 가진 연관 배열 (associative array) 이라는 뜻의 일반 객체를 정리해보았움..!

 

이 외에도 다양한 종류의 객체들이 있는데 , 이것도 다음에 배우면서 정리해야지! ㅎㅁㅎ...!

 

Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임

Date – 날짜와 시간 정보를 저장할 때 쓰임

Error– 에러 정보를 저장할 때 쓰임

기타 ....

---

후.. 어케 보면 거의 책 내용을 ..뺏긴 듯 하지만 나름.. 직접 치면서 중간중간 내가 이해 가능하게 혼자 주절 주절 거리면서 정리...한듯 하다 ㅎㅁㅎ

객체는 정말 중요한 개념이니 처음부터 끝까지 꼼꼼하게 정리해보아쑴 !! 후!!!  오늘의 포스팅 끝끝!!!!!