멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 32 (코멘트, 세미콜론, 자료형, 변수, 함수의 선언 및 사용)

 

 

목차

• 코멘트(Comments)
• 세미콜론(Semicolon)
• 자료형(Data Type)
• 변수(Variables)
• 함수(Function)의 선언 및 사용
• 오늘 하루를 돌아보며

 

 

코멘트(Comments)

주석이라고도 부르며, JavaScript에서 발생하는 문제를 해결하는 데 도움이 되는 추가 메모를 작성할 수 있다. 주석은 코드 실행에 아무런 영향을 주지 않는다. JavaScript에서는 다음의 두 가지 형태로 주석을 처리할 수 있다.

• // 한 줄 주석
• /* 여러 줄 주석 */

 

 

세미콜론(Semicolon)

JavaScript에서는 줄 끝에 세미콜론(;)을 추가하지 않아도 정상 작동한다. 세미콜론을 자동으로 삽입(ASI, Automatic Semicolon Insertion)하기 때문이다. 세미콜론을 추가하는 것은 선택 사항이다.

 

세미콜론을 쓰지 말아야 하는 예외 상황들이 있기 때문에 세미콜론을 언제 쓰고 안 쓰는 지 충분히 공부하고 숙달됐다면 명시적으로 세미콜론을 쓰는 것이 좋을 수 있다. 하지만 아직 그런 예외 상황을 잘 알지 못하고 충분히 익숙하지 않을 때는 오히려 사용하지 않는 것이 좋을 수 있다.

 

 

자료형(Data Type)

JavaScript의 7가지 기본(원시, Primitives) 데이터 타입은 다음과 같다.

1. String(문자열): 작은 따옴표나 큰 따옴표로 묶어서 표현한다. 문자열을 연결(string concatenation)할 때는 + 연산자를 사용한다. 콘솔 패널에서 빨간 색으로 표시된다.
2. Number(숫자): 숫자 데이터를 나타낸다. 콘솔 패널에서 파란 색으로 표시된다.
3. Boolean(불리언, 논리형): 조건을 처리할 때 주로 사용하며, true(참, 1) 또는 false(거짓, 0) 두 가지 값만 가질 수 있다. 콘솔에서는 숫자처럼 파란 색으로 표시된다.
4. Null(널): 문서에 요소가 존재하지 않을 때의 값을 나타낸다. 조건 비교할 때 활용할 수 있다.
5. Undefined(언디파인드): 정의되지 않았다는 뜻으로, 변수(variable)의 기본 값(default value)을 나타낸다. 조건 비교할 때 사용된다.
6. Symbol(심볼): 고유함이 보장된다. Symbol()을 사용할 때는 첫 글자를 대문자로 쓴다.
7. BigInt(빅인트, 아주 큰 정수): bit integer(큰 정수). Number 타입으로 정확히 표현할 수 없는 매우 큰 정수를 표현할 때 사용한다. 숫자 뒤에 n이 붙는다.

 

변수(Variables)

시간의 흐름에 따라 값이 변할 수 있다. 변수를 사용하여 의미 있는 코드를 작성할 수 있다. 변수를 선언할 때는 let 키워드를 사용한다. (var 키워드는 2015년 이전에 변수를 선언할 때 사용하던 키워드다. 지금은 사용을 권장히지 않는다.) let 키워드 다음으로는 변수의 이름, 할당(대입) 연산자(=), 값 순으로 선언한다.

// let 변수_이름 = 값
let initialApples = 4

// 한글 변수 이름
let 처음_가진_사과_개수 = 4

 

할당(대입) 연산자는 등호(=) 기호를 사용한다. JavaScript에서 등호(=) 기호는 수학에서처럼 작동하지 않는다. 같다는 뜻이 아니라 값을 할당(assign)한다는 뜻이다.

 

값(Value)은 변수가 기억하는 정보다. 값은 기본형(문자열, 숫자 등)이거나 객체형(배열, 함수 등)일 수 있다.변수의 값을  할당하지 않으면 기본 값은 undefined가 된다.

 

변수는 하나의 값만 기억할 수 있다. 방정식이 있는 경우 식을 먼저 계산하고 이후에 계산한 값을 변수에 할당한다. 이러한 방정식을 표현식(expression)이라고 한다.

let initialApples = 4
let applesToBuy = 27

// 표현식
let totalApples = initialApples + applesToBuy

 

 

변수 이름

변수는 의미 있는 코드를 작성하기 위해 사용되기 때문에 변수의 이름도 의미 있게 작성해야 한다. 변수는 주로 camelCase를 사용하며, snake_case나 특별한 경우 PascalCase도 사용할 수 있다. 하지만 변수 이름으로 kebab-case는 사용할 수 없다.

