[딥다이브] 객체 리터럴, 원시 값과 객체의 비교

Dongs·2023년 3월 17일
0

[딥다이브]

목록 보기
3/11

객체 리터럴

  • 객체는 Primitive 타입과 다르게 변경 가능한 값이다.
  • 객체 리터럴은 객체를 생성하기 위한 표기법이다.
  • 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다.

인스턴스

  • 인스턴스란?
    클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. 객체지향프로그래밍에서 객체는 클래스와 인스턴스를 모두 포함한 개념이다..

프로퍼티

  • 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
var afk = {
 name: 'kim',    
 age: 30  
}

위 코드에서 객체 afk의 첫 번째 프로퍼티 키는 name, 프로퍼티 값은 'kim' 이다.

프로퍼티 동적 생성

var obj = {};
var key = 'hello';

obj[key] = 'world';

위와 같이 빈 객체 변수에 대괄호로 키 값 변수를 넣고 할당해주면
{hello : 'world'} 와 같이 프로퍼티가 동적 생성 된다.
빈 문자열도 키 값으로 지정할 수 있지만 쓰지마라..

프로퍼티 축약 표현

  • ES6 에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름 일 때 프로퍼티 키를 생략할 수 있다. 프로퍼티 키는 변수 이름으로 자동 생성된다.
let x =1;
let y =1;
let obj = {x, y}

console.log(obj);  // { x:1, y:1 }

메소드 축약 표현

var obj = {
  name: 'Lee',
  sayHi: function(){
    console.log('afk' + this.name);
  }
}

obj.sayHi();

위는 es5의 메소드 사용 방법이다.

아래는 es6의 메소드 사용 방법이다.

const obj = {
  name: 'Lee',
  sayHi(){
    console.log('afk' + this.name);
  }
}
obj.sayHi();

둘 다 같은 결과를 출력하며 한 가지 다른 점은 메소드를 축약한 표현은 Prototype 객체가 없어서 생성자 함수로 사용 불가능하다!!!!


원시 값과 객체의 비교

  • 원시 값은 primitive 값이라고도 하며 number, string 등등... 변경 불가능 한 값들이다. 전 챕터에서 정리했었다. 객체 타입은 함수 객체 배열 등등,, 모두 변경 가능한 값이다!

따라서 불변성을 가지는 원시 값을 할당한 변수는 값을 변경하려면 재할당 밖에 방법이 없다!

유사 배열 객체

  • 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다! 대표적으로 String 타입의 값을 말할 수 있으며 이 것들은 for문으로 순회를 할 수도 있다..
var str = "string";

console.log(str[0]); // s

console.log(str.length); //6
console.log(str.toUpperCase()); // STRING

자바스크립트는 참 이상하다.. 원시 값이라면서 객체처럼 동작한다..

변경 가능한 값

  • 객체 타입의 값, 객체는 변경 가능한 값이며 mutable 한 값이라고도 부른다.

원시 타입의 값을 변수에 할당하면 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 원시 값에 접근할 수 있다. 즉, 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖는다!

그러나!!

객체를 할당한 변수가 기억하는 메로리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근하는 것이다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체이다.

=> 한 마디로 메모리 한 번만 거치면 불변성인 Primitive 타입, 두 번 거치면 mutable 한 값으로 쉽게 이해했다.

얕은 복사와 깊은 복사..

  • 한 마디로 정리하면 얕은 복사가 이루어지면 그 값에 접근하여 변경혔을 때 초기 값이 변경된다는 것, 깊은 복사는 전과 같은 작업을 동일하게 수행하였을 때 초기 값이 바뀌지 않는다..

더 알아보고 추가해서 포스팅해 볼 예정이다..ㅠㅡㅠ 이해가 잘 안된다

profile
자대고 css 하는 프론트엔드 개발자

0개의 댓글