- 배열도 함수도 다 객체다.
- 배열도 함수도 아닌애들 중에서 특정 모양을 가지면 객체리터럴이라고 부름. 중괄호를 쓴 애들
- 배열과 객체리터럴의 차이는? 객체리터럴은 값의 이름이 다 붙어 있음. 배열에서는 인덱스만 있다. 둘다 하나로 묶이지만 값의 이름이 필요하다면 객체리터럴을 사요하고 그냥 모으기만 필요하다면 배열을 쓰면 됨.
const 객체 = {
속성1 : 속성값1,
속성2 : 속성값2,
속성3 : 속성값3,
}
- 속성 : 속성값 뒤에 꼭 쉼표를 찍어주자
- 속성의 이름들은 문자열이여도 따옴표를 안붙여줘도 되는 경우가 많다. 하지만 예외가 있음 // 맨 앞에 숫자가 들어가거나, 특수문자나 띄어쓰기가 들어가면 따옴표 안에 써줘야함.
const zerocho = {
name: '조현영',
year: 1994,
month: 8,
date: 12,
gender: 'M',
};
console.log(zerocho.name); //객체안에 속성에 접근할때는 이렇게 접근 가능
console.log(zerocho['name']);
console.log(zerocho.date);
console.log(zerocho['date']); // 대괄호쓸대는 문자열''을 빼먹으면 안됨. 완전 다른 결과가 나옴
조현영
조현영
12
12
- 두 가지 방식의 호출법이 있는 이유는? 아까 위에서 말한 띄어쓰기, 숫자가 앞에 있는 애 등 특이한 애들은 따옴표로 감싸줘야 된다고 했듯이 걔네를 obj.2bc이런식으로 그냥 호출이 불가능함. obj['2bc']이렇게 대괄호로 감싸서 호출을 해줘야함. 그리고 대괄호안에 따옴표를 까먹으면 그냥 변수가 되버린다.
- 없는 속성을 불러내면 undefined 가 호출됨.
const name = 'date'
console.log(zerohco['name']);
console.log(zerocho[name]); // zerocho['date']와 같음
console.log(zerocho.hello) // 없는 속성이라서 undefined 출력
#객체 속성 수정하기
- 추가하고 싶은 값을 해당 속성키에 넣어주면 됨.
zerocho.gender = 'F';
console.log(zerocho.gender);
- 만약 없는 키에 속성값을 넣고 싶다면, 키값이랑 속성값을 써주면 됨.
zerocho.hello = 'hi';
- 제거하고 싶을때는? 앞에 delete를 붙이자
delete zerocho.hello;
console.log(zerocho.hello);
- 우리가 객체를 정할 때 const zerocho = { } 이런식으로 정해서 객체 정한거 자체를 바꿀 수는 없지만 안에 내용물은 바꿀 수 있다.
- 함수랑 배열은 특수한 모양의 객체라고 할 수 있다. 함수랑 배열은 객체리터럴 안에 존재하는 애들이라고 보면 됨.
- 배열이나 함수를 객체리터럴처럼 쓸 이유는 없음. 각각에 맞는 목적대로 쓰면 됨
#메서드
- 객체안에 들어있는 함수를 메서드라고 부름
- 아래의 코드는 우리가 여태까지 많이 사용한 console.log()와 비슷하게 생김. console.log가 바로 console이라는 객체 안에 들어 있는 log 메서드를 사용한 것이다. log 메서드는 웹브라우저가 기본적으로 만들어놓은 객체라서 따로 선언하지 않아도 사용할 수 있다.
const debug = {
log : function(){
console.log(value);
}
};
debug.log('hello Method')
#객체의 비교(원시값과의 차이점)
- 객체끼리 비교를하면 아무리 모양이 같아보이더라도 그 값은 항상 false메로가 나온다.
{} === {}
//false
- 객체가 아닌 숫자, 문자열, 불 값, null, undefined는 모두 true값을 반환함
- 그래서 객체끼리 비교를 할때는 변수안에 걔네를 저장해놓고 변수끼리 비교를 해야한다. 객체들은 변수값에 넣어놓지 않으면 비교를 할 때 다 다르게 나온다.
const a = {name : 'zerocho'};
const array = [1,2,a]
console.log(a===array[2]); // 변수안에 넣어서 비교를 하는거라 true값이 나옴
//지금 여기서 array === [1,2,a];를 해도 false 값이 나온다.//
//기존에 만든 배열이랑 새로만든 배열이랑은 다른 배열로 치기 때문이다 //
- 메모리관점에서 생각을 해보면, 객체를 만들면 메모리는 객체를 각각 형성하고 저장을 한다. 하지만 문자열이나 숫자같은 원시값들은 메모리 이외에 따로 또 저장을 하게 되고 각각의 값이 연결되어 있기 때문에 true로 출력되다.
#참조와 복사
- 객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장하는 셈이 된다. a와 b변수 모두 같은 객체를 저장하고 있는 것이므로 객체의 속성 값을 바꾸면 변수 a와 b가 모두 바뀌는 것처럼 보인다. 이런 상황일때 변수 a와 b가 같은 객체를 참조하고 있다라고 표현. 또는 a와 b 그리고 객체간에 참조 관계가 있다라고 표현
const a = { name : 'zerocho'}
const b = a;
a.name = 'hero';
console.log(b.name);
//hero 출력
- 객체가 아닌 값(문자열, 숫자, 불값, null, undefined)의 경우엔 연결이 안된다. 원시값은 서로 연결되는게 아니라 별도의 저장공간에 따로 값이 저장되고 연결되기 때문. 객체만 서로의 값을 연결한다.
- 대부분의 프로그램 언어들은 객체와 원시값들의 저장공간이 다르다.
댓글