자바스크립트 - 데이터 타입 (배열, 객체)

배열

비슷한 성격을 갖고 있는 데이터 여러 개를, 한 꺼번에 하나의 변수에 넣어서 관리하기 위해 사용.

var fruit = ["사과", "배", "수박"];

보통 하나의 배열 안에는 동일한 데이터 타입의 값들을 넣어줘.

그리고 배열은 index(좌표값)을 가지고 있어. index는 0부터 시작하기 때문에, 위의 fruit 배열에서 사과는 인덱스 값이 [0], 배는 [1], 수박은 [2] 이렇게 됨.

var fruit = ["사과", "배", "수박"];

console.log(fruit);    // Array(3) 아래 이미지 참고
console.log(fruit[0]);  // 사과

배열 안의 데이터를 바꾸고 싶다면, index로 접근해서 바꿔주면 됨.

var fruit = ["사과", "배", "수박"];
fruit[0] = "포도";

console.log(fruit);    // ["포도", "배", "수박"]

 

연습문제

// 배열 안의 데이터에 접근하는 방법을 응응하여,
// 다음 배열에서 숫자 3000에 접근해봐

var arrTest = [
    [100, 200, 300],
    [1000, 2000, 3000],
    [1111, 2222, 3333]
];

// 해설 : [ ][ ]와 같이 연속적으로 대괄호를 써서 인덱싱 할 수 있어
console.log(arrTest[1][2]);  // 3000 출력

 

 

 

 

객체

배열과 마찬가지로 여러 개의 데이터를 삽입할 때 사용하는 데이터 타입. 하지만 배열이 인덱스를 0, 1, ... 이런식으로 불분명하게? 지정하는 것과 다르게 객체는 데이터의 위치를 명확하게 지정할 수 있어.

 

배열을 만들 때는 [ ] 대괄호를 사용하는데, 객체는 { } 중괄호를 사용해. 그리고 객체는 프라퍼티, 메소드로 구성되어 있음.

var student = {
  name : "devSsom",
  age : 20,
  skills : ["자바스크립트", "파이썬", "HTML"],
  sum : function (num1, num2) {
    return num1 + num2;
  }
}

console.log(student.name);
console.log(student['name']);

이 student라는 객체에서 name, age, skills는 프라퍼티라고 말함. 배열의 index 같은 역할을 해. 그리고 이 프라퍼티 뒤에 입력되는 값들이 데이터가 되는거야. 그리고 객체 안에 들어가는 값은 데이터 타입 종류에 상관없이 모두 다 삽입이 가능해. 문자열, 숫자, 배열, 함수 등등 OK. 

 

근데, 여기서 sum은 함수 형식으로 데이터를 받고 있잖아. 그래서 sum은 프라퍼티가 아니라 메소드라고 해줌. 객체 안에 들어가는 함수를 메소드라고 해.

 

그리고, 객체 안의 데이터에 접근하는 방법은 위의 student.name 코드처럼 객체이름.프라퍼티이름 또는 객체이름.메소드이름으로 입력해주면 됨. 또 다른 방법은 student['name']처럼 객체이름['프라퍼티이름'], 객체이름['메소드이름'] 이렇게 할 수도 있어(큰 따옴표도 됨). 

 

만약에 기존에 객체 안에 담겨있는 데이터를 변경하고 싶다고 하면, 배열과 마찬가지로 객체이름.프라퍼티이름으로 접근을 한 다음에 변경하고 싶은 데이터 값을 넣어주면 됨.

var student = {
  name : "devSsom",
  age : 20,
  skills : ["자바스크립트", "파이썬", "HTML"],
  sum : function (num1, num2) {
    return num1 + num2;
  }
}

student.name = "devSister";
console.log(student.name);

이렇게 하면, 이름이 devSsom에서 devSister로 변경됨.

 

sum 메소드에 인자 10, 20을 넣고 console.log();로 잘 출력되는지 봐보면

var student = {
  name : "devSsom",
  age : 20,
  skills : ["자바스크립트", "파이썬", "HTML"],
  sum : function (num1, num2) {
    return num1 + num2;
  }
}

console.log(student.sum(10, 20));    // 30으로 잘 나옴

함수 호출하는거랑 메소드 호출하는거랑 비슷해. 객체 이름만 앞에 잘 입력해주면 됨.