[Javascript 기초] 세미콜론 / 코멘트 / 자료형 / 추상화 / 변수
세미콜론 ;
Jaca script는 명령어를 enter로 나누었을 때는 자동으로 ;(세미콜론)이 적용된 결괄르 보여주지만
다른 명령어를 같은 라인에 작성할 때는 한 명령어의 끝에 ;(세미콜론)을 적어주어야 한다.
코멘트 //
- 한 줄
// 코멘트
- 여러 줄
/*
코멘트
*/
자료형(Data type)
1. 숫자(Number)
1-1. 정수 (integer)
1-2. 소수 (floating point)
2. 문자 (String)
"문자" , '문자'
+ 기호로 문자열 합 가능
"문자"+"문자" = "문자문자"
3. 불린 (Boolean)
True & False
조건에 의한 결과
추상화 (Abstraction)
복잡한 것들을 목적에 맞게 단순화하는 것
목적을 명확히
불필요한것 숨기기
핵심만 드러내기
변수 (Variable)
변수 선언
let mowoo;
mowoo = 5000
let mowoo = 5000;
let coffee = 2000;
let icecream = 1500;
꼭 지켜야 하는 룰 (지키지 않으면 오류)
(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능합니다.
(2) '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름입니다.
(3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들이 있습니다. 강의를 듣다 보면 어떤 예약어가 있는지 차차 알게 되실 겁니다.
지키면 좋은 룰 (더 좋은 스타일을 위해)
위에 나와 있는 꼭 지켜야 하는 룰들만 지켜도 오류 없이 코드가 돌아갈 것입니다. 하지만 돌아가기만 한다고 다 좋은 코드는 아닙니다. 프로그래밍은 혼자 하는 게 아니기 때문이죠. 여러 사람과 협업할 때 여럿이 일관성 있는 코드를 쓰기 위해서는 어느 정도의 약속이 필요합니다.
나물좀줘! = 나 물 좀 줘? 나물 좀 줘? 사랑해보고싶어! = 사랑해 보고 싶어? 사랑 해보고 싶어?
똑같은 글이지만 띄어쓰기라는 약속을 지켜주면 우리가 전달하고자 하는 문장의 의미를 조금 더 명확하게 할 수 있겠죠? 우리가 코드를 작성할 때도 마찬가지입니다. 코드를 작성하는 일은 여러 사람들과의 협업이기도 하면서 스스로와의 소통이기도 합니다. 우리는 이런 소통을 원활히 하기 위해서 아래와 같은 약속들을 함께 지킵시다 :)
(1) 의미 없는 이름은 좋지 않습니다.
let a, b, c, d;
향후 복잡한 프로그램을 짜게 되면 변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 a, b, c, d처럼 의미 없이 설정되어 있으면 어떤 값을 저장해뒀는지 찾기도 어렵고 활용하기도 어렵습니다. 또한 프로그램의 가독성이 떨어져서 나중에 스스로 프로그램을 살펴볼 때, 그리고 공동 작업을 할 때 매우 불편한 상황이 발생합니다. 그래서 프로그래밍 초반부터 적절한 이름을 짓는 습관을 들이는 것이 좋습니다!
(2) 너무 추상적인 이름은 좋지 않습니다.
let name; // 너무 추상적인 이름
상황에 따라 그냥 name이라는 변수명이 적합한 상황도 있을 수 있겠지만, 긴 프로그램을 쓰다 보면 다양한 '이름'들이 있기 때문에 name은 너무 추상적일 수 있습니다. 그럴 때는 조금 더 구체적인 이름으로 이해하기 쉽게 만들어주세요!
(3) 모든 변수 이름은 'camelCase'로 쓰는 것이 좋습니다.
변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.
let bad_variable_name; // 비추천 방식
let goodVariableName; // 추천 방식
중간중간의 대문자가 낙타(camel)의 혹처럼 생겨서 camelCase라고 부릅니다.
사실은 이 밖에도 더 좋은 코드 스타일을 위해 다양한 약속들을 만들어 볼 수 있는데요. 이런 약속들을 스타일 가이드혹은 코딩 컨벤션이라고 부릅니다. 그런데 우리가 처음 프로그래밍을 막 배우기 시작했는데, 당장은 자바스크립트 문법들도 잘 모르고, 문법을 안다고 해도 어떤 스타일이 더 좋고 나쁜지 판단하기는 현실적으로 불가능하겠죠? 다행히 아래에 몇몇 유명한 그룹에서 JavaScript 코드를 쓸 때 추천하는 방식들을 정리해놓은 링크가 있습니다. 들어가서 확인해보시면 좋은 예시와 나쁜 예시를 친절하게 비교도 해주는 데요. 위의 문서들에서도 공통적으로 변수 이름은 camelCase를 선호하는 것을 확인할 수 있습니다. 이처럼 다른 사람들이 미리 정해놓은 여러 스타일 가이드 중 하나를 선택해서 따른다거나 혹은 여러 스타일 가이드를 비교해보고 내가 필요한 주제에서 공통으로 선호되는 부분들을 추려내서 사용해도 이전보다는 훨씬 더 의미 있는 코드를 작성할 수가 있습니다.
참고하기
코드 에디터는 코드를 쉽게 작성할 수 있게 자동화된 기능들이 있습니다. 그래서 만약 자동화된 기능이 우리가 지키려고 하는 스타일 가이드와 일치하지 않는다면 에디터에서 몇 가지 설정을 바꿔주어야 하는데요. 코드 에디터마다 다르겠지만 일반적으로 들여쓰기(indentation) 부분은 신경을 써야 하는 경우가 많습니다.
여러 자바스크립트 스타일 가이드를 살펴보면 대부분 공통적으로 들여쓰기를 space 2칸으로 사용하도록 권장하는 데요. 이 레슨에서는 vscode 에서 간단하게 indentation을 설정하는 방법을 알려드리겠습니다.
먼저 VSCode를 실행하고, 설정창(Settings)을 열어주세요. 단축키 Ctrl + , (맥에서는 Cmd + ,)입니다.
Step1: 상단의 검색창에서 editor tab이라고 검색한 다음. Step2: Editor: Detect Indentation 은 체크 해제해 주세요. Step3: Editor: Tab Size 는 2로 변경해 주세요. Step4: 기본 값이라 변경할 필요는 없지만 Editor: Insert Spaces 부분이 체크 되어 있는지만 한 번 확인해주세요.
이렇게 되면 들여쓰기 관련된 설정은 모두 완료됬습니다! 간단하죠? :) 그런데 기존에 작성한 코드에는 바로 반영이 되지 않을 텐데요.
기존에 작성했던 파일로 돌아가서 단축키 Ctrl + a (맥에서는 Cmd + a)로 전체선택 해주시고 마우스 오른쪽 클릭으로 나타나는 메뉴에서 Fomat Document을 클릭해 주세요. 단축키는 Shift + Alt + F (맥에서는 Shift + Option + F)입니다.
이제 띄어쓰기 4칸이었던 들여쓰기가 2칸으로 잘 바뀌었나요? 이 설정값을 유지한다면 앞으로 기본 들여쓰기 간격은 띄어쓰기 2칸을 기본으로 사용하게 됩니다.