Tech Blog of Pinomaker
Published 2022. 5. 2. 04:19
[JavaScript] 배열과 객체 F.E/JavaScript

JavaScript의 자료형은 Number, String, Null, Boolean, Undefinded ...가 있는 데, 그 중 배열(array)와 객체(object)에 대해서 알아보자.

 

배열 Array

배열은 여러가지의 값을 한 번에 저장할 수 있는 자료형이며, 형태는 아래와 같다.

//배열 생성
let ary1 = [1,2,3]

//빈 배열 생성
let ary2 = []

 

배열은 자료의 순서가 중요한 자료형이며, 배열에 속한 값을 꺼낼 때는 아래와 같다.

let ary1 = [1,2,3]
ary[0] //1
ary[1] //2
ary[2] //3

아래와 같은 방법으로 배열에 값을 넣거나, 수정할 수 있다.

//ary1
let ary1 = [1,2,3]
ary1[0] = 6

console.log(ary1) //[6,2,3]

//ary2
let ary2 = []
ary2[0] = "Lee"
ary2[1] = "Kim"
ary2[2] = "Park"

console.log(ary2) //["Lee", "Kim", "Park"]

 

객체 Object

순서가 중요한 배열과 달리 객체는 키와 값으로 구성되어있으며 형태는 아래와 같다.

//object 생성
const obj1 = {
  name : "PINO",
  age : 22
}

//빈 객체 생성
const obj2 = {

}

 

객체는 키를 이용하여 값을 꺼낸다.

//object 생성
const obj1 = {
  name : "PINO",
  age : 22
}

console.log(obj1.name) // PINO
console.log(obj1.age) //22

아래와 같은 방법으로 값을 넣거나 수정할 수 있다.

//obj1
const obj1 = {
  name : "PINO",
  age : 22
}
obj1.name = "minu"
obj1.age = 15

console.log(obj1)
/*
  obj1 = {
    name : "minu",
    age = 15
  }
*/

//obj2
const obj2 = {

}

obj2.color = "blue"
obj2.size = "big"

console.log(obj2)
/*
  obj2 = {
    color : "blue",
    size = "big"
  }
*/

 

배열과 객체 사용

//ary
const ary = [1,"hello", [1,2,3], {name : "pino", age : 22}]
console.log(ary1[2][0]) //1
console.log(ary1[3].name) //pino

//obj
const obj = {
  name : "pino",
  age : 22,
  skill : ["JS", "JAVA", "HTML", "CSS"],
  //객체 안의 함수는 메소드(method)라고 칭함
  add : (a, b) => {return a + b}
}

console.log(obj.skill[0]) // JS
console.log(obj.add(3,2)) // 5

'F.E > JavaScript' 카테고리의 다른 글

[JavsScript] 비동기처리 - Callback Function  (0) 2022.05.18
[JavaScript] ES6 문법(1)  (0) 2022.05.05
[JavaScript] 함수  (0) 2022.05.02
[JavaScript] 반복문  (0) 2022.04.17
[JavaScript] 연산자  (0) 2022.04.17
profile

Tech Blog of Pinomaker

@pinomaker

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!