공부하는 내용을 정리하는 용도로 지금까지 네이버 블로그를 사용하다가 최근에 velog를 알게 되었다. 개발자를 위한 블로그라는 점도 그렇고 깔끔한 UI에 푹 빠졌다.🙂 앞으로는 이곳에 공부한 것들을 올릴 것 같다.
Object 객체는 자바스크립트의 내장 객체 중 하나이다. Object를 알기 전에 내장 객체가 무엇인지부터 살펴봐야 한다.
내장 객체(Built-in Object)는 브라우저의 자바스크립트 엔진에 내장된 객체를 말한다. 내장 객체들은 다양한 함수 기능을 가지고 있다. 필요한 함수를 적절하게 사용할 수 있도록 각 함수의 기능을 정확히 이해하는 것이 중요하다.
Object 객체는 다른 모든 자바스크립트 객체의 기본이 되는 객체로, 데이터 관점에서 많이 사용한다. Object 객체를 생성하는 방법은 크게 두 가지가 있다.
Object() 생성자를 이용하는 방법
객체 리터럴 구문으로 생성하는 방법
생성자 함수를 이용해 먼저 빈 객체를 생성한다.
let person = new Object();
위 코드와 같이 let Object명 = new Object() 의 형태로 생성한다.
멤버를 설정해보자.
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.getFullName = function() {
return this.firstName + " " + this.lastName;
};
console.log(person.getFullName()); // John Doe
위와 같이 값으로 함수를 지정할 수도 있다.
객체 리터럴이란, 중괄호 {...}를 이용하여 객체를 생성하는 방법을 말한다. 중괄호 안에 키(key)-값(value) 쌍을 넣어 데이터를 저장하게 된다.
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
위 코드에서 firstName, lastName, age, eyeColor가 키(key)가 된다. 키를 이용해서 값을 바꾸거나 가져올 수 있다.
값을 바꿔보자.
person["age"] = 51;
person.age = 51;
Object명[키(key)] 또는 Object명.키(key)의 형태로 데이터를 바꿀 수 있다.
이번에는 값을 가져오자.
console.log(person["firstName"]);
console.log(person.firstName);
값을 바꿀 때와 같은 형태로 값을 가져올 수 있다.
Object의 값(value)으로는 문자형, 숫자형 뿐 아니라 자바스크립트의 모든 객체가 올 수 있다.
리터럴 구문으로 키-값 쌍을 정의한 뒤에 데이터를 추가해야 한다면 생성자를 이용한 방법의 멤버 설정 방법으로 하면 된다.
let person = {
firstName: "John",
lastName : "Doe",
age : 50
};
person.eyeColor = "blue";
person.getFullName = function(){
this.firstName + " " + this.lastName;
};
console.log(person);
person 객체를 출력하면 다음과 같이 나온다.
{ firstName: 'john',
lastName: 'doe',
age: 50,
eyeColor: 'blue',
getFullName: [Function] }
키와 값이 잘 추가된 것을 알 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object