자바스크립트 기초 (8)

새벽로즈·2023년 10월 6일

TIL 자바스크립트

TIL

목록 보기

19/72

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

array 자료형

    var computerBrand = '삼성';
    var computerInch = 15.6;
    var computerColor = 'white';

여러 데이터를 변수에 저장하기 위해서 보통 변수 선언을 하는데, 옵션이 많아지게되면 번거롭게 변수를 계속 늘려야한다. 위를 예로 들면 컴퓨터의 용량이라던가 그런 옵션이 생긴다면 계속 변수 선언을 해야하는 입장이다.

엑셀의 표처럼 정리할 수 있는 'array 자료형'이 있다.

var computer = ['삼성', 15.6, white, '2TB']

☞ 이렇게 array를 사용하면 변수하나에 여러 자료를 저장하는 자료형 선언이 가능함

array 자료형 출력

console.log(computer[1]);

☞ 이런식으로 출력이 가능함.
☞ 컴퓨터는 0부터 세기 때문에 삼성을 출력하고 싶다면 computer[0]으로 출력해야한다.

array 자료형 수정 혹은 추가

var computer = ['삼성', 15.6, white, '2TB']
computer[0] = '엘지';
computer[3] = '1.5kg';

☞ 0번째인 삼성이 엘지로 바뀌게 된다.
☞ 3번째에 무게 1.5kg라는 자료가 추가됨

object 자료형

    var computer2 = {brand : '삼성', inch : 15.6, color : 'white'}
    console.log(computer2)

☞ object 자료형은 key와 value 형태로 구성되어 있음, {}를 사용하고 꼭 앞에 key를 적어줘야함.

object 자료형 출력

  console.log(computer2['brand'])
  console.log(computer2.brand)

☞ array처럼 []는 동일하나 순서숫자 대신 key를 명시해야 출력 됨, 아래처럼 입력해도 출력 됨

object 자료형 수정 혹은 추가

   var computer2 = {brand : '삼성', inch : 15.6, color : 'white'}
   computer2.color = 'black';

☞ array 자료형과 동일하다. 위 예시의 경우 색상이 블랙으로 바뀐다.

array와 object의 차이점

array는 순서대로 자료 저장하고 object는 이름(key)를 붙여서 저장함
array는 자료간 순서가 있지만, object는 순서 개념이 없기때문에 computer2[1] 이런 숫자는 불가능함
array는 순서 개념이 있기 때문에 computer.sort() 같은 정렬 함수도 사용이 가능함.
array는 중간에 자르는 slice함수도 사용이 가능

    var computer3 = ['삼성', 15.6, 'white', '2TB']
    console.log(computer3.slice(0,2)) // 삼성, 15.6 출력
    console.log(computer3.slice(1,2)) // 15.6 출력
    console.log(computer3.slice(1,3)) // 15.6, white 출력

☞ 이런 식으로 원하는 구간만 출력이 가능함

html에 object 자료 넣기

[문제]

 <div>
    <p>브랜드 / 인치 / 색상</p>
 </div>

 <script>
   var computer4 = {brand : '삼성', inch : 15.6, color : 'white'}
 </script>

[해결]
1. 먼저 각각 html에 삽입하기 위해 span을 쓴다.

 <div>
    <p><span class="brand">브랜드</span> / <span class="inch">인치</span> / <span class="color">색상</span></p>
 </div>

자바스크립트로 출력한다.

 <script>
  var computer4 = {brand : '삼성', inch : 15.6, color : 'white'}
  document.querySelector('.brand').innerHTML = computer4['brand'];
  document.querySelector('.inch').innerHTML = computer4['inch'];
  document.querySelector('.color').innerHTML = computer4['color'];
 </script>