inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

객체 사용하기 (3-11)

배열, 객체 자료형의 관계

해결된 질문

190

성실한 멸치

작성한 질문수 0

0

배열과 그다음 파트인 객체 자료형을 봤는데요.

결국 객체 자료형은 "배열의 한 인덱스" 의미인가요 ?

예를들어 var objects = { 

                  studentName: "kevin"
                  id: 20201000

              }

이면 결국 위에있는 두 문장은 인덱스 [0]인 의미인거죠 ?

그래서 3-12 설문조사에 따르면 

세개의 인덱스가 있고, 각각의 인덱스안에 객체 자료형(프로퍼티: 값) 형태로 있는거고요. 

javascript HTML/CSS

답변 2

1

기쁜 치타

안녕하세요 :)
먼저 객체 자료형은 배열의 한 인덱스가 아닙니다 ㅠㅠ

먼저 배열은 여러 값을 관리해주는 또 다른 값이라고 생각하시면 편하실 것 같습니다. 예를 들어 두 학생의 평균 점수를 관리한다고 해보겠습니다. 각 값은 studentAAverage와 studentBAverage에 담겠습니다.

var studentAAverage = 88;

var studentBAverageb = 93;

그런데 실수로 모든 학생의 평균값이 10점씩 높게 계산됐다고 해보겠습니다. 그래서 올바른 값으로 수정하기 위해선 다음과 같이 해야합니다.

studentAAverage = studentAAverage - 10;

studentBAverage = studentBAverage - 10;

지금은 크게 문제가 없는 것 같지만 학생 수가 20명, 30명 늘어나면 상당히 힘든 작업이 됩니다. 이 과정을 편하게 해주는 게 배열이라고 할 수 있습니다. 예를 들어 다음과 같이 숫자들을 관리할 수 있습니다.

var studentsAverages = [88, 93];

그리고 값을 더하는 작업은 for 문을 이용해 순회를 돕니다.

for (let i = 0; i < studentsAverages.length; i++) {
  studentsAverages[i] = studentsAverages[i] - 10;
}

이 방법은 위 방법대비 더 어려운 것 같지만 학생 수가 많아지면 아주 편리한 방법이 됩니다.

하지만 이렇게만 관리해서는 평균이 88점인 학생이 누구인지 알 수 없게 됩니다. 이럴 때 객체를 함께 사용하면 편리할 것 같습니다.

그 방법을 설명하기 전에 객체에 대해 다시 한 번 알아보겠습니다.

배열은 위에서 보시듯 데이터를 모아놓고 인덱스로 관리합니다. 즉, studentsAverages[0]과 같이 0번째 혹은 1번째 값에 접근하게 됩니다. 

이와 다르게 객체는 key 값을 통해 값에 접근하게 됩니다. 예를 들어 알려주신 객체를 해석해보자면

var objects = {

  studentName: "kevin",

  id: 20201000  

}

는 "kevin"과 20201000이라는 값(value)에 배열처럼 objects[0] 또는 objects[1]이라고 접근하는게 아니라 객체를 정의할 때 설정한 키(key)값을 통해 다음과 같이 접근합니다.

objects.studentName 또는 objects['studentName']

지금까지 예시들을 보시면 아시겠지만 배열은 주로 같은 성격의 데이터를 나열하여 관리할 때 주로 사용되고 객체는 성격이 서로 다른 데이터를 함께 관리하기 위해 사용됩니다.

위에 예시를 다시 설명드리면 studentsAverages는 평균 점수라는 같은 성격의 데이터를 나열하여 관리합니다.  하지만 평균이 88점인 학생이 누구인지 알 수 없는 문제가 있었죠. 그렇다면 평균 점수라는 성격의 데이터가 아닌 학생과 평균 점수라는 데이터를 나열하면 좋을 것 같습니다. 따라서 다음과 같이 데이터를 객체를 통해 정의를 합니다.

var studentsAverages = [

  { name: 'kevin', averageScore: 88 },

  { name: 'james', averageScore: 93 },

];

종합해보자면 물어보신 것 처럼 

{

  name: 'kevin',

  averageScore: 88

}

의 각 두 문장 (name: 'kevin'과 'averageScore: 88)은 인덱스 [0]이 아닙니다. 배열이 아니기 때문이죠.

만약 인덱스 [0]이라면 

var obj = { name: 'kevin', averageScore: 88 };

console.log(obj[0])

로 확인했을 때 값이 나와야하는데 undefined가 출력됩니다.

그리고 배열안에 있는 객체에 접근하기 위해선 인덱스와 키가 함께 사용됩니다.

studentsAverages[0].name // kevin

studentsAverages[0].averageScore // 88

studentsAverages[1].name // james

studentsAverages[1].averageScore // 93

0

성실한 멸치

이해되기 쉽게 자세히 알려주셔서 대단히 감사합니다!!

unregistered 이라 뜨며 작동하지 않습니다.

0

51

1

공부한 내용을 블로그에 정리해서 올려도되나요?

0

94

1

sublime text 설치 불가

0

176

1

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

0

98

1

처음 질문과 옵션 관련 질문입니다.

0

89

1

마지막에 news 관련 질문

0

82

1

태그 닫는 단축키가 뭔가요?

0

169

1

강의에 사용하는 예제 코드 자료 있나요?

0

384

1

회원가입 폼 검증하기 실행이 안됩니다.

0

274

1

이미지랑 아이콘 파일을 어떻게 찾아요?

0

351

1

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

0

475

0

프로젝트 고민 해결이 안되어 다시 올립니다.

0

393

1

프로젝트 고민 다시올립니다.

0

447

1

친구와의 프로젝트 고민

0

420

1

화면 오른쪽 스크롤이 넘어가질 않아요!

0

515

1

학과 설정

0

330

2

회원가입폼 검증 -2 에서 문제가생겼습니다

0

330

1

card.html 버튼 위치

0

601

1

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

0

356

2

carousel의 footer부분에

0

294

1

margin 값에 관한 질문입니다.

0

406

1

function clearMessages() 함수의 원리를 알고싶습니다

0

319

1

removeEventListener

0

235

1

버튼을 눌렀을때 케러셀의 이동

0

809

2