[자바스크립트] 객체, 프로퍼티, 메소드

 

객체

• 객체는 관련된 데이터와 함수(프로퍼티와 메소드)의 집합니다.
• 즉, 객체는 케이스이고, 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드가 객체를 이루고 있다.
• 자바스크립트에는 8가지 자료형이 있고 그중 7개는 오직 하나의 데이터만 담을 수 있어서 원시형(primitive type)이라고 부른다.
• 그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다.
• 객체는 중괄호 {…}를 이용해 생성한다.
  • 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있다.
  • key엔 문자형, value엔 모든 자료형이 허용된다. 프로퍼티 키를 '프로퍼티 이름'이라고도 부른다.

 

프로퍼티(property)

• ‘키(key): 값(value)’ 쌍으로 구성되어 있다.
• key는 프로퍼티를 식별하기 위한 식별자(identifier)이다.

 

메소드(method)

• 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행되어야 한다.
• 동작을 수행하는 주체가 객체이니, 객체에게 동작을 수행하라고 지시해야 한다.
• 반면, 함수는 자체가 객체라서 자기 자신을 수행하는 것이 가능하다. 이 점이 메소드와 가장 큰 차이이다.
• 즉, 함수는 객체로부터 독립적이고, 메소는 객체에 종속적이다.

var foo={};
foo.a=1;
foo.b=2;
foo.sum=function() {console.log(foo.a+foo.b);};
foo.sum();
// 3

 

쉽게 생각하기!!

• 서랍장 안 파일을 프로퍼티
• 파일 각각에 붙어있는 이름표 -> 객체의 key

 

빈 객체 생성 방법

let user = new Objext(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법 -> 주로 이 문법을 사용

• 중괄호를 이용해 객체를 선언하는 것은 '객체 리터럴' -> 주로 이 방법을 사용한다!

 

 

리터럴과 프로퍼티

• 중괄호 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어간다.

let user = {        // 객체
    name: "Jhon",    // 키: name, 값: Jhon
    age: 30            // 키: age, 값: 30 
};

• '콜론(:)'을 기준으로 왼쪽엔 key, 오른쪽엔 value가 위치
• 현재 user라는 객체에는 2개의 프로퍼티가 있는 것이다.

 

프로퍼티 읽기/추가/삭제

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

// 프로퍼티 추가
user.isAdmin = true; // 프로퍼티 값엔 모든 자료형이 올 수 있다.

// 프로퍼티 삭제
delete user.age; // delete 연산자를 사용하여 삭제

 

여러 단어를 조합해 프로퍼티 이름을 만든 경우에는 프로퍼티 이름을 따옴표로 묶어줘야 한다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

 

마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.

let user = {
    name: "John",
    age: 30,
}

• 이런 쉼표를 ‘trailing(길게 늘어지는)’ 혹은 ‘hanging(매달리는)’ 쉼표라고 부른다.
• 이렇게 하면 추가, 삭제, 이동하는 게 쉬워진다.

 

⚠️ 주의 :: 상수 객체는 수정될 수 있다.

• const로 선언된 객체는 수정될 수 있다.

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

 

 

대괄호 표기법

• '점'은 키가 '유효한 변수 식별자'인 경우에만 사용할 수 있다.
• 즉, 유효한 변수 식별자엔 공백이 없어야 한다.
• 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수 문자가 없어야 한다.
• 키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신 '대괄호 표기법(square bracket notation)'을 사용할 수 있다. 이는 키에 어떤 문자열이 있던지 상관없이 동작한다.

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

• 대괄호 표기법을 사용하면 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

let key = "likes birds";// user["likes birds"] = true; 와 같습니다.user[key] = true;

let user = {  name: "John",  age: 30};let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");// 변수로 접근alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

 

리터럴이란?

• 리터럴이란, 소스 코드의 고정된 값을 대표하는 용어이다.(위키백과)
• 변수 및 상수에 저장되는 ''값 자체''를 말한다.
• 즉, 변수 선언과 동시에 값을 지정해주는 것을 리터럴 표기법이라고 한다.

 

계산된 프로퍼티

• 객체를 만들 때 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우를 말한다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");let bag = {  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.};alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

• [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미
• 사용자가 apple를 입력하면 bag에는 {apple: 5}가 할당

 

개선된 코드

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");let bag = {};// 변수 fruit을 사용해 프로퍼티 이름을 생성해준 것!!bag[fruit] = 5;

 

정리

• 대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 강력하다
• 그러나 작성하기 번거롭기 때문에 단순한 이름이면 점 표기법을 사용, 복잡한 상황이면 대괄호 표기법으로 사용

 

 

단축 프로퍼티

• 실무에선 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있다.

function makeUser(name, age) {  return {    name: name,    age: age,    // ...등등  };}let user = makeUser("John", 30);alert(user.name); // John

• 위의 프로퍼티들은 이름과 값이 변수의 이름과 동일하다. 프로퍼티 값 단축 구문(property value shorthand)을 사용하면 코드를 짧게 줄일 수 있다.

function makeUser(name, age) {  return {    name, // name: name 과 같음    age,  // age: age 와 같음    // ...  };}//------------------// 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능하다.let user = {    name, // name: name    age: 30};

 

 

프로퍼티 이름의 제약사항

• 변수와 달리 객체 프로퍼티에는 예약어 사용 등에 제한 제약이 없다.
• 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환된다.
• 만약 키에 0을 넣으면 문자열 "0"으로 자동 변환된다.

let obj = {  0: "test" // "0": "test"와 동일합니다.};// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,alert( obj["0"] ); // testalert( obj[0] ); // test (동일한 프로퍼티)

 

특별대우 받는 __proto__

let obh = {};obj.__proto__ = 5 // 숫자 할당alert(obj.__proto__);  // [object Object] - 숫자를 할당했지만 값은 객체가 되었습니다. 의도한대로 동작하지 않네요. 무시됨

 

 

‘in’ 연산자로 프로퍼티 존재 여부 확인하기

• 자바스크립트 객체의 중요한 특징 중 하나는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생되지 않고 undefined를 반환한다는 것이다.

let uset = {};alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.

• in을 사용하여 프로퍼티 존재 여부를 확인할 수 있다.
• in왼쪽엔 반드시 프로퍼티 이름!, 이름은 따옴표로 감싸기

let user = { name: "John", age: 30 };alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다

 

 

‘for…in’ 반복문

• for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.
• for(;;) 반복문과는 다르다.

 

기본 문법

for(key in object) {    // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.}

let user = {  name: "John",  age: 30,  isAdmin: true};for (let key in user) {  // 키  alert( key );  // name, age, isAdmin    // 키에 해당하는 값  alert( user[key] ); // John, 30, true}// 결과 순서 : name - John - age - 30 - isAdmintrue - true

 

객체 정렬 방식

• 객체는 '특별한 방식'으로 정렬된다.
• 정수 프로퍼티로 자동 정렬되고 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.
• 정수 프로퍼티’라는 용어는 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미한다.

let codes = {  "+49": "독일",  "+41": "스위스",  "+44": "영국",  // ..,  "+1": "미국"};for (let code in codes) {  alert( +code ); // 49, 41, 44, 1}// 나라 번호가 정수로 취급되지 않도록 속임수를 쓰면 입력된 순서대로 정렬된다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼
• http://insanehong.kr/post/javascript-object/
• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics