자바스크립트의 객체와 구성 요소, 접근 방법 등의 내용을 포함하고 있습니다. 😊

👥 자바스크립트의 객체

프로그래밍에서 객체(Object)는 자주 사용되고 언급되는 요소 중 하나인데, 자바스크립트에서 객체는 관련된 함수와 데이터의 집합으로 정의할 수 있다.

여기서 생각나는 가장 가까운 기억은 객체 지향 프로그래밍(OOP)이 아닐까 싶다. 자바스크립트는 객체 지향 프로그래밍 언어이며 스크립트 언어에 속한다.

💡 절차적 프로그래밍(Procedural Programming)과 객체 지향 프로그래밍(Object Oriented Programming)

프로그래밍에서 무엇을 지향한다는 것은 특정 방식에 대한 패러다임이라고 해석할 수 있다. 그리고 앞으로 설명할 두 가지 방식이 반대되는 방식이 아님을 인지해야 한다.

앞에서 의미한 지향의 의미로 해석하면, 절차적 프로그래밍(Procedural Programming)을 절차 지향적인 방법(순차적인 명령 수행)으로 프로그래밍을 한다고 생각할 수 있지만, 이 부분은 번역상의 오류로 다뤄진다. 절차적이지 않은 프로그래밍을 생각할 수 없는 부분에서 이를 알 수 있다.

정확히 말하자면, 절차적 프로그래밍에서 절차적(procedural)이라는 뜻은 프로시저에 대한 이야기다. 프로시저에 대해 간단히 이해하면 특정 업무를 수행하기 위한 과정라고 생각하면 편하다.

그런 의미에서 절차적 프로그래밍은 특정 업무 수행을 위한 과정에 따라 차례대로 코드를 기술하는 방식이라고 이해할 수 있다. 그렇기에 Top-Down 방식으로 설계되고, 컴퓨터의 처리구조와 유사하여 빠른 처리 속도를 갖고 있다. 대표적인 언어로는 C가 이에 해당한다.

과거에는 비교적 큰 규모의 하드웨어와 소프트웨어가 필요하지 않아 절차적 언어가 대표적인 언어였지만, 코드의 규모가 커지고 복잡해져 동작을 이해하기에 어려운 상태의 '스파게티 코드'가 되어버리는 단점이 생겨났다. 이러한 문제 극복을 위해 객체 지향 프로그래밍이 등장한 것이다.

객체 지향 프로그래밍(Object Oriented Programming)은 객체를 생성하고, 해당 객체 단위의 상호 작용을 서술하는 방식을 의미한다. 객체 지향 프로그래밍은 처리 속도가 상대적으로 느리지만, 캡슐화(Encapsulation)와 상속(inheritance), 다형성(polymorphism)이라는 키워드와 장점을 설명할 수 있다.

우선, 캡슐화(Encapsulation)는 객체의 속성과 행위를 하나로 묶고, 실제 구현 내용을 은닉한다는 의미를 갖는다. 여기서 은닉은 접근 제한자를 통해 이루어질 수 있다. 그리고 상속(inheritance)은 상위 객체와 하위 객체의 관계에서 하위 객체가 상위 객체의 필드 및 메소드를 사용할 수 있게 물려준다는 의미이다. 마지막으로, 다형성(polymorphism)은 하나의 변수명, 함수명 등이 상황에 따라 다른 의미로 해석될 수 있다는 것이다. 이는 오버라이딩(Overriding)과 오버로딩(Overloading)이 가능하다는 의미다.

자바스크립트는 이 중 객체 지향 프로그래밍에 해당한다.

🔖 출처

절차적 프로그래밍 : 마녀표정님 Tistory : 1. 절차적 프로그래밍 : Procedural Programming
절차적 프로그래밍 & 객체 지향 프로그래밍 : Young Developer's Note : 절차적 프로그래밍과 객체 지향 프로그래밍
절차적 프로그래밍 & 객체 지향 프로그래밍 : 코딩과 프로그래밍 그 사이 어딘가... : 객체지향 프로그래밍(OOP) 절차적 프로그래밍(PP)
절차적 프로그래밍 & 객체 지향 프로그래밍 : Stranger's Lab : 객체지향(OOP)과 절차적 프로그래밍(PP)
객체 지향 프로그래밍 : 기본기를 쌓는 정아마추어 코딩블로그 : 객체 지향 프로그래밍이 뭔가요? (꼬리에 꼬리를 무는 질문 1순위, 그놈의 OOP)
프로시저(Procedure) : 애송이의 코딩이야기 : [ Oracle ] 프로시저와 함수의 차이

💡 스크립트 언어?(Script Language)

