[JavaScript] 기본 문법 #3 - 변수 선언, 템플릿 문자열, 객체 리터럴

* 변수 선언

1. var

var는 함수 스코프로, 함수 내부에서 사용가능하다.

ES2015 이전에는 var로 변수를 선언했고, ES2015부터 const와 let을 많이 사용한다.

 

2. const, let

const와 let은 블록 스코프로, 블록 밖에서 변수 접근이 불가하다.

또한 const는 상수이고, 상수에 할당한 값은 다른 값으로 변경할 수 없다.

할당한 값을 변경하고 싶으면 let으로 변수를 선언하면 된다.

 

// var로 변수 선언

if(true){  

    var x = 3;

}

console.log(x);  // 3 출력

// const로 변수 선언

if(true){

    const y = 3;

    console.log(y);  // 3 출력

}

console.log(y);  // 에러(const는 블록 밖에서 변수 접근 불가)

 

* 템플릿 문자열(Template String)

ES2015부터는 문자열을 합칠 때 + 기호뿐만 아니라 '(백틱)도 사용 가능하다.

 

// + 기호로 문자열 합치기

var num1 = 1;

var num2 = 2;

var result = 3;

var string1 = num1 + ' 더하기 ' + num2 + '는 \'' + result + '\'';

console.log(string1);  // 출력: 1 더하기 2는 3

// `(백틱)으로 문자열 합치기

const num3 = 1;

const num4 = 2;

const result2 = 3;

const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;

console.log(string2);  // 출력: 1 더하기 2는 3

 

* 객체 리터럴

객체 리터럴이란 객체를 정의(생성)하는 방법 중 하나이다.

아래 코드는 ES5 시절의 객체 표현 방법이다.

 

var sayNode = function(){  // sayNode 함수 정의

    console.log('Node');  // 문자열 Node를 출력하는 함수

};

var es = 'ES';  // es 변수에 문자열 ES 할당

// ES5 시절 객체 리터럴

var oldObject = {  // sayJS와 sayNode라는 2개의 함수를 가진 oldObject 객체 생성

    sayJS: function(){  

        console.log('JS');

    },

    sayNode: sayNode,

};

oldObject[es + 6] = 'Fantastic';  // oldObject 객체에 ES6이라는 프로퍼티 추가 및 문자열 값 할당

oldObject.sayNode();  // oldObject 객체의 sayNode 메소드 호출

oldObject.sayJS();  // oldObject 객체의 sayJS 메소드 호출

console.log(oldObject.ES6);  // oldObject 객체의 ES6 프로퍼티에 접근하여 출력

// 출력

Node

JS

Fantastic

 

 

아래 코드는 ES5 시절보다 훨씬 간결한 문법으로 객체리터럴을 표현한 코드이다.

 

var sayNode = function(){

    console.log('Node');  

};

var es = 'ES';  

// 훨씬 간결한 문법으로 객체 리터럴 표현 가능

const newObject = {  

    sayJS(){  // 객체의 메서드에 :function을 붙이지 않아도 됨

        console.log('JS');

    },

    sayNode,  // 속성명과 값이 같은 경우 하나로 축약 가능

    [es + 6]: 'Fantastic',  // [변수+값]으로 표현 하여 동적 속성명을 객체 속성명으로 사용 가능

};

newObject.sayNode();  

newObject.sayJS();  

console.log(newObject.ES6);  

// 출력

Node

JS

Fantastic

 

ES5 시절 코드	간결해진 코드	설명
sayJS: function()	sayJS	객체의 메서드에 :function을 붙이지 않아도 됨
sayNode: sayNode	sayNode	속성명과 값이 같을 경우 하나로 축약 가능
oldObject[es + 6] = 'Fantastic';	[es + 6]: 'Fantastic'	[변수 + 값]으로 표현하여 동적 속성명을 객체 속성명으로 사용 가능

 

 

성결대학교 정보통신공학과 웹서버프로그래밍 강의(2024)   

본 게시물은 위 강의 및 교재를 기반으로 정리한 글입니다.