React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (6)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 JavaScript 객체와 배열에 관련된 기본적인 개념을 학습해보도록 하겠습니다.

그럼 바로 시작해보겠습니다.

 

 

1. 객체 생성

 

객체는 두가지 방법으로 생성이 가능합니다.

기본적인 개념은 알고 있어야 하므로, 간단하게 소개하겠습니다.

 

// 객체 생성자
let A = new Object();

// 객체 리터럴
let B = {};

일반적으로 위의 생성자 방식보다는 객체 생성에서는 객체 리터럴방식을 선호합니다.

new 키워드를 사용하여 생성하는 방식은 class 와 같은 생성자함수에서 주로 사용되므로, 이후에 따로 다룰 예정입니다.

 

기본적으로 이 객체는, "원시형" 데이터 타입이 아니므로  다양한 데이터를 넣을 수 있습니다.

하지만 객체에서도, 데이터를 사용할때, 규칙이 존재합니다.

 

일반적으로 객체는 아래의 데이터 형식을 띄웁니다.

 

let A = {
	key1 : "value"
	key2 : "value" 
	}

위와 같은 형태를 Key-Value 가 쌍으로 되는 형태의 데이터를 말하며, 이를 "객체 프로퍼티" 라고 합니다.

즉, 하나의 객체 안에 여러개의 프로퍼티가 존재하고 이를 활용해 다양한 형태로 작성할 수 있습니다.

원시형 데이터의 다양한 것을 설정할 수 있습니다.

 

이렇게도 가능합니다.

let A = {
  key1: 'value',
  key2: 'value2',
  key3: true,
  key4: undefined,
  key5: null,
  key6: [1, 2, 3, 4, 5],
  key7: function () {},
  key8: 123,
};

 

위의 예시를 보면, 다양한 원시데이터 뿐 아니라 함수까지 프로퍼티에 담을 수 있습니다.

여기서 사용할 때 주의해야 할 점은, 단 한가지 입니다. 바로 "key" 가 중복되지 않아야 합니다.

 

위의 객체 내의 프로퍼티를 명칭할때, 2가지형태로만 기억하시면 되겟습니다.

만약 객체 내의 프로퍼티가 key7 과 같이 함수라면 "method", 그 외의 값은 일반적으로 "member"라고 칭합니다.

 

이제 객체 내의 값을 추출해보겠습니다.

이를 추출하기 위해서는 간단하게 사용할 수 있습니다.

 

console.log(A.key1)

즉, A라는 객체에 점 표기법이라는 표기법을 사용하여 점을 찍고나면, 객체 내의 프로퍼티를 지정하면, 프로퍼티의 값이 출력됩니다.

만약, 객체 내의 프로퍼티가 없는 것을 지정하면, "Undefined"가 출력됩니다. 당연히 존재하지 않는 프로퍼티이기 때문이죠.

 

두번째 방법은, 괄호 표기법을 사용하여 접근할 수 있습니다.

사용법에 대한 한가지 주의가 필요한 사항이 있으므로, 살펴보도록 하겟습니다.

 

console.log(A['key1'])
console.log(A[key1])

 

위의 예시를 보면, 1번째 것만 올바르게 동작할 것입니다.

괄호 표기법의 핵심은, A라는 객체의 대괄호 내에 Key를 지정하면 그 값이 출력되지만, 이 경우, 대괄호 내에 반드시 "" 을 표기하여 문자열로 표기해야 합니다.

 

괄호표기법이 점표기법에 비해 귀찮아 보일 수 있지만, 상황에 따라, 동적인 컨텐츠, 프로퍼티를 가변적으로 사용할때는 장점을 갖는 방식이므로, 모두 알아야 합니다.

 

 

2. 객체 추가/수정/삭제하기

 

이제 객체를 생성하고, 불러왔다면, 데이터를 추가로 수정하거나, 제거할 수 있어야 합니다.

이를 처리하기 위해서는 아래와 같이 처리할 수 있습니다.

 

let A = {
  key1: 'value',
  key2: 'value2',
  key3: true,
  key4: undefined,
  key5: null,
  key6: [1, 2, 3, 4, 5],
  key7: function () {},
  key8: 123,
};

