(28) JavaScript - 배열 (Array)의 기본구조

여기 필자가 좋아하는 음식을 1등부터 4등까지 나열한 객체를 만들어 봤다.

    let favoriteFood = {
        '1st': '야채곱창',
        '2nd': '냉면',
        '3rd': '김치찌개',
        '4th': '갈비'
    }

그런데 이런 경우에는 프로퍼티 네임보다는 값들의 순서가 좀 더 중요한 상황이기 때문에

프로퍼티 네임은 사용하지 않고 값들의 순서만 유지해도 될 것이다.

이럴 때는 객체보다 배열(Array)를 활용하는 것이 좀 더 효율적이다.

배열(Array)

    let favoriteFoodList = [ //배열 생성
        '야채곱창',
        '냉면',
        '김치찌개',
        '갈비'
    ]

▲ 배열은 중괄호 대신 대괄호 [ ] 로 만들고 쉼표로 구분해서 순서대로 값을 입력하면

favoriteFoodList라는 배열이 만들어진 것이다.

또한 배열 안에 있는 이 값들은 요소(element)라고 부른다.

배열은 이렇게 대괄호 안의 각 요소별로 순서를 알려주는 숫자가 매겨지는데,

이 숫자 값을 인덱스(index) 라고 부르고

index가 객체랑 비교했을 때 프로퍼티 네임의 역할을 하는 것이다.

index를 통해 배열의 요소를 가져오는 방법은 객체의 대괄호 표기법과 같다.▼

    //index == propertyName 
    console.log(배열이름[index]);

▲ 배열 이름 뒤에 대괄호를 열고 안에 원하는 인덱스를 넣어주면 된다.

이렇게 요소에 접근하는 것을 인덱싱(indexing)이라고 하며

참고로 인덱스는 1부터 시작하는게아니라 0부터 시작한다.

    let favoriteFoodList = [ //배열 생성
        //배열의 요소들
        '야채곱창',
        '냉면',
        '김치찌개',
        '갈비'
    ]
    console.log(favoriteFoodList[0]); //야채곱창

▲ 배열의 첫 번째 요소에 접근하기위해 인덱스값을 넣어주면 '야채곱창'이라는 요소가 출력된다.

배열은 객체와는 다르게 단순히 여러 개 값들을 쉼표로만 구분해서 대괄호로 담고 있는 형태로,

각 값들은 요소라고 부르며 이 요소들은 index라는 순서를 가지는 특징이 있는 것을 확인했다.

그렇기 때문에 랭킹처럼 순서가 있는 값을 만들 때는 객체보다 배열을 활용하는 것이 좀 더 간결하고

나중에 배열을 더 많이 활용하다 보면 필요성을 느끼게 될 것이다.

이전에 자바스트립트의 거의 모든 것이 객체라고 했었는데 사실 배열도 객체나 다름없다.

typeof 연산자로 아래 배열의 자료형을 한번 확인해보자면..

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    console.log(typeof members);

자료형을 확인해보니 object라고 나오는데 배열도 자바스크립트에서 미리 만들어둔 특별한 객체의 한 종류이다.

앞서 공부한 date 객체에서

날짜와 관련된 다양한 메소드들이 미리 만들어져 있어 유용하게 활용할 수 있었던 것처럼,

배열도 단순히 여러 값들을 묶어주는 역할만 하는 것이 아니라

이렇게 다양한 프로퍼티와 메소드들이 있어서 필요한 상황에 유용하게 활용할 수가있다.

이런 것들이 자바스크립트 뿐만아니라 다른 프로그래밍 언어에서도 객체가 중요하고 좋은 이유 중 하나이다.

좀 더 자세하게 배열을 다뤄보자.

■ Array - length Property 활용하기

이 프로퍼티는 배열이 가지고 있는 요소의 총 개수를 표시해주는데,

배열 안에 몇 개의 데이터가 들어 있는지 파악할 수 있다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']

	// 1. array length
    console.log(members.length);

