한 입 크기로 잘라먹는 리액트이제 자바스크립트 문법을 본격적으로 살펴보는 시간입니다. 코드샌드박스에서 예제 코드를 직접 실습하면서 알아볼 예정이므로 실습 환경 구축을 모두 끝마치고 진행 하기를 바랍니다.
변수
변수란 프로그램을 실행하는 과정에서 변경될 수 있는 값을 저장하는 저장소입니다. 또한 변수는 어떤 값을 이름으로 가리킬 때 사용하는 기능이기도 합니다.
자바스크립트에서 변수는 다음과 같이 만듭니다.
코드를 불러오는 중 입니다 ...코드를 입력하면 25라는 값은 이제부터 age라는 이름으로 부를 수 있습니다. 이때의 age를 ‘변수’라고 합니다. 자바스크립트는 변수를 만들 때 키워드 let을 앞에 붙입니다.
이 코드는 영어로 “let age equal 25”라고 읽는데, “age는 25와 같다”라는 뜻입니다. 키워드 let을 붙여 없던 변수를 만들면 “변수를 선언한다”라고 하며,
age = 25 처럼 값을 변수에 지정하면 ‘할당한다’고 표현합니다.이 코드처럼 변수를 선언함과 동시에 값을 할당할 수도 있는데, 이것을 다른 말로 “변수를 초기화 한다”라고 합니다. 자바스크립트에서 변수의 초기화는 선택 사항입니다. 언제든 변숫값은 변경할 수 있기 때문에 반드시 초기화 할 필요는 없습니다.
다음은 초기화하지 않은 변수의 선언 예입니다.
코드를 불러오는 중 입니다 ...① console.log는 괄호 안의 값(인수라고 함)을 콘솔에 출력하는 기능이라고 했습니다. 괄호 안에는 값이 아닌 변수 이름을 넣을 수도 있습니다. 이때는 해당 변숫값을 출력 하라는 명령이 되는데, 변수 age의 값인 25를 출력합니다.
// 표시는 무엇인가요?// 표시는 주석입니다. 주석이란 코드의 내용이 무엇인지 알아볼 수 있도록 개발자가 설명을 달아 놓은 문자입니다. 주석은 프로그램에서 코드로 해석하지도 실행하지도 않습니다. // 기호를 사용하면 //가 시작하는 부분부터 나머지 한 줄은 코드로 인식하지 않습니다. /* ~ */를 이용하 면 여러 줄을 한꺼번에 주석으로 만들 수 있습니다.변수는 이렇게 값을 가리키는 이름이면서 동시에 저장소입니다.
변수에 저장한 값은 프로그램을 실행하는 도중에 변경할 수 있습니다.
변수 age에 25를 저장하고 콘솔에 출력한 다음, 값을 30으로 변경하고 다시 출력했습니다. 25가 출력되고 이어서 30이 출력되는 것을 확인할 수 있습니다.
변수는 이름으로 구분하기 때문에
코드를 불러오는 중 입니다 ...let 으로 변수를 선언할 때는 이름을 중복해서 사용할 수 없습니다.자바스크립트에서는 키워드 var로도 변수를 선언할 수 있습니다.
코드를 불러오는 중 입니다 ...키워드 var로 선언한 변수 역시 let처럼 프로그램 실행 과정에서 값을 변경할 수 있습니다. 그런데 코드에서 무언가 이상한 점이 보이지 않나요? ①에서 이미 age라는 이름으로 변수를 선언했고, ②에서도 같은 이름으로 변수를 선언 했음에도 오류가 발생하지 않습니다.
var를 이용한 변수 선언은 let과는 달리 이름을 중복해 선언해도 실행할 수 있습니다. 그러나 변수를 선언하면서 같은 이름을 또 쓸 수 있도록 허용하면, 코드가 많아지고 복잡해질 때 프로그래머가 실수할 가능성이 커집니다. 키워드 var는 이런 기능 외에도 여러 가지 독특한 특징을 갖고 있습니다. var를 사용하는 일은 혼란을 야기하고 코드의 복잡도를 높이는 까닭에 가급적 변수 선언 키워드로는 let을 사용 해야 합니다.
상수
상수 역시 변수처럼 이름을 가진 저장 공간입니다. 그러나 상수는 변수와 달리 프로그램 실행 과정에서 값을 변경할 수 없습니다.
다음은 간단하게 상수를 선언하고 값을 할당하는 예입니다.
코드를 불러오는 중 입니다 ...상수는 절대 변하지 않는 값을 저장할 때 사용하는 이름입니다. ‘불변’이라는 뜻을 가진 constant 라는 단어에서 유래했기 때문에
const 라는 키워드를 붙여 선언합니다. const로 상수를 선언하면, 해당 값을 변경하는 실수를 미연에 방지할 수 있습니다.반면 선언과 동시에 할당하는 초기화 과정이 필요치 않은 변수와 달리, 상수는 선언과 동시에 값을 할당하는 과정이 꼭 필요합니다.
다음은 값을 초기화하지 않고, 상수만 선언한 예입니다.
코드를 불러오는 중 입니다 ...명명 규칙
변수와 상수는 이름을 갖는다는 공통점이 있습니다. 이렇듯 변수 또는 상수에 이름을 정하는 행위를 변수의 명명 또는 네이밍(naming)이라고 합니다.
자바스크립트에서는 변수나 상수의 이름을 프로그래머가 자유롭게 정할 수 있는 편입니다. 다만 명명 규칙이라고 해서 반드시 지켜야 할 규칙이 4가지 있습니다. 이들 명명 규칙을 지키지 않으면 오류가 발생합니다.
명명 규칙은 변수와 상수 모두 동일하게 적용되므로, 편의상 변수와 상수를 합쳐 ‘변수’라고 하겠습니다.
기호 사용 규칙
명명 규칙의 첫 번째는 기호 사용 규칙입니다. 자바스크립트에서 변수는 한글을 포함해 문자, 숫자 그리고 특수 기호의 일부를 사용할 수 있습니다. 특수 기호는 _와 $만 허용하며 그 외의 기호는 사용할 수 없습니다.
다음은 기호 사용 규칙을 지키지 않은 변수 선언 예입니다.
코드를 불러오는 중 입니다 ...다음은 기호 사용 규칙을 잘 지켜 변수를 선언한 예입니다.
코드를 불러오는 중 입니다 ...$와 _기호는 여러 상황에서 매우 유용하게 사용합니다. $ 기호는 JQuery를 사용할 때처럼 이 변수가 별도의 라이브러리 객체 라는 것을 가리킬 때 사용합니다. 그리고 _기호는 변수 이름이 두 단어 이상으로 이루어진 합성어일 때 가독성을 높이기 위해 사용합니다.JQuery는 무엇인가요?
JQuery는 HTML 요소를 조작할 때 사용하는 자바스크립트 라이브러리로 매우 다양한 기능을 지원합니다.
숫자 사용 규칙
명명 규칙 두 번째는 숫자 사용 규칙입니다. 변수 이름으로 숫자를 사용할 수 있습니다. 다만 한 가지 금지 사항이 있는데, 변수의 이름을 숫자로 시작해서는 안 된다는 규칙입니다.
다음은 숫자 사용 규칙을 어긴 사례입니다.
코드를 불러오는 중 입니다 ...2022year는 숫자가 변수 이름 앞에 있어 적합하지 않습니다. 만약 변수 이름에 숫자를 사용하려면 특수 기호와 함께 사용해야 합니다.
코드를 불러오는 중 입니다 ...굳이 숫자를 앞에 쓸 필요가 없다면 변수의 이름 중간이나 뒤에 배치하는 게 좋습니다.
코드를 불러오는 중 입니다 ...예약어 규칙
명명 규칙 세 번째는 예약어(Reserved Words) 규칙입니다. 예약어란, 예약된 단어라는 뜻입니다. let, const 키워드처럼 예약어란 자바스크립트에서 이미 사용하기로 약속한 단어입니다. 따라서 예약어는 변수명으로 사용할 수 없습니다.
다음은 예약어 let을 변수 이름으로 사용한 예입니다.
코드를 불러오는 중 입니다 ...자바스크립트가 정한 예약어는 개수도 많고 다양하지만, 다른 프로그래밍 언어에서도 자주 사용하는 키워드가 대부분입니다. 따라서 억지로 외우지 않아도 자주 접하면 금방 익숙해집니다. 만약 기호, 숫자 명명 규칙에 따라 이름을 지정했음에도 오류가 발생했다면, 이미 선언한 변수 이름이거나 예약어를 이름으로 지정 했을 확률이 높습니다.
예약어의 종류는 자바스크립트 버전이 바뀔 때마다 추가 또는 삭제됩니다. 예약어의 종류는 다음 사이트에서 확인할 수 있습니다.
대소 문자 구별
위에서 소개한 3가지 규칙은 지키지 않으면 오류가 발생합니다. 하지만 대소 문자를 구별하는 명명 규칙은 직접적인 오류가 발생하지 않습니다. 그러나 이 규칙을 인지하지 못한 상태에서 변수의 이름을 짓게 되면, 의도치 않은 오류가 발생할 수 있습니다.
자바스크립트는 변수 이름에서 대소 문자를 구별(Case-Sensitive)합니다. 다음 예제 코드에서 선언한 두 변수는 다른 변수입니다.
코드를 불러오는 중 입니다 ...자바스크립트는 변수의 대소 문자를 구별하기 때문에 code와 Code처럼 혼동할 수 있는 변수명을 사용하는 것은 바람직하지 않습니다.
특히 여러 사람이 함께 협업하는 개발 환경이라면 타인이 선언한 변수와 자신이 선언한 변수를 혼동할 수 있으니
조심해야 합니다.
좋은 변수 이름
명명 규칙을 모두 만족하더라도 다음과 같이 변수의 이름을 짓는 것은 좋지 않습니다.
코드를 불러오는 중 입니다 ...이 코드는 변수 a와 b가 무엇을 의미하는 값인지, c는 또 어떤 변수인지 아무런 정보가 없어 어떻게 동작할지 짐작할 수 없습니다. 만약 동료가 이렇게 코드를 작성한다면 프로그래밍을 함께 하기 힘들 겁니다. 변수 이름은 그 이름만으로도 어떤역할을 하고, 어떻게 동작할지 유추할 수 있도록 작성하는 게 좋습니다.
다음은 앞의 코드와 동일하게 동작하지만 바르게 변수 이름을 지은 예입니다.
코드를 불러오는 중 입니다 ...salseCount라는 이름으로 판매 수량을, refundCount라는 이름으로 환불 수량을 각각 저장합니다. 그리고 totalSalesCount에는 판매 수량에서 환불 수량을 제한 총 판매 수량을 저장합니다. 변수 이름을 잘 지으면, 이름만으로도 해당 변수가 어떤 역할을 하는지 알 수 있는 것은 물론, 어떤 프로그램인지도 대략 파악할 수 있습니다.
변수 이름을 잘못 지으면 코드 수정이 까다로워지고, 동료와의 협업도 힘들어집니다. 따라서 수많은 사람이 협업해 코드를 작성하는 회사나 단체에서는 자체적인 표기법을 정해 사용하기도 합니다. 코드 표기법은 단체나 회사마다 조금씩 다를 수 있지만 이해하기 쉬운 코드를 작성하려는 목적은 모두 동일합니다.
변수명 표기법
다음은 대표적인 변수명 표기법입니다.
1. 카멜 표기법(Camel-Expression)
모든 단어의 첫 글자를 대문자로 표기하는 방법인데, 변수 이름이 마치 낙타의 등처럼 굽은 모습을 연상 시킨다고 하여 붙여진 이름입니다. 단 맨 앞에 오는 단어의 첫 글자는 소문자로 시작 합니다.
변수 이름을 띄어 쓰면 오류가 발생하기 때문에 다음과 같이 여러 단어가 합쳐진 합성어를 사용해 이름을 지으면 가독성이 떨어집니다.
코드를 불러오는 중 입니다 ...카멜 표기법을 사용하면 단어가 많고 길더라도 가독성이 좋아집니다.
코드를 불러오는 중 입니다 ...2. 파스칼 표기법(Pascal-Expression)
카멜 표기법과 달리 모든 단어의 첫 글자를 대문자로 표기하는 방법입니다. 다음은 파스칼 표기 법을 이용해 복잡한 이름을 지은 예입니다.
코드를 불러오는 중 입니다 ...파스칼 표기법은 보통 클래스나 함수의 이름을 지을 때 많이 사용합니다.
3. 스네이크 표기법(Snake-Expression)
특수 기호 _를 활용하는 표기법으로, 단어 사이에 ‘_’를 넣습니다. 다음은 스네이크 표기법으로 복잡한 이름을 지은 예입니다.
코드를 불러오는 중 입니다 ...3가지 표기법은 대중적으로 많이 사용하는 표기법이니 잘 알아두길 바랍니다.