자바스크립트에서 객체란 뭘까요?
함수와 메서드의 차이점에 대해 알고 계신가요?
자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?
자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다.
원시타입을 제외한 나머지 값들은 모두 객체이다.
객체
자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.
프로퍼티 값으로 함수를 사용할 수도 있고, 프로퍼티 값이 함수일 경우,
일반함수와 구분하기 위해 메소드라고 부른다.
객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고,
조작할 수 잇는 동작을 의미하는 메소드로 구성된 집합이다.
객체는 데이터와 그 데이터에 관련되는 동작을 모두 포함할 수 있기 때문에
데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
자바스크립트 객체는 객체지향의 상속을 구현하기 위해
프로토타입이라고 불리는 객체의 프로퍼티와 메소드를 상속 받을 수 있다.
프로퍼티
프로퍼티 키(이름)와 프로퍼티 값으로 구성
프로퍼티키는 프로퍼티를 식별하기 위한 식별자.
프로퍼티 명명 규칙
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
- 프로퍼티 값 : 모든 값
Symbol은 ES6(ES2015)에서 도입된 새로운 원시 데이터 타입
메소드
객체에 제한되어있는 함수를 의미한다.
- 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
- 해당 객체의 상태와 데이터에 접근하거나 수정하는 작업을 수행하기 위해 사용
- 객체의 프로퍼티에 할당된 함수로, 그 객체의 상태를 조작하거나 동작을 수행하는 데 사용
함수와 메소드 차이
코드 블록을 감싸고 실행할 수 있는 작업의 단위를 나타내는 프로그래밍 개념
함수
- 일련의 코드 문장들을 묶어 재사용 가능한 블록으로 정의한 것
- 어떤 객체에 속하지 않고 독립적으로 존재할 수 있다.
- 자바스크립트에서 함수는 일급 객체로 취급되어 변수에 할당하고,다른 함수에 전달하며, 함수에서 반환할 수 있다.
객체 생성 방법
객체 리터럴
가장 일반적인 자바스크립트 객체 생성 방식.
중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다
var emptyObject = {};Object 생성자 함수
객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다.
자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용해서 객체를 생성한다.
개발자가 일부러 Object 함수를 사용해 객체를 생성해야하는 일은 거의 없다.
var person2 = {
name: 'Kim',
gender: 'female',
sayHello: function () {
console.log('Hi! My name is ' + this.name);
}
};생성자 함수
자바스크립트의 생성자 함수는 이름 그대로 객체를 생성하는 함수
일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다.
그래서 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지한다.
- 생성자 함수 이름은 일반적으로 대문자로 시작한다. (생성자 함수임을 인식할 수 있도록 도움)
- 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킴.
- this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
// 생성자 함수
function Person(name, gender) {
this.name = name;
this.gender = gender;
this.sayHello = function(){
console.log('Hi! My name is ' + this.name);
};
}
// 인스턴스의 생성
var person1 = new Person('Lee', 'male');