티스토리 뷰

상수는 영어로 constant라고 합니다. 변한다의 의미의 변수와는 반대로 절대 변하지 않고 항상 일정한 값을 상수라고 부릅니다. 

// 상수 (contant)
const PI = 3.14; // 원주율
let radius = 0; // 반지름

// 원의 넓이를 계산하는 함수
function calculateArea(){
	return PI * radius * radius;
}

// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea(){
	return `반지름이 ${radius}일 때, 원의 넓이는 ${calulateArea()};
}

radius = 4;
console.log(printArea()); // 반지름이 4일 때, 원의 넓이는 50.24

radius = 7;
console.log(printArea()); // 반지름이 7일 때, 원의 넓이는 153.86

radius = 8;
console.log(printArea()); // 반지름이 8일 때, 원의 넓이는 200.96

pi와 radius라는 변수를 만들고 pi는 원의 넓이나 둘레를 구할 때 사용하는 원주율을 표현하기 위해서 3.14라는 값도 할당해줍니다. radius는 반지름이라는 뜻이고 따로 값은 할당해주지 않았습니다. 이렇게 선언만 하고 값을 할당해 주지 않은 변수는 undefined 값을 가지고 있습니다. 반대로 이 반지름이 처음에는 빈 값이라는 것을 명시적으로 표현하고 싶으면 null 값을 할당해 주면 됩니다. 

 

변수에 들어갈 자료형이 아직 결정되지 않았거나 일정하지 않을 경우에는 null 값을 할당하는게 좋지만 빈 값을 표현하면서 여기에 있는 변수에 일정하게 들어갈 값의 자료형도 간접적으로 표현하고 싶을 때는 문자열일 경우에 빈 문자열을 숫자의 경우에는 0을 할당해 주는 방법도 있습니다. 지금 같은 경우에는 반지름이니까 0을 할당해 줍니다.

 

그 다음에는 두 개의 함수를 만들고 있는데 첫 번째는 글로벌 변수 2개를 활용해서 원의 넓이를 계산한 값을 리턴해주는 함수이고 두 번째는 radius와 calculateArea 함수를 활용해서 만든 템플릿 문자열을 리턴해주는 함수 입니다. 

마지막으로는 비슷한 코드의 함수를 사용했는데 radius의 값을 변경해가면서 printArea의 결과값을 콘솔에 출력하는 코드입니다. 

 

그런데 코드를 다시 보면 radius의 값은 변경되고 있는데 pi값은 처음부터 끝까지 같은 값을 유지하고 있습니다. 그냥 생각해봐도 원주율은 공식적으로 고정된 값이기 때문에 수정할 일이 없습니다. 이런 식으로 변하지 않고 일정한 값을 유지하는 것상수라고 합니다.

 

JavaScript로 코드를 작성할 때도 이렇게 값을 바꾸지 않고 일정한 값을 유지하는 것들은 상수로 표현해 주는 것이 좋습니다. 그 방법은 constant라는 영어의 앞 글자를 따서 변수를 선언할 때 let 대신에 const 라는 키워드로 선언해 주면 됩니다.

 

const로 선언한 상수는 값을 재할당하려고 하면 실행했을 때 오류가 나타나기 때문에 상수의 값을 보호할 수 있습니다. 그리고 값을 변경할 수 없기 때문에 선언할 때 값을 할당해 주지 않아도 오류가 나오는 것을 확인할 수 있습니다.

Uncaught SyntaxError: Missing intializer in const declaration

마지막으로 끝으로 상수는 이름을 지을 때 대문자와 밑줄로 작성해주는 암묵적인 규칙이 있습니다. 이름에 들어가는 모든 알파벳을 대문자로 쓰고 두 개 이상의 단어가 있을 때는 밑줄로 두 단어를 구분하는 방식입니다.

예를 들어 myNumber라는 변수가 있을 경우에는 이걸 상수로 표현할 때 MY_NUMBER 이렇게 표현한다는 것입니다.

이렇게 쓰는 이유는 상수와 변수를 구분하기 위함인데요. 선언할 때는 const라는 키워드로 변수와 상수를 구분할 수는 있지만 실제로 상수를 사용할 때는 키워드 없이 상수 이름으로 사용되기 때문에 이럴 때는 변수와 상수를 구분하기 위한 이름 규칙이 필요합니다. 그래서 다시 PI 이름도 대문자로 사용해주고 사용하는 것도 대문자로 변경해주면 완벽한 상수를 활용하는 코드가 되었습니다. 

 

변수를 선언하고 나중에 값을 변경하지 않으면 된다고 생각할 수도 있지만 코드를 작성하면서 실수로 나중에 다른 값을 할당할 수도 있고 혹은 협업을 할 때 다른 사람이 바꿔버리는 상황도 생길 수 있으므로 필요한 경우에는 상수를 활용하는 것이 훨씬 더 코드를 안정적으로 만들어 줍니다. 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[제어문] 01.if문  (0) 2022.09.23
[객체] 객체와 프로퍼티  (0) 2022.09.23
[추상화] 11.변수의 scope  (0) 2022.09.21
[추상화] 09.옵셔널 파라미터  (1) 2022.09.20
[추상화] 07. return과 console.log의 차이  (0) 2022.09.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함