또한 프로퍼티이기 때문에 점 표기법을 사용할 수 있고 대괄호 표기법으로도 접근할 수 있다.▼

// 1. array length
    console.log(members.length); 
    console.log(members['length']); //프로퍼티 특징에 따른 점표기법과 대괄호법 사용가능

그리고 요소의 인덱스는 0번부터 시작하므로 length를 활용해서 인덱싱출력을 할 수 있다.

console.log(members[members.length -1 ]);

결국 배열의 마지막 요소에 접근할 수있으므로 해당 요소가 출력된다.▼

이러한 방법들로 length를 활용할 수 있다.

■ Array - 요소 추가 / 수정

배열이 객체인 만큼 배열에 요소를 추가하거나 수정하는 것도 객체와 비슷하다.

객체에서 공부했듯이 존재하지 않는 요소에 접근하려고 하면 undefined가 출력되는걸 기억할 것이다.

    // 2. array 추가/수정
    members[7] = '죡팡' // 배열 추가
    console.log(members[7]); //undefined

▲이렇게 존재하지 않는 요소에 접근해서 새로운 값을 할당해 주게되면 배열에 요소가 추가되고

이미 존재하는 요소에 접근해서 값을 할당하게 되면 요소의 값이 수정되는 방식이다.

그리고 이렇게 콘골에 출력 했을 때 (8)이라는 숫자는 배열의 length 값이며

members의 length가 7에서 8로 증가된 것을 확인 할 수 있다.

참고로 인덱스의 순서를 뛰어넘으면서 추가하게 되면 undefined 값이 들어간 요소가 자동으로 생성된다.▼

    // 2. array 추가/수정
    members[8] = '죡팡'
    console.log(members[7]); //undefined

이런식으로 한 배열 건너 뛴 8을 입력하면..▼

undefined가 출력 되면서 members를 검색하면 중간에 empty 즉 비어있다는 사실을 알려준다.▲

7번 인덱스 값이 비어 있긴 하지만 하나의 요소로 생성이 되어서

members의 length도 9가 된 것을 확인 할 수있다.

의도한 것이라면 상관없지만 이런 부분을 모르고 배열에 요소를 추가하게 되면 예상하지 못한 결과를 얻을 수 있기에

주의해서 코드를 작성하자.

또한 요소의 수정은 위에서 적었다시피

이미 존재하는 요소에 접근을 해서 변경 할 수 있다.▼

    // 2. array 추가/수정
    members[3] = '죡팡' // 4번 배열수정
    console.log(members[7]); //undefined

■ Array - 요소 삭제

전에 객체에서 삭제하려면 delete 연산자를 사용했었다.

    // 3. array 요소 삭제
    console.log(members);
    delete members[4];
    console.log(members);

▲ 콘솔에 members를 출력한 다음에 요소를 지우고 다시 출력해보면

'데셔' 값 자체는 지워진 것 같은데 요소가 empty로 남아있고 length도 7로 유지되어있다.

이건 사실상 완벽하게 요소가 삭제되었다고 보기는 어렵다.

그래서 배열의 요소를 완벽하게 삭제하려면 배열이 가지고 있는 메소드를 활용해야한다. (링크)

★GitHub 주소 (배열)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/7.%EB%B0%B0%EC%97%B4.html

JavaScript_soloPlay/Basic/8-객체/7.배열.html at main · SeopE9611/JavaScript_soloPlay

Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.

github.com

★Notion 주소 (배열 예제1,2)

https://purrfect-gargoyle-935.notion.site/Array-indexing-112e9530b3e181898aacd6235859955b?pvs=4

배열(Array) indexing 출력하기 | Notion

dataType 이라는 이름의 6개의 요소를 가진 배열들을 반복문을 활용하여 모두 출력한다.

purrfect-gargoyle-935.notion.site

https://purrfect-gargoyle-935.notion.site/Array-112e9530b3e1813c8253eccb0cb3e0d9?pvs=4

배열(Array) 출력하기 (온도 변경 문제) | Notion

섭씨 온도로 기록한 배열이 있다.