이 기사는 Timothy Robards 님의 글을 번역한 것입니다
번역이 이상한곳이나 오타를 알려주시면 감사하겠습니다.
어떤 언어든지 프로그래밍 언어는 정해진 규칙에 의해서 정의됩니다. 규칙은(or 문법은) 프로그램의 논리적 구조를 이루는 코드를 작성할때 지켜야 합니다.
이 기사는 JavaScript의 기본을 배우는 시리즈의 시작입니다.
JavaScript의 기본 요소들을 자세히 살펴보겠습니다. 우리는 values (literals & variables), camel casing, unicode, semicolons, indentation, 공백, 주석, 대소문자, 키워드, 연산자와 표현식에 대해 알아볼 것입니다. 😅
시간을 내서 기초를 배우면 기능적이고 가독성좋은 코드를 작성하는데 도움이 될 것입니다!
JavaScript Values
JavaScript 에서 값의 두가지 타입이 있습니다: Fixed values(or literals) 와 Variable values(변수들).
Literals
Literals는 코드에서 작성된 정의된 값들입니다. 숫자, 문자열, booleans (true or false), 객체와 배열 리터럴. 아래는 몇 가지 예제입니다.
10 // 숫자 (can be a decimal eg. 10.5)
‘Boat’ // 문자열 (쌍따옴표(“”)나 따옴표(‘’)로 문자를 묶을수있다)
true // A boolean (true or false)
[‘a’, ‘b’] // 배열
{color: ‘blue’, shape: ‘Circle’} // 객체Variables
변수들은 데이터에 이름을 붙인것이다. JavaScript에서 var, let, const 키워드로 변수를 선언할 수 있고 = 으로 값을 할당합니다.
예를 들어, key 는 변수로 정의되었고 abc123으로 값이 할당되었다.
const key;
key = abc123;var를 사용할때? 하지마. 그건 레거시 코드를 작업할때에만 사용하자. ES6 이전 문법들이다.
let을 사용할때? 프로그램안에서 변수가 업데이트될 필요가 있다면 사용하자.
const? 변수에 상수값이 있다면 사용하자. const는 업데이트될 수 없다.
Camel Case
변수 이름이 한 단어 이상으로 구성된다면 어떻게하는게 좋을까? 예를 들어 “first name” 이라는 이름으로 변수를 선언하려면 어떻게 해야할까?
hyphen을 사용한다면? first-name 아니, -는 JavaScript에서 뺄셈을 위해 예약되있다.
underscores는? first_name 나쁘지않지만, 코드가 복잡하고 혼란스러워질수 있다.
그럼 해결책은? camel case! firstName. 첫번째 단어는 lower-case, 뒤쪽의 던어들의 첫번째 문자는 upper-case. 이건 커뮤니티에서의 규약이므로 지키도록하자.
Note: const 변수의 이름을 upper-case와 underscores로 하는것은 괜찮습니다. ex) const DEFAULT_PLAYBACK_SPEED = 1;
이 코드는 다른 사람들에게 그 값은 고정되어있음을 나타내준다. 아니면 camelCase로 해도 문제없다.
Unicode
JavaScript는 유니코드 문자 집합을 사용한다. Unicode는 모든 문자, punctuations, 기호들이 포함되어 있다! 링크를 확인해보십시오. 이건 우리가 모든 언어로 이름을 작성할 수 있기 때문에 훌륭하고 심지어는 변수 이름에 이모지를 사용할 수도 있다. (안될게 뭐있어? 🤷🏻♂️).
Semicolons
JavaScript 프로그램은 많은 명령문들로 만들어집니다. 예를 들면:
// JavaScript 구문의 예제입니다:let a = 1000;
a = b + c;
const time = Date.now();
JavaScript 구문은 종종 세미콜론(;)으로 끝납니다.
하지만 세미콜론은 필수가 아닙니다! 사용하지 않는다고해서 JavaScript에 아무런 문제도 없습니다.
// 잘 동작합니다!let a = 1000
a = b + c
const time = Date.now()
그러나 필수인 상황도 있습니다. 예를 들면 for loop문을 사용할때가 그렇습니다.
let array = [1, 2, 3, 4]
for (i = 0; i < array.length; i++) { // 여기 세미콜론이 있습니다.
// code
}블록 구문을 사용할때는 세미콜론을 중괄호 뒤에 사용하지않습니다.
if (name == “Samantha”) {
// code
} // <- 여기// or,function people(name) {
// code
} // <- 여기
중괄호지만 객체라면 사용합니다.
const person = {
firstName: “Samantha”,
lastName: “Doe”,
age: 30,
eyeColor: “blue”
};시간이 지나면 세미콜론을 사용해야할 곳과 말아야할 곳을 기억나기 시작할것입니다. 그때까지는 모든 구문의 끝에 사용하는것이 좋습니다. (블록 구문을 제외하고..)
추가로 일반적인 규약(convention)은 신경쓰지 않고 사용하는 것이라 오류율이 줄면 좋은 코드(?)로 간주됩니다. (이 부분은 어찌 번역해야할지 모르겠어서.. 원문도 올려봅니다.
Plus it really is a common convention is to use them regardless, it’s considered good practice as its reduces the probability of errors.)
Note: 실제로 JavaScript를 사용하면 ESLint와 같은 linter를 사용해보세요. 자동으로 코드에서 구문 에러들을 찾아내줄것입니다.
Indentation(들여쓰기)
이론상 JavaScript 프로그램을 한줄로 작성할수있습니다. 그러나 이건 읽기나 유지보수가 불가능합니다. 그렇기에 우린 들여쓰기를 사용합니다. 예를 들면 조건문에 들여쓰기를 사용할수있습니다.
if (loginSuccessful === 1) {
// true 조건 코드
} else {
// false 조건 코드
}여기서 블록 안의 모든 코드가 들여쓰기됩니다. 이 경우 주석 코드 // true 조건 코드 와 // false 조건 코드 가 들여쓰기 되어있습니다. 몇 개의 공백(흔히 2 or 4개를 이용합니다) 또는 탭을 사용해 들여쓰기를 합니다. 어느 것으로 할지는 원하는것으로 하면되지만 일관성있게 하는것이 중요합니다.
코드를 중첩시키면 아래처럼 더 들여쓰기됩니다.
if (loginAttempts < 5){
if (loginAttempts < 3){
alert(“< 3”);
} else {
alert(“between 3 and 5”);
}
} else {
if (loginAttempts > 10){
alert(“> 10”);
} else {
alert(“between 5 and 10”);
}
}들여쓰기를 적용하면 훨씬 깔끔하고 유지보수가 쉽고 코드 가독성도 올라갑니다!
White Space(공백)
JavaScript는 키워드와 이름 식별자들 사이에 하나의 공백만 있어야하고 그렇지 않으면 모든 공백은 무시됩니다.
즉, 아래와 같은 경우는 차이가 없습니다.
const visitedCities=”Melbourne, “+”Montreal, “+”Marrakech”;
const visitedCities = “Melbourne, “ + “Montreal, “ + “Marrakech”;보통 두번째 줄을 더 쉽게 읽을 수 있을겁니다. 다른 예시
let x=1*y;
let x = 1 * y;다시 말하지만, 두번째 줄이 훨씬 더 쉽게 읽고 디버깅할 수 있습니다! 공백을 이용해 의미있는 방법으로 코드를 자유롭게 작성할수 있습니다. 아래와 같이 공백을 이용할 수도 있습니다.
const cityName = “Melbourne”;
const cityPopulation = 5000001;
const cityAirport = “MEL”;Commenting(주석)
주석은 실행할수 없는 코드입니다. 프로그램 안에서 몇몇 코드의 설명을 제공하는데 유용합니다.
그리고 실행을 방지하기 위해 코드 섹션을 ‘주석으로 처리’하기도 합니다. 주로 코드 테스트할 때 종종 사용됩니다.
JavaScript에는 두 가지 주석이 있습니다.
// Comment goes here
/* Comment goes here */첫 번째 구문은 한 줄 주석입니다. //의 오른쪽에 내용을 적습니다.
두번째는 multi-line 주석입니다. /* 여기에 주석이 들어갑니다. */
예를 들면 아래처럼 사용합니다.
/* This is
a comment spanning
multiple lines */Identifiers(식별자)
JavaScript에서 변수, 함수, 속성의 이름을 식별자라고 합니다. 식별자는 문자, 숫자, $와 _ 로 구성될 수 있습니다. 다른 기호는 허용되지 않고 숫자로 시작할 수도 없습니다.
// 가능 :)
Name
name
NAME
_name
Name1
$name// 불가능 :(
1name
n@me
name!
Case Sensitivity(대소문자 구분)
JavaScript는 대소문자를 구분합니다! 식별자 이름을 test와 Test로 했다면 둘은 다른 식별자입니다.
아래와같이 했을때 에러가 납니다.
function test() {
alert(“This is a test!”);
}function show_alert() {
Test();
}
show_alert(); // Uncaught ReferenceError: Test is not defined
다시 말해서 코드의 가독성을 올리려면 이름을 다양하게 만드는 것이 좋습니다. 따라서 너무 비슷하게 보이는 식별자는 없습니다(?). (이해가 안되어 원문글 올립니다. => In order to ensure that our code is readable, it’s best to try to vary our names, so no identifiers are found looking too similar.)
Reserved Words(예약어)
JavaScript에는 식별자로 사용할 수 없는 많은 수의 단어들이 잇습니다. 이 단어들은 JavaScript에 내장된 기능들이기 때문에 JavaScript에 의해 예약되어 있습니다. 예를 들면:
break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.예약어 전체 보러가기
하지만 여러분들은 이 단어들을 기억할 필요가 없습니다. 변수 이름을 지정하고 이 이름을 가리키는 구문 오류가 발생하면 그걸 확인하고 이름을 바꾸면됩니다.
예를 들면 이런 것.
const new = ‘s’; // Uncaught SyntaxError: Unexpected token newJavaScript Operators(연산자)
산술 연산자 +, -, *, / 은 주로 JavaScript 내에서 아래와 같은 계산을 수행할때 사용합니다.
(2 + 2) * 100할당 연산자 = 은 변수에 값을 할당할때 사용합니다.
let a, b, c;
a = 1;
b = 2;
c = 3;JavaScript Expressions(표현식)
표현식은 값, 변수, 연산자를 합쳐서 새로운 값을 계산할때입니다.
10 * 10 // 100
let x = 5
x * 10 // 50const firstName = “Samantha”;
const lastName = “Doe”;
firstName + “ “ + lastName; // “Samantha Doe”
결론
이 기사는 JavaScript의 기본 구문과 구조에 대한 일반적인 개요를 제공하기 위한 것이다. 우리는 여러 가지 convention을 살펴보았습니다. 특히 자신만의 특정 규칙을 사용해 협업환경에서 작업할때 유연하게 작업이 가능하단 것을 기억하십시오.
구문과 구조는 프로그램의 기능과 코드 가독성, 유지보수 측면에서 중요한 역할을 합니다.
이 기사가 여러분들에게 유용했기를 바라며 번역을 여기서 이만 마치겠습니다. 감사합니다!! ㅎㅎ
