[학습일지]JAVA교육일지 17일차

11장 자바스크립트 객체

​

11.1) 객체

• 객체 : 자료형의 관점에서 키(key)와 값(value)으로 구성된 속성의 집합
• 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음

​

• { } 를 이용해 객체 생성 할 수 있음 - 리터럴 방식으로 객체 생성
• 빈 객체 : 속성이 한 개도 없는 객체
• 보통은 빈 객체가 아닌 처음부터 속성을 지정한 상태로 생성

키워드 식별자 = { 키1 : 값1 , 키2 : 값2 , ..., 키n : 값n}

• 데이터의 종류를 가리지 않고 모든 자료형의 데이터를 값으로 가짐
• 객체 안에 또 다른 객체나 함수가 들어갈 수도 있음
• 보통 객체의 키는 문자열로 작성, 큰따옴표나 작은따옴표를 사용하지 않아도 괜찮음
• 키에 공백이 들어가 경우에는 따옴표를 꼭 사용해야 함

​

※ 메서드 : 객체에 정의된 함수

​

​

11.2) 객체 속성

​

11.2.1 객체 속성에 접근하기

​

* 대괄호 연산자로 접근

• [ ] 를 사용해 객체 속성에 접근하는 방법, 배열에도 사용 가능
• 객체명[ "문자열로 키 작성" ]
• []안에 키를 작성할때 반드시 큰따옴표""나 작은따옴표''를 사용해 문자열 형태로 작성
• 따옴표 생략하고 작성 시 키가 아니 변수를 찾게되어 오류 발생
• 객체의 속성값이 배열, 객체 리터럴, 함수 라면

예제)

const person = { name : { firstName : "Gildong", lastName : "Hong" }, likes : ["apple" , "samsung"], printHello : function(){ return "hello"; } }; - 속성값이 객체 리터럴일 경우 console.log(person["name"]["firstName"]); // person 객체의 name 속성값에 할당된 객체의 firstName 속성에 접근 실행결과 ) Gildong - 속성값이 배열일 경우 console.log(person["likes"][0]); // likes속성값의 인덱스 0에 해당하는 데이터에 접근 실행결과 ) apple - 속성값이 함수일 경우 console.log(person["printHello"]()); // person 객체의 printHello() 함수에 접근 실행결과) hello

- 속성값이 객체 리터럴일 경우 : 대괄호를 연속으로 사용하여 접근

// 객체명["속성값"]["속성값"]

​

- 속성값이 배열일 경우 : 대괄호 연속으로 사용,첫 대괄호에는 속성값, 다음 대괄호는 인덱스값

// 객체명["속성값"][인덱스값]

​

- 속성값이 함수일 경우 : 함수 호출 시 () 사용

// 객체명["속성값"]( )

​

* 마침표 연산자로 접근

• 마침표(.)를 이용해 객체 속성에 접근
• 접근할 객체명과 객체 속성의 키를 마침표 연산자로 연결
• 키를 바로 적어야함, 따옴표로 감싸면 오류 발생
• 객체의 키 식별자에 공백이 있으면 대괄호 연산자로만 접근할 수 있음

예제)

const person = { name : { firstName : "Gildong", lastName : "Hong" }, age : 20, likes : ["apple" , "samsung"], printHello : function(){ return "hello"; } }; console.log(person.name.firstName); // person 객체의 name 속성값에 할당된 객체의 firstName 속성에 접근 console.log(person.likes[0]); // likes속성값의 인덱스 0에 해당하는 데이터에 접근 console.log(person.printHello()); // person 객체의 printHello() 함수에 접근 실행결과) Hong apple hello

​

11.2.2 객체 속성 값 변경하기 : 키로 속성에 접근해 값을 재할당

예제) 변수 person에 할당된 객체의 속성에 키로 접근해 값을 변경

const person = { name : "Hong Gildong" } person.name = "Kim"; // 또는 person["name"] = "Kim" cosole.log(person.name); 실행결과) Kim

​

11.2.3 객체 속성 동적으로 추가하기

• 접근하려는 키가 객체에 없다면(객체에 없는 속성), 해당 키와 값으로 구성된 새로운 속성이 객체에 추가됨
• 객체 식별자와 키에 마침표 연산자를 사용하면 객체의 속성에 접근, 속성에 접근해서 할당 연상자(=)으로 값을 할당하면 값이 변경되거나 새로운 속성이 추가됨
• 객체 속성이 값이 함수, 배열, 객체 리터럴일 때도 같은 방법으로 값 변경, 추가
• 속성을 동적으로 추가한다 : 이미 만들어진 객체에 나중에 속성을 추가하는 것

예제)

const person = {}; console.log(person); // {} 빈 객체 person.name = "Hong Gildong"; console.log(person); // { name : "Hong Gildong" } 객체 속성에 추가됨

​

11.2.4 객체 속성 동적으로 삭제하기 : 객체 속성에 접근할 때 앞에 delete 키워드 명시

예제)

const person = { name : "Hong Gildong" } delete.person.name; // 또는 delete person["name"]

​

11.2.5 객체의 데이터 관리 방법

• 자바스크립트에서 기본자료형과 참조자료형으로 나누는 이유는 데이터 관리 방식이 다르기 때문

​

* 기본 자료형의 데이터 관리 : 깊은 복사(deep copy)

• 기본 자료형 : 변수에 데이터를 할당할 때 데이터 그 자체가 할당됨
• 변수a에 할당된 데이터를 변수b에 다시 할당하면? 변수a에 담고 있던 데이터를 변수b에 그대로 복사해 전달
• 변수a와 변수b는 각각 독립적인 값을 가진 상태가 됨
• 변수a의 값을 바꿔도 변수b의 값은 변경되지 않음 (변수a와 변수b는 별도의 데이터를 가지기 때문)
• 두 데이터는 연동되어 있지 않음
• 깊은복사 : 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사되는 것

​

* 참조 자료형의 데이터 관리 : 얕은 복사(shallow copy)

• 객체와 같은 참조 자료형 : 변수 공간에 데이터가 할당되는 것이 아닌 데이터가 위치하고 있는 메모리의 주소 값만 할당, 참조한다
• 변수에 객체를 저장하면 객체의 데이터는 별도의 메모리에 저장, 변수는 데이터가 저장된 메모리 주소만 가지고 있게됨
• 변수에 다른 객체를 재할당 하려고 하면 const 키워드는 재할당 불가능이므로 오류발생
• 변수에 할당된 객체에 속성 추가, 값 변경은 가능
• 변수에 할당된 객체 주소값은 그대로이고, 참조하는 원본 객체 데이터만 변경되기 때문
• 변수a에 할당된 객체를 변수b에 복사한 후, 변수a에 할당된 속성값을 변경하면 변수에 복사된 객체의 속성값도 변경됨
• 변수a에 객체가 할당 될 때 메모리 주소값만 가지고 있기때문에, 변수b에 복사할 때도 주소값만 복사되기 때문
• 두 변수는 같은 주소값을 가지고 있기 때문에 원본데이터의 위치도 같음
• 얕은 복사 : 데이터를 복사했을 때 한쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것