변수의 이름을 작성할 때의 규칙은 다음과 같다.

1. 변수 이름은 한 단어로 작성해야 하며, 공백이나 하이픈(-) 기호가 들어가면 안 된다.
2. 알파벳(a-z, A-Z), 숫자(0-9), 그리고 특수 문자(_, $ 등)로 구성한다.
3. 변수 이름이 숫자로 시작하면 오류가 발생한다.
4. 변수 이름으로 예약어(Reserved words)를 사용할 수 없다.

Lexical grammar - JavaScript | MDN

 

 

const 상수

상수(constant)를 선언할 때는 const 키워드를 사용한다. 변하지 않는 값을 선언하는 키워드기 때문에 새로운 값을 할당할 수 없다. 상수 이름은 관례상 전체 대문자와 언더바(_)를 사용한다.

const initialApples = 4

// [타입 오류] 상수로 선언된 변수에 값을 다시 할당할 수 없다.
const initialApples = 3

// 관례상 상수를 선언할 때는 전체 대문자를 사용한다.
const HOURS_IN_DAY = 24

 

 

함수(Function)의 선언 및 사용

함수는 특정 순서에 따라 작업을 실행하는 코드 블록이다. 반복하는 것을 편리하게 해주는 기능을 하는 값을 담는 상자로 볼 수 있다. 어떤 입력이 주어지면 결과를 내는 구조다. 함수의 중요한 포인트는 재사용성(Reusability)이다.

 

함수 선언

함수는 function 키워드를 사용하여 선언한다. 함수 이름은 사용자가 임의로 작성할 수 있으며 의미 있는 이름으로 작성하는 것이 좋다. 함수 이름 작성 규칙은 변수 이름 작성 규칙과 같다. 다만, 함수는 기능이기 때문에 이름을 동사 형태로 짓는 것이 직관적이다.

function 함수이름(매개변수) {
  // 함수 내부에 코드 작성
}

 

함수 안에서 선언되어 사용하는 변수는 함수 안에서만 사용 가능한 변수로, 지역변수(local variable)라고 한다.

함수 밖에서 선언되어 코드 실행 범위 어디서나 접근할 수 있는 변수는 전역변수(global variable)라고 한다.

 

함수의 재사용성의 목적의의는 변형에 있다. 함수 밖에서 접근해서 내부에 있는 값을 바꾸고 싶을 때 사용할 수 있는 것이 매개변수(Parameters = params)다. 매개변수는 함수에 선언할 변수를 쉼표로 구분하여 나열하며, 함수를 호출(실행)할 때 전달한 값이 매개변수 값으로 할당된다. 함수를 호출하면서 전달하는 값은 인수(arguments)라고 한다.

 

 

함수 사용

함수를 선언한 후에 함수 이름 뒤에 소괄호(())를 붙여 함수를 사용(호출 또는 실행)할 수 있다.

 

 

들여쓰기

가독성을 높이기 위해 함수 블록 안(중괄호({}) 안에 있는 모든 코드)에 있는 코드는 오른쪽으로 들여쓰기하는 것을 권장한다.

 

// 함수 선언
// year, month, day가 매개변수
function 일기쓰기(year, month, day) {
 // let 키워드를 사용하지 않아도 매개변수를 직접 사용할 수 있다.
 console.log(year + '년 ' + month + '월 ' + day + '일에 일기를 쓴다.')
}

// 함수 호출(실행)
// 2025, 9, 14가 인수
일기쓰기(2025, 9, 14)

 

 

오늘 하루를 돌아보며

코드를 짤 때 JavaScript도 나름대로 자유도가 있다. 세미콜론을 찍을 것인지, 안 찍을 것인지 결정할 수 있고, 함수 이름을 camelCase로 선언하거나 kebab-case로 선언할 수도 있다. 들여쓰기를 2칸 할 수도 있고 그 이상을 할 수도 있다. 문자열을 선언할 때 작은 따옴표를 쓸 수도 있고 큰 따옴표를 쓸 수도 있다. 원하는 대로 할 수 있지만, 중요한 것은 일관성이다. 여기서는 작은 따옴표를 쓰고, 저기서는 큰 따옴표를 쓰면 중구난방으로 정신없어 보일 수 있다. 내 나름대로의 일관성을 가지고 코드를 짜는 것이 중요하다. 나중에 협업할 때는 팀 내에서 코딩 규칙을 세워서 일관성 있게 코드를 짜야 한다. 지금부터 일관성 있게 코드를 짜는 습관을 들이면 나중에 도움이 될 것이다.