현재 위와 같이 작성한 객체 내의 key9 이라는 명칭으로 추가하는 방법 역시 점표기법, 괄호 표기법 모두 사용이 가능합니다.

이를 간단하게 적용하면 아래와 같이 처리할 수 있습니다.

 

A.key9 = 'value9';
A['key10'] = 'value10';

위의 기본적 표기법의 사용법과 크게 다르지 않습니다.

수정 역시도 동일합니다.

 

위와 같이 A라는 객체 내의 키를 입력 후 수정할 값을 대입하면 수정이 가능합니다.

여기서 이전에 학습했던 "let" , "const" 의 차이를 고려하면, let 만 수정이나 추가가 가능한지를 궁금해 할 수 있습니다.

결론부터 말씀드리면, 이는 사용이 가능합니다.

 

"const" 의 특성은 상수로써, 수정이 불가능한 변수라고 학습하셨겠지만, 이 객체 내의 프로퍼티는 객체 자체를 훼손하는 행위가 아니라, 객체 내의 속성을 추가/제거/수정하는 행위입니다.

즉, 프로퍼티 내의 값은 수정이 가능하지만, 객체 자체를 수정하거나 변경하는 것이 아니기 때문에 올바르게 수정이 가능합니다.

 

즉 핵심이 되는 객체는 const 로 선언 후 프로퍼티를 사용할 수 있습니다.

 

삭제 역시도 가능합니다.

사용법 역시 간단하게 구현이 가능합니다. 아래의 예시를 살펴보도록 하겠습니다.

 

delete A.kery1;
delete A["key2"];

 

역시 객체에 "delete"를 표기하고, 처리할 객체의 프로퍼티를 지정하기만 하면 손쉽게 처리가 됩니다. 

하지만, delete 의 처리방법은 한가지의 고려사항이 필요합니다. 

 

delete를 사용해 객체의 프로퍼티를 삭제하는 행위는 엄밀히 따지면 "객체" 의 프로퍼티가 연결을 끊는 형태입니다.

즉 메모리에는 여전히 남아있고 A라는 객체와의 연결을 끊음으로써, 보이지 않는 형태이기도 합니다.

따라서 이를 조금더 효율적으로 관리하려면 수정할때의 방법을 사용하여 처리하고자 하는 객체를 "null" 로 수정하는 것이 조금 더 낫다고 할 수 있습니다.

 

이렇게 하게 될 경우, 메모리의 저장된 value 를 null 로 변경하면서 조금 더 나은 관리가 될 수 있습니다.

물론 정답은 없기때문에 구현하고자 하는 코드에서 필요할 경우 고려하시는게 좋습니다.

 

 

3. 배열 생성하기

 

배열을 생성하는 기본적인 방법은 객체와 마찬가지로 생성자와, 리터럴 방법을 처리할 수 있습니다.

두가지 모두 예시를 살펴보겠습니다.

 

let B = new Array();
let B = [];

역시 각각의 명칭을 배열 생성자, 배열 리터럴이라고 칭합니다.

객체는 {}, 배열은 [] 로 출력되므로, 이를 기억하도록 합시다.

 

배열역시, 객체와 마찬가지로 모든 데이터 타입을 담을 수 있습니다.

let B = [1, 2, 3, 4, 5, "123","123", true, undefined, null, {}, function(){}];

이를 콘솔에서 출력하면, 배열의 길이라고 하여, Length 가 표시되고, 펼쳐서 값을확인할 수 있습니다.

이를 브라우저에서 표현하게 될 경우 배열은 아래와 같은 형태로 출력됩니다.

0 : 1,
1: 2,
2: 3,
3: 4,
//....

배열은 Key가 없는 대신, Index 라고 하는 순서에 대한 값이 존재하며 0부터 시작되는 인덱스가 부여됩니다.

즉, 이 인덱스가 Key의 역활을 대신하여 동작하게 됩니다.

 

배열에서는 값을 추가하면, 중간에 들어가는 것이 아니라, 배열의 끝에 하나씩 추가가 됩니다.

그래서 작성언어 역시도 매우 직관적입니다.

B.push('123');
console.log(B);

기초적인 배열 사용법입니다. 이후 포스팅에서는 조금 더 넓게 구현을 해보도록 하겠습니다.