Post

Object?

Posted
By
11 min read

만약 프로토타입글을 보지 않았다면 보고온뒤 객체로 올것. 이유는 읽다보면 알게될지도,,

1. 의의

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로, 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

Object= property+method :: property: 데이터를 의미 :: method: 데이터를 참조하고 조작할 수 있는 동작(behavior)

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다.

1-1 프로퍼티(Property = key: value)

프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다.

1
2
3
4
5
6
7
8
9
10
11
12

- key : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
(문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다.)
- value : 모든 값

const Obj = {
  key1 : 'value',
  key2 : 2021,
  key3 : [],
  key4 : function(){
         console.log('안녕? 난 메소드야 함수인줄 알았지?');
         }
}
  • 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
  • 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.
  • 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다 . 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다.
  • 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.
  • 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

1-2 메소드(method)

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

:: 여기서 프로토타입으로 가는게 더 좋을듯.. 다녀오..

2. 객체 생성 방법 —### 2-1 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식이다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호({})로 묶인 형태이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//리터럴 표기법 (initializer syntax)
//객체 초기자(object initializer)
const obj1 ={
  first_name: 'olaf',
  'last-name': 'snowman' // 자바스크립트에서 '-'는연산자이므로 유효한 이름이아니다. 따라서 따옴표를 사용해야한다.
  [30-2]: 28, //표현식을 프로퍼티 키로 사용하려면 키로 사용할 표현식을 대괄호로 묶어야 한다.
  d: {}
};

console.log(obj1.a) //'olaf'

const a = 'dongee';
const b = 2021;
const c = 'FE';

const obj2 = { a, b, c};

console.log(obj1.b) //2021
  • 전체 객체의 멤버가 {} 내부에 콤마(,)로 구분되어 있다.
  • 각 프로퍼티는 콜론(:)으로 key와 value로 구분되어 있다.

2-2 new 와 object 생성자 함수

  • 주어진 값의 객체 래퍼(wrapper)를 생성
  • 주어진 값이 null이거나 undefined이면 빈 객체를 생성해 반환.
1
2
3
4
5
6
7
8
9
10
11
12
13

// 생성자
const fruits = new Object();
// 프로퍼티 추가
fruits.name: 'watermelon';
fruits.weight: 10;
fruits.sayHi = function() {
  console.log('Hi, I am a' + this.name);
  }

console.log(typeof fruits); // object
console.log(fruits); //{name: 'watermelon', weight: 10, sayHi: f}

fruits.sayHi(); // Hi I am a watermelon.

:: 그냥 객체리터럴을 쓰자,, 아무리봐도 그게 더 편해보인다.

2-3 생성자 함수

사용자 정의의 객체를 정의하기 위해 자바스크립트에서는 class라는 키워드 대신 function을 사용한다. 생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

fucntion Person(name, food) {
this.name = name;
this.food = food;
this.say = funtion(){
  console.log(this.name+'는'+this.food+'!')

// 인스턴스의 생성
var person1 = new Person('동이', '짬뽕');
var person2 = new Person('동2', '올때 메로나');

console.log(person1); //Person { name: '동이', food: '짬뽕', sayHi: ƒ () }

person2.sayHello(); // '동2는 올때 메로나'
}
  • 함수를 정의할 때 사용하는 function과는 어떤 차이가 있을까 ?
    동일한 함수가 호출 가능한 요소로도 사용될 수 있고 다른 객체를 생성하는 요소로도 사용될수 있다. 어떤 역할로 사용될지는 주변 실행 환경, 즉 연산자에 따라 달라진다.
  • new 와 함께 사용되면 메모리에 인스턴스를 생성하는 역할로 사용된다.
  • 단순히 ()연산자를 사용해 Person(“jusungPark”) 과 같이 호출하면 일반 함수처럼 사용된다.
  • this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
  • 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

일반 함수와 생성자를 구분하고자 일반 함수는 소문자로,생성자는 대문자로 시작하는 이름 작명 규칙을 사용한다.

2-4

객체는 new Object(), Object.create() 또는 리터럴 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다.

3. 객체의 특징

3-1 객체의 종류

  • 배열, 함수, 객체, 날짜, 정규표현식 등
  • (new 키워드로 정의된 경우): Boolean, 숫자, 문자열

=> 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

원시값 : 어떤 특성 또는 방법이 없는 값 기본 데이터 형식 : 원시 값을 갖는 데이터

3-2 프로퍼티의 삭제

JavaScript의 프로퍼티는 undefined나 null을 할당한다고 삭제되지 않기 때문에 반드시 delete라는 keyword를 사용하여 프로퍼티를 삭제해주어야 한다.

var foo= new Object();
foo.name='foo';
console.log(foo.name);
> foo

foo.name=null;
console.log(foo.name);
> null

delete foo.name;
console.log(foo.name);
> undefined

4. 객체 접근 방법

4-1 점(.) 표기법

1
2
3
4

get = object.property;
object.property = set;
//이 코드에서, property는 유효한 JavaScript 식별자여야한다.
//따라서 object.$1은 유효하지만 object.1은 안된다.

4-2 괄호([]) 표기법

1
2
3
4
5
6
7
8
9
10
11

get = object[property_name];
object[property_name] = set;
//괄호 표기법에서는 property_name으로 문자열이나 Symbol을 사용할 수 있다.
//문자열은 유효한 식별자가 아니어도 괜찮다. "1foo", "!bar!", 심지어 " "(공백)도 가능.

document["createElement"]("pre");
//이 코드는 점 표기법의 예시와 동일.

//괄호 앞에 공백이 올 수도 있다.

document["createElement"]("pre");

4-3 객체에 Key / Value 추가 방법

var person = { name: “Surim Son” };

console.log(person.name); // 결과 : “Surim Son” console.log(person.age); // undefined (존재하지 않는 key/value)

// 추가하는 방법 person.age = 22; 혹은 person[“age”] = 22;

console.log(person.age); // 결과 : 22

4-4 객체 Key / Value 수정 방법

var person = {
  name: "Surim Son",
  age: 22
};

// 수정하는 방법
person.age = 23; //혹은 person["age"] = 23;

console.log(person.age); // 23

객체,,넘나도 내용 많은것,, 2편으로 나눠야겠다

Blogging, Tutorial
google analytics pageviews
This post is licensed under CC BY 4.0 by the author.