#25 자바스크립트(JavaScript) - 리터럴(Literal)

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 리터럴(Literal)에 대해 알아보겠습니다!

지난 시간에 이어 객체를 생성하는 방법에 대해 더 알아볼 텐데요, 오늘은 리터럴 표기법을 사용해 객체를 만들어보는 방법을 배워볼게요!

 

리터럴이란 프로그래밍에서 자료를 표기하는 방식을 말하는데요, 자바스크립트뿐만 아니라 프로그래밍 언어 전체에서 사용하는 언어입니다.

리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 방식입니다.

지금까지 우리가 공부하면서도 많이 사용했었는데요, 다음과 같이 변수를 선언하면서 동시에 값을 지정하는 것이 바로 리터럴 표기법입니다.

var number = 1;

그럼 리터럴을 사용해서 객체를 생성한다는 것은 객체를 선언하면서 동시에 값을 지정해 주는 것이겠죠?

 

리터럴을 사용해 객체를 선언할 때는 중괄호{} 안에 '속성 이름 : 값'을 하나의 쌍으로 지정합니다.

속성이 여러 개일 경우에는 '속성 이름 : 값'의 뒤에 쉼표(,)를 넣어 구분해주면 됩니다.

함수를 선언할 때는 '함수 이름 : function(){}' 형식으로 선언하면 됩니다.

 

car 객체를 한번 리터럴을 사용해서 생성해 볼까요?

var grandeur = {
    name : "그렌저",
    color : "흰색",
    price : 38000000,
    info : function() {
        console.log(this.name + "의 색상은 " + this.color + "이고 가격은 " + this.price + "원 입니다.");
    }
};

 car 객체에 name, color, price라는 속성과 info라는 함수를 넣어서 생성해 보았습니다!

 

속성 값을 확인하거나 함수를 실행할 때에는 객체 이름 뒤에 마침표(.)를 사용하고 속성 이름이나 함수 이름을 입력하여 실행하면 됩니다.

그럼 car 객체의 속성 값들과 함수를 실행시켜 볼까요?

console.log(car.name);
console.log(car.color);
console.log(car.price);
car.info()

car의 이름은 그렌저이고 색상은 흰색 가격은 38000000이네요!

info 함수도 출력되는 걸 확인할 수 있습니다.

 

프로그램에서 객체를 만들어 사용하다가 새로운 속성을 추가하고 싶을 때가 있겠죠?

car객체에 연료 정보를 추가하고 싶을 때 다음과 같은 방법으로 속성을 추가하면 됩니다.

car.fuel = "가솔린";

그럼 새로운 속성이 car객체에 추가가 되었는지 확인해 볼까요?

 

 

새로운 속성이 잘 추가되었네요!

 

이번 시간에는 리터럴에 대해 알아보았습니다!

다음 시간에 객체를 생성하는 방법에 대해 더 알아보도록 해요!