(16) JavaScript - 추상화 / 상수(constant)

상수(constant)

상수(constant) - 변한다는 의미의 변수와는 반대로 절대 변하지 않고 항상 일정한 값을 상수라고 한다.

    // 상수 (constant)
    let pi = 3.14 //원주율
    let radius // 반지름

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

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

    radius = 4;
    console.log(printArea());
    
    radius = 7;
    console.log(printArea());

    radius = 8;
    console.log(printArea());

 

    // 상수 (constant)
    let pi = 3.14 //원주율
    let radius // 반지름

▲ 위쪽에 pi(원주율) 와 radius(반지름)라는 변수를 생성하였다.

radius 처럼 선언만 하고 할당해 주지 않은 변수는 기본적으로 undefined 값을 가지고 있다는 것을 알고 있을 것이다.

처음에는 이 반지름이 빈 값이라는 걸 명시적으로 표현하고 싶으면 null 값을 할당 해주는 방법도 있다.

 

그런데 변수에 들어갈 자료형이 아직 결정되지 않았거나

일정하지 않을 경우에는 null 값을 할당 해줘도 좋지만 빈 값을 표현하면서 

변수에 일정하게 들어갈 값의 자료형도 간접적으로 표현하고 싶을 때는

 

    // 상수 (constant)
    let pi = 3.14 //원주율
    
    let radius ' '// 반지름
    let radius = 0

 

▲ 문자열일 경우에 빈 문자열( ' ' ) 을, 숫자의 경우에는 ( 0 ) 을 할당해 주는 방법도 있다.

지금 같은 경우에는 반지름이니깐 0을 할당해 주는 것이 좋다.

 

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

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

▲ 두 개의 함수 caclulateArea와 printArea 를 생성하였고

calculateArea 함수에는 글로벌 변수 2개를 활용해서 원의 넓이를 계산한 값을 리턴해주는 함수고

printArea 함수는 radius와 calculateArea 함수를 활용해서 만든 템플릿 무자열을 리턴해주는 함수이다.

 

    radius = 4;
    console.log(printArea());
    
    radius = 7;
    console.log(printArea());

    radius = 8;
    console.log(printArea());

▲ 마지막으로 아래부분은 비슷한 코드 3번을 사용했는데,

radius의 값을 변경해 가면서 printArea의 결과값을 콘솔에 출력하는 코드이다.

 

 

실행해보면 반지름의 값에 따라 원의 넓이를 잘 출력하고 있다.

그런데 코드를 다시 보면 radius의 값은 변경되고있는데 pi 값은 처음부터 끝까지 같은 값을 유지하고 있다.

생각해보면 이 원주율이라는 것은 공식적으로 고정 값이기 때문에 수정할 일이 없다.

이런 식으로 변하지 않고 일정한 값을 유지하는 것을 '상수'라고 부르는데,

자바스크립트로 코드를 작성할 떄에도 값을 바꾸지 않고 일정한 값을 유지하는 것들은 상수로 표현해주는 것이 좋다.

 

그 방법은 constant 라는 영어의 앞 글자를 따서, 변수를 선언할 때 let 대신에 'const' 라는 키워드로 선언해 주면 된다.

 // 상수 (constant)
    const pi = 3.14 //원주율
    let radius = 0 // 반지름

▲ 즉 이제부터 pi 변수는 상수인 것이다.

 

 // 상수 (constant)
    const pi = 3.14 //원주율
    let radius = 0 // 반지름
    
    pi = 3 //오류 발생

▲ const로 선언한 이 상수는 값을 재할당하려고하면 실행했을 때 오류가 발생하기에 상수의 값을 보호할 수있다.

 

 // 상수 (constant)
    const pi //오류 발생
    let radius = 0 // 반지름

▲ 그리고 const는 값을 변경할 수 없기 때문에 선언할 때 값을 할당해주지 않으면 마찬가지로 오류가 발생한다.

 

※ 상수 이름 짓기

상수는 이름을 지을 때 대문자와 밑줄로 작성해주는 규칙이 있다.

이름에 들어가는 모든 알파벳을 대문자로 쓰고 두 개 이상의 단어가 있을 때는 밑줄로 두 단어를 구분하는 방식이다.

const myNumber // X

const MY_NUMBER // O

▲ 이렇게 쓰는 이유는 상수와 변수를 구분하기 위함이며

선언할 때는 const라는 키워드로 변수와 상수를 구분할 수는 있지만 

실제로 상수를 사용할 때는 키워드 없이 상수 이름으로 사용되기 때문에 

이럴 경우를 대비해 변수와 상수를 구분하기 위한 이름 규칙이 생긴 것이다.

 

그래서 원의 넓이를 구하는 코드를 상수에 맞게 다시 수정해보면..

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

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

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

    radius = 4;
    console.log(printArea());
    
    radius = 7;
    console.log(printArea());

    radius = 8;
    console.log(printArea());

▲ 이렇게 완벽한 상수를 활용하는 코드가 되었다.

 

어쩌면 그냥 변수 선언하고 나중에 값을 변경하지 않으면 되지 않나? 라고 할 수도 있지만

코드를 작성하면서 실수로 나중에 다른 값을 할당할 수도 있고

실무에서 사수가 당신을 이상한 눈으로 보는 눈초리를 받을 수있다 :)