스크립트 언어(Script Language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가르킨다. 이는 이미 존재하는 소프트웨어를 제어하기 위한 언어라는 뜻이다.

스크립트 언어에 대해 찾다보면 연관된 내용으로 컴파일 언어와 인터프리터 언어에 대한 내용을 많이 찾게 된다.

컴파일 언어와 인터프리터 언어를 간단하게 설명하자면, 컴파일러는 소스코드를 모두 기계어로 변환한 뒤 실행하는 언어를 의미하고, 인터프리터는 소스코드 한 줄씩 해석하여 바로 명령어를 실행하는 언어를 의미한다.

정의에 따르면, 스크립트 언어는 인터프리터 언어에 해당하는 것으로 이해되지만, 모든 스크립트 언어는 인터프리터 언어에 해당하는지에 대한 질문을 보면 컴파일 되지만, 스크립트로도 실행 가능한 부분도 있다고 생각된다.

🔖 출처

스크립트 언어 : 위키백과
스크립트 언어 & 인터프리터 & 컴파일러 : 런코딩 : [자바스크립트] 스크립트언어 / 인터프리터와 컴파일러 차이점
스크립트 언어 & 컴파일 언어 : damiano1027님 벨로그 : [CS] 스크립트 언어 vs 컴파일 언어

자바스크립트가 객체 지향 프로그래밍 언어에 속하기에 객체에 대한 이해는 자바스크립트를 사용하기 위해 필요한 과정으로 생각된다.

이전 자바스크립트 기초에 대한 포스팅에서 기본 타입을 제외한 나머지 데이터가 모두 객체에 해당한다.

객체의 프로퍼티(Property)

객체는 프로퍼티의 집합이다.

프로퍼티(Property)란 객체를 이루는 단위이다. 프로퍼티는 키(key)와 값(value)로 구성되어 있고, 프로퍼티 키를 통해 각 프로퍼티를 식별할 수 있다.

위 내용들을 예시를 통해 알아보자.

let obj = {
  firstName : 'Acid',
  lastName : 'Park',
  age : 24
}

위 예시는 객체를 생성하는 객체 리터럴 문법이다. 위와 같이 중괄호({})를 열고 안에 키와 값을 콜론(:)을 기준으로 구분하여 작성하며, 프로퍼티 간의 구분은 콤마(,)를 통해 구분한다.

위 예시에서 키는 firstName 과 lastName, age 가 이에 해당하고, 값은 'Acid', 'Park' 그리고 24 등이 이에 해당한다.

프로퍼티 값에는 모든 자료형이 들어올 수 있고 배열과 함수도 가능한데, 값이 함수일 경우 이를 메소드(Method)라고 정의한다.

💡 메소드(Method)와 함수(Function)의 차이

함수와 메소드의 관계는 함수가 더 포괄적인 의미를 갖는다고 이해할 수 있다.

둘의 차이를 간단히 설명하면, 함수의 경우에는 독립적이고, 메소드의 경우 객체에 종속적이다.

이를 간단한 예시로 이해해보자.

// 함수
function func() {
  console.log('Hello, World!')
}
// 메소드
let obj = {
  method : function () {
    console.log('Hello, World!')
  }
}
func() // 함수 호출
obj.method() // 메소드 호출

위 두 가지 경우는 같은 값을 출력한다. 하지만, 함수는 독립적으로 자신의 함수명(func())만으로 실행이 되지만, 객체(obj)에 종속된 메소드(method)의 경우 obj 를 통해 실행된다.

이러한 부분이 메소드가 객체에 종속된다는 점을 의미한다.

🔖 출처

메소드와 함수 : 지속가능한 개발 블로그 : 메소드와 함수 (Method and Function)의 차이점

객체를 구성하는 프로퍼티는 다음과 같은 방법으로 접근할 수 있다.

프로퍼티 접근법

프로퍼티에 접근하는 것은 점 표기법(Dot notation)과 괄호 표기법(Bracket notation)을 통해 가능하다.

두 가지 방식을 통해, 다음과 같이 프로퍼티에 접근할 수 있다.

let obj = {
  firstName : 'Acid',
  lastName : 'Park',
  age : 24
}

console.log(obj.firstName) // 점 표기법
console.log(obj['firstName']) // 괄호 표기법

위 두 가지 방식은 같은 결과를 출력한다. 하지만 프로퍼티 식별자에서 차이를 보인다.

점 표기법의 경우 알파벳으로 시작하며, 공백을 포함하지 못하고, 숫자로도 시작할 수 없다. 하지만 괄호 표기법의 경우 문자열 형태를 가지며, 공백을 포함할 수 있고, 변수 또한 문자열로 해석된다면 사용할 수 있다.

점 표기법이 비교적 읽기 쉽고, 작성하기 더 편하기 때문에 자주 사용하지만, 특수한 경우에는 괄호 표기법이 더 용이할 수 있다.

예를 들어, 조건에 따라 다른 프로퍼티에 접근해야 하는 경우가 있다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

function func(n) {
  let result = n === 0 ? 'name1' : 'name2'
  return result
}

console.log(obj[func(1)])

해당 경우 'Robert' 라는 값이 출력되는 것을 확인할 수 있다. 이렇게 괄호 표기법을 사용하면 함수의 인자 값에 따라 유동적으로 다른 프로퍼티에 접근할 수 있다.

프로퍼티에 접근하는 방법을 알아보았으니, 이어서 프로퍼티 추가와 변경 및 제거에 대해 알아보자.

프로퍼티 추가, 변경, 삭제

프로퍼티의 추가와 변경은 위 두 가지 접근법을 통해 가능하다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

obj.name3 = 'Tom' // 점 표기법 추가
obj['name4'] = 'Duke' // 괄호 표기법 추가

console.log(obj.name3, obj.name4) // output : 'Tom' 'Duke'

obj.name3 = 'Kim' // 점 표기법 수정
obj['name4'] = 'Park' // 괄호 표기법 수정

console.log(obj.name3, obj.name4) // output : 'Kim' 'Park'

위와 같이 점 표기법과 괄호 표기법을 활용하여 프로퍼티의 추가와 변경이 가능하다.

괄호 표기법의 경우에는 동적으로 프로퍼티를 추가할 수 있다.

const obj = {

};

['red', 'green', 'blue'].forEach((color) => {
  obj[color] = color.substring(0, 1);
});

console.log(obj)
/* output : [object Object] {
  blue: "b",
  green: "g",
  red: "r"
} */

해당 예시의 경우 배열 내 요소들을 forEach() 메서드를 통해 순환하면서, 배열 내 요소들을 각각 프로퍼티 키로 가져오고, substring() 메서드를 활용하여 요소의 앞 글자만 추출하여 프로퍼티 값으로 저장하는 예시이다.

위와 같이 파라미터 값을 활용하여 동적으로 프로퍼티를 추가할 수 있다.

프로퍼티의 삭제는 배열 요소의 삭제와 같이 delete 연산자를 사용하여 가능하다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

delete obj.name1

console.log(obj) // output : [object Object] { name2: "Robert" }

위 예시와 같이 delete 연산자를 통해 프로퍼티의 삭제를 진행할 수 있다.

객체와 for...in 문

앞의 반복문에 대한 포스팅에서도 다룬 내용이지만 객체에 대해 알았으니, 다시 한 번 짚고 넘어가자.

for...in 문은 객체 내부에서 프로퍼티 키를 대상으로 순환한다.

let obj = {
    a: 1,
    b: 2,
    c: 3
};
for (let i in obj) { // i = key 값
    console.log(i + ': ' +obj[i]);
};
// output : a: 1, b: 2, c: 3

해당 예시에서 i 는 객체 obj 내부의 프로퍼티 키인 a, b, c 에 해당한다. 이처럼 프로퍼티 키로 접근할 수 있지만, 값(value)에 직접적으로 접근할 수 없다. 그래서 예시와 같이 obj[i] 와 같은 형식으로 값에도 접근할 수 있다.

객체와 메소드(Method)

객체의 저장된 값이, 즉 프로퍼티 값이 함수일 때, 이를 메소드(method)라고 한다. console.log() 의 경우에도 메소드의 형태를 갖고 있는데, 여기서 console 이라는 객체의 메소드인 log() 의 프로퍼티 값이 함수라는 것을 알 수 있다.

let obj = {
  sayHello : () => {
    console.log('Hello')
  }
}

obj.sayHello() // output : 'Hello'

위 예시는 console 에 Hello 라는 값을 출력하는 obj 의 메소드를 작성한 것이다. 해당 메소드의 경우 객체 obj 에만 사용이 가능하다.

또한, 메소드를 활용하면서 객체 내부의 프로퍼티 값을 활용할 수 있는데, 이와 관련되어 this에 대한 개념이 있다.

메소드와 this

메서드를 통해 객체 내부 정보에 접근할 수 있을 때, 메소드는 제 역할을 할 수 있다. 이와 관련되어 this라는 키워드가 있다. this 는 해당 객체를 가리키며, 이때 해당 객체는 메소드를 호출할 때 사용된 객체를 의미한다.

다음의 예시를 보면서 알아보자.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

해당 예시를 보면 동일한 sayHi() 라는 함수를 각각의 객체 user 와 admin 에 메소드로 추가한 뒤에 이를 실행하니, 결과 값이 John 과 Admin 으로 다르게 나타났다.

이를 통해, 자바스크립트에서 this 값은 런타임에 의해 결정된다는 것을 알 수 있다.

자바스크립트에서 this 가 어떻게 작동하는지에 대해서 지난 함수 포스팅에서 다뤘으니, 일반 함수와 화살표 함수의 this 차이, scope 의 구분에 대해 넘어가 다시 알아보자! 😊

🔖 출처

메소드 : 태기의 개발 Blog : 자바스크립트 - 객체 메소드 정리
메소드와 this : javascript.info : 메서드와 this

🔖 전체적인 참고

MDN Web Docs : JavaScript 객체 기본