자바스크립트에서 기본 타입(숫자,문자열,불린값,null,undefined)을 제외한 모든 값은 '객체'다. 따라서 배열,함수,정규표현식 등 모두 객체로 표현된다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문.

자바스크립트에서 기본 타입은 하나의 값만을 가지는 데 비해, 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다. 이러한 프로퍼티의 성질에 따라 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 이러한 프로퍼티를 메서드라고 한다.

객체 생성 방법

1.Object()

자바스크립트 내장 함수로, 다음 예제를 보자.

const object = new Object();
// Object()를 이용하여 object라는 빈 객체 생성

object.name = 'SMP';
object.age = '25';
object.gender = 'male';

console.log(typeof(object)); // object
console.log(object); // { name : 'SMP' , age: '25' , gender : 'male' }

2.객체 리터럴(객체 표기법)

중괄호({})를 이용한 객체 생성법으로,{ 프로퍼티 이름 : '프로퍼티 값' } 의 형태가 된다. 다음 예제를 보자.

const object = {
  name : "SMP",
  age : "30",
  gender : "male"
}

console.log(typeof(object)); // object
console.log(object); // { name : 'SMP' , age: '25' , gender : 'male' }

'프로퍼티 값' 부분에는 자바스크립트의 어떠한 표현식도 올 수 있으며, 이 값이 함수일 경우 이러한 프로퍼티를 메서드 라고 부른다.

3. 생성자 함수

자바스크립트의 경우, 함수를 통해서도 객체를 생성할 수 있다. 함수도 Function() 이라는 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다.

new Function(arg1,arg2,arg3,...,argN, functionBody)
// arg1,arg2,...,argN - 함수의 매개변수
// functionBody - 함수가 호출될 때 실행될 코드를 포함한 문자열

// 예제
const add = new Function('x','y','return x+y');
console.log(add(3,4)); // 7
console.log(typeof(add)); //  function

객체 프로퍼티 읽기/쓰기/갱신/삭제

객체는 새로운 값을 가진 프로퍼티를 생성하고, 생성된 프로퍼티에 접근해서 해당 값을 읽거나 또는 원하는 값으로 프로퍼티의 값을 갱신할 수 있다.

// 객체 표기법을 이용한 object 객체 생성
const object = {
  name: "SMP",
  major : "Industrial Engineering"
};

// 객체 프로퍼티 읽기
console.log(object.name); // 마침표 표기법 (출력값) SMP
console.log(object.['name']); // 대괄호 표기법 (출력값) SMP
console.log(object.[name]); // undefined

// 객체 프로퍼티 갱신
object.name = 'myRealName';
console.log(object.name); // myRealName
console.log(object.['name']); // myRealName

// 객체 프로퍼티 동적 생성
object.age = 25;
console.log(object.age); // 25

// 객체 프로퍼티 삭제
delete object.age;
console.log(object.age); // undefined

대괄호 표기법을 사용 할 때에는, 꼭 프로퍼티를 문자열 형태로 만들어줘야 한다. 그렇지 않으면, undefined 가 출력된다.

자바스크립트 객체의 프로퍼티에 값을 할당할 때, 프로퍼티가 존재하면 프로퍼티 값이 갱신되고, 프로퍼티가 존재하지 않으면 프로퍼티가 동적으로 생성되고 값이 할당된다.

참조 타입의 특성

// 객체 표기법 방식으로 objectA 객체 생성
const objectA = {
  value : 1
};
const objectB = objectA;

console.log(objectA.value); // 1
console.log(objectB.value); // 1

objectB.value = 2;
console.log(objectA.value); // 2
console.log(objectB.value); // 2

여기서 변수 objectA는 객체 자체를 저장하고 있는 것이 아니라, 생성된 객체를 가리키는 참조값을 저장하고 있다.

const objectB = objectA;

그렇기 때문에, objectB라는 변수에 objectA를 할당하게 되면 두 변수 모두 같은 객체를 참조하므로 같은 값이 출력된다. 또한, objectB의 프로퍼티값을 갱신하여도 출력값이 동일함을 확인할 수 있다.

객체 비교

동등연산자 ( == ) 를 이용하여 비교한다. 참고로, Data type이 다른 두 값을 비교할 때에는 일치 연산자 ( === ) 사용을 권장한다.

const a = 100;
const b = 100;

const objA = { value : 100 };
const objB = { value : 100 };
const objC = objB;

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

기본타입의 경우, 동등 연산자를 이용해 값을 비교한다. 두 값 모두 100이므로 true 이다.

console.log( objA == objB ); // false
console.log( objB == objC ); // true

동등연산자 ( == )를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티값이 아닌 참조값을 비교한다. 따라서, 위와 같은 결과가 나오게 된다.

참조에 의한 함수 호출 방식

const a  = 100;
const 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 }

기본 타입과 참조 타입의 경우는 함수 호출 방식도 다르다. 기본 타입은 값에 의한 호출 (Call By Value)방식으로 동작한다. 함수의 인자로 기본 타입이 넘겨질 경우, 함수의 매개변수로 복사된 값이 전달된다. 따라서, 함수 내부에서 매개변수를 이용해 값을 변경해도, 실제로 호출된 변수의 값이 위 예제처럼 100에서 변경되지 않는다.
반면 객체와 같은 참조 타입의 경우, 함수를 호출할 때 참조에 의한 호출( Call By Reference ) 방식으로 동작한다. 즉, 함수를 호출할 때, 객체의 참조값이 전달되고, 함수 내부에서 참조값을 이용해서 인자로 넘긴 실제 객체의 값을 200으로 변경할 수 있다.