[JAVASCRIPT] 데이터 타입과 연산자(2)

참조 타입의 특성

​

객체비교

​

동등 연산자 (==)를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조값을 비교!

​

var a = 100;

var b = 100;

​

var objA = {value: 100};

var objB = {value: 100};

var objC = objB;

​

console.log (a == b); // (출력) true

console.log(objA == objB); // (출력) false

console.log(objB == objC); // (출력) true

​

*objB와 objC는 같은 객체를 참조하므로 true!

objA와 objB는 다른 객체를 참조하므로 false!

​

참조에 의한 함수 호출 방식

​

var a = 100;

var objA = {value : 100};

​

function changeArg(num, obj){

num = 200;

obj.value = 200;

​

console.log(num);

console.log(obj);

}

​

changeArg(a, objA);

​

console.log(a);

console.log(objA);

​

(출력)

200

{ value: 200}

100

{ value: 200}

​

* 함수 내부에서 매개 변수 num을 이용해서 값을 바꾸어도 변수 a의 값은 변하지 않는 것을 볼 수 있음

참조 타입인 objA의 value값만 200으로 변했다!

​

프로토타입

​

* 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있음.

- 이것이 상속 개념과 같이 자신의 것처럼 쓸 수 있는 것 같은 특징

- 여기서 부모 객체가 프로토타입 객체

​

var start = {

name : 'start',

age: 26

};

console.log(start.toString()); // (출력) [object Object]

console.dir(start); // (출력) age: 26

name: "start"

_proto_: Object

​

* 객체 리터럴 방식으로 생성된 객체의 경우 Object.prototype 객체가 프로토타입 객체가 됨

​

배열

​

배열 리터럴

​

// 배열 리터럴을 통한 5개 원소를 가진 배열 생성

var colorArr = ['orange', 'yellow', 'blue', 'green', 'red'];

console.log(colorArr[0]); // (출력) orange

 

배열의 요소 생성

var emptyArr = [];

console.log(emptyArr[0]);

​

// 배열 요소 동적 생성

emptyArr[0] = 100;

emptyArr[3] = 'eight';

emptyArr[7] = true;

console.log(emptyArr);

, // (출력) [100, undefined, undefined, "eight", undefined, undefined, undefined, true]

console.log(emptyArr.length); // (출력) 8

​

* 배열에서 가장 큰 요소의 값을 기준으로 배열의 크기를 정함!!

​

배열 표준 메서드와 length 프로퍼티

​

push() 메서드

// arr 배열 생성

var arr = ['zero', 'one', 'two'];

​

// push() 메서드 호출

arr.push('three');

console.log(arr); // (출력) ['zero', 'one', 'two', 'three']

​

// length 값 변경 후, push() 호출

arr.length = 5;

arr.push('four');

console.log(arr); (출력) ['zero', 'one', 'two', 'three', undefined, 'four']

-> push() 때문에 길이가 6이 됨 !!

​

배열과 객체

//colorsArray 배열

var colorsArray = ['orange', 'yellow', 'green'];

console.log(colorsArray[0]); // (출력) orange

console.log(colorsArray[1]); // (출력) yellow

console.log(colorsArray[2]); // (출력) green

​

// colorsObj 객체

var colorsObj = {

'0' : 'orange',

'1' : 'yellow',

'2' : 'green'

};

console.log(colorsObj[0]); // (출력) orange

console.log(colorsObj[1]); // (출력) yellow

console.log(colorsObj[2]); // (출력) green

​

// typeof 연산자 비교

console.log(typeof colorsArray); // (출력) object (not array)

console.log(typeof colorsObj); // (출력) object

​

// length 프로퍼티

console.log(colorsArray.length); // (출력) 3

console.log(colorsObj.length); // (출력) undefined

​

// 배열 표준 메서드

colorsArray.push('red'); // ['orange', 'yellow', 'green', 'red']

colorsObj.push('red'); // 에러메세지!!

​

* 객체 리터럴 방식으로 생성한 객체의 경우, 표준 메서드를 저장하고 있는 Object.prototype 객체가 프로토타입!!

배열의 경우 Array.prototype 객체가 부모 객체인 프로토 타입.

Array,prototype 객체는 push(), pop() 등의 메소드를 포함.

Array.prototype의 프로토 타입은 Object.prototype이므로 배열은 두 가지의 표준 메서드를 다 사용 가능!!

​

배열의 프로퍼티 동적 생성

​

// 배열 생성

var arr = ['zero', 'one', 'two'];

console.log(arr.length); // (출력) 3

​

// 프로퍼티 동적 추가

arr.color = 'blue';

arr.name = 'number_array';

console.log(arr.length); // (출력) 3

​

// 배열 원소 추가

arr[3] = 'red';

console.log(arr.length); // (출력) 4

​

// 배열 객체 출력

console.dir(arr);

​

Array[4]

0: "zero:

1: "one"

2: "two"

3: "red"

color: "blue:

length: 4

name: "number_array"

__proto__: Array[0]

​

* 배열도 객체처럼 'key:value' 형태로 배열 원소 및 프로퍼티 등이 있음

​

배열에서 요소를 완전히 삭제하고 싶을때는

splice() 배열 메서드를 사용!!

​

splice(start, deleteCount, item..)

start - 배열에서 시작 위치

deleteCount - start에서 지정한 시작 위치부터 삭제할 요소의 수

item - 삭제할 위치에 추가할 요소

​

var arr = ['zero', 'one', 'two'', 'three'];

​

arr.splice(2,1); // 2번째 요소를 시작점으로 1개의 원소를 삭제 ==== 2번 index 의미!!!

console.log(arr) // (출력) ["zero", "one", "three"]

console.log(arr.length) // (출력) 3