본문 바로가기
programming/javascript

자바스크립트 상수 객체와 배열 이해 javascript const object and array

by 개코 - 개발과 코딩 2021. 10. 12.

자바스크립트 상수의 특징은 const 키워드를 사용하여 한 번 정의된 수는 변경할 수 없다. 상수 객체나 상수 배열도 마찬가지다. 하지만, 상수 객체와 상수 배열의 특징은 그 객체가 가진 요소와 값은 변경할 수 있다. 한 번 정의된 것은 재정의할 수는 없지만 요소는 변경할 수 있다.

자바스크립트 상수 객체와 배열 이해
javascript const object and array

자바스크립트는 const 키워드를 사용하여 변경불가한 컨테이너 공간을 만들 수 있다.

객체나 배열 또한 마찬가지다.

자바스크립트 상수에 대한 특징을 다시 언급해 본다.

  • 상수는 한 번 선언하면 값을 재정의할 수 없다.
  • 상수는 객체 또는 배열을 선언하면 재정의할 수 없다.

상수의 기본적인 특성은 위와 같다.

하지만 상수 객체나 상수배열 내부의 값은 변경할 수 있다.

특징

상수 객체와 상수 배열 또한 기본적으로 상수의 특징을 가진다.

한 번 선언하면 재정의 할 수 없다.

최소한 데이터 구조는 변경하여 사용할 수 없다는 말과 같다.

하지만, 상수 객체와 상수 배열 내부에 있는 값은 변경할 수 있다.

사용법

위에서 언급한 대로 상수객체와 상수배열의 특징을 가지고 코드를 만들어 본다.

아래의 코드는 배열을 하나 만들고 첫번째 배열의 값을 변경하고 마지막에 값을 추가하는 것을 보여준다.

하지만, 상수 배열 자체를 재정의하여 사용하려고 하면 에러가 발생하는 것을 볼 수 있다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 상수 const</h1>

        <script>

            const IDOL = ["지수", "제니", "로제"];

            console.log(IDOL);

            IDOL[1] = "Jennie";

            IDOL.push("Lisa");
            
            console.log(IDOL);

            IDOL = ["아이린", "슬기", "웬디", "조이", "예리"];
            
        </script>
        
    </body>
</html>

결과 화면을 보도록 하자.

상수 배열을 만들고 배열 내부의 값을 변경하고 값을 추가하는 것을 확인할 수 있다.

하지만, 새롭게 배열을 정의하려고 하면 에러가 발생하는 것을 볼 수 있다.

자바스크립트 객체 상수도 마찬가지 상수 배열과 같은 특성을 가진다.

코드를 만들어 본다.

데이터 타입 형태만 조금 다를 뿐 동작하는 것은 위의 결과화면과 같다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 상수 const</h1>

        <script>

            const IDOL = {
                "type": "아이돌 걸그룹",
                "group": [
                    "레드벨벳",
                    "블랙핑크",
                    "브레이브걸스"
                ]
            };

            console.log(IDOL);

            IDOL.type = "idol girl group";

            IDOL.count(4);
            
            console.log(IDOL);

            IDOL = {
                "type": "아이돌 걸그룹",
                "group": [
                    "레드벨벳",
                    "블랙핑크",
                    "브레이브걸스"
                ]
            };
            
        </script>
        
    </body>
</html>

결과화면을 보자.

자바스크립트 상수 객체의 값을 변경하고 추가할 수는 있다.

하지만 상수 객체 자체를 재정의하려고 하면 에러가 발생한다.

반응형

댓글