코드스테이츠-부트캠프 (JavaScript 기초)

김희목·2024년 2월 25일

JavaScript 코드스테이츠

코드스테이츠

목록 보기

5/56

코드 실행

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어입니다. 그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동합니다.

혹은 따로 Node.js라는 자바스크립트 런타임을 컴퓨터에 설치해야 합니다.

Glossary

REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경입니다. 내가 작성한 코드가 문법에 맞는지 틀린 지 간단하게 실행해 볼 수 있습니다.

프로그램(program): 작업(task) 수행을 위한 코드 모음

프로세스(process): 프로그램 실행의 결과물.

console.log()
'hello world'라고 입력하고 엔터를 치는 순간 자바스크립트 엔진은 이 코드를 읽고 평가하고 출력합니다. REPL 아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력할 수 있습니다.

console.log('hello world'); // hello world

코드 독해

“컴퓨터는 0과 1로 이루어져 있다.”라고 많이 들어보셨을 겁니다. 실제로 그렇습니다. 우리가 사용하는 일반적인 컴퓨터는 0과 1의 조합으로 모든 정보를 표현하고 이해합니다. 이를 기계어라고 부릅니다.

그런데 자바스크립트(JavaScript)는 그렇지 않습니다. 영어도 있고, 기호도 있고, 숫자도 있습니다. 이렇게 사람이 다룰 수 있게 일정한 문법과 의미를 지닌 언어를 프로그래밍 언어라고 부릅니다. JavaScript도 프로그래밍 언어 중 하나입니다. JavaScript 엔진으로 실행할 수 있습니다.

let ourMission = 'Unlock Human Potential';
let JavaScriptWasInventedBy = 'Brendan Eich';
let JavaScriptWasInventedIn = 1995;
i++;
i--;

JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고, 해당 지점에서 코드 실행을 바로 중단합니다. 아래 코드는 실행하면 에러가 발생합니다.

= // SyntaxError: Unexpected token '='

SyntaxError(문법 에러)라는 문구가 에러로 출력되는 것을 확인할 수 있습니다.

Glossary

기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.

프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.

자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어입니다.

JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램입니다. 크롬에 내장된 v8이 대표적입니다.

주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성할 수 있다.

자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분한다.

값(value): 하나의 고유한 의미를 가지는 코드.
JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.

표현식(expression): 값으로 평가될 수 있는 코드.

연산자(operator): 특정 연산을 수행할 수 있는 코드.

코드 출력

구구단 출력하기

// 구구단 2단을 출력해 보세요.
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18

타입

타입(type)은 값(value)의 종류입니다.
자바스크립트의 모든 값은 타입을 가지고 있습니다.

타입이 있어 쉽게 분류가능하고, 각 타입은 고유한 속성과 메서드를 가집니다.

Number 타입

자바스크립트의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)를 모두 표현할 수 있습니다.

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있습니다.

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

같은 숫자 값 간에는 간단한 사칙연산을 할 수 있습니다. 아래 예시에서 사용한 수학 기호 (+ - * / )를 자바스크립트에서는 산술 연산자(arithmetic operator)라고 부릅니다.

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 * 2); // 2
console.log(1 / 2); // 0.5
console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

그 외의 복잡한 계산을 위해서는 Math 내장 객체를 사용합니다. 대표적인 메서드는 아래와 같습니다.

Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.

Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.

Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.

Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.

Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.

Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

String 타입

JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입입니다. 따옴표(' '), 큰따옴표(" "), 백틱( )으로 감싸면 됩니다. 맥북의 경우 백틱은 영어로 전환하고 물결(~)을 누르면 입력할 수 있습니다.

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있습니다. 특히 백틱으로 만든 문자열은 줄 바꿈도 가능합니다.

'사과'
"JavaScript"
"欢迎你"
"😇"
"최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
`JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 
웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
스타일을 지원한다.`

(+)로 문자열을 이어 붙일 수 있습니다.

문자열과 문자열을 이어 붙일 때의 + 는 문자열 연결 연산자로써 쓰입니다.
다른 타입과 이어 붙이려고 하면 모두 문자열로 변합니다.

특히, 숫자와 이어 붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다. 위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

문자열의 length 속성

문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있습니다. 문자열 값에 .length 를 붙이면 됩니다.

console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

인덱스(Index)

문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다.

첫 번째 문자의 인덱스는 0입니다. JavaScript는 우리 일상생활에서 순서를 셀 때 1부터 1, 2, 3 … 세는 것이 아니고, 0부터 세는 점을 주의해 주세요. 이를 Zero-based numbering이라고 합니다.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

문자열 주요 메서드

문자열의 유용한 메서드 일부를 소개합니다.

toLowerCase() : 문자열을 소문자로 변경합니다.

toUpperCase() : 문자열을 대문자로 변경합니다.

concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있습니다.

slice() : 문자열의 일부를 자를 수 있습니다.

indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
포함되어 있지 않으면 -1을 반환합니다.

includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

Boolean 타입

Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.

falsy
불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용합니다.

===, !== : 엄격한 동치 연산자

두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false가 됩니다.

123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

==, != : 느슨한 동치 연산자

느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다. 참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 합니다.

12 == '12' // true

> , < , >= , <= : 대소 관계 비교 연산자

두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.

100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logical operator)

논리연산자(logical operator)로 두 값 간의 논리 관계를 확인할 수 있습니다.

|| : 논리합(OR)

두 값 중 하나만 true여도 true로 판단합니다.
두 값이 모두 false면 false로 판단합니다.

true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)

false || false // false
200 < 100 || 20 < 10; // false

&& : 논리곱(AND)

두 값이 모두 true면 true로 판단합니다
두 값 중 하나만 false여도 false로 판단합니다

true && true // true
200 > 100 && 20 > 10; // true

true && false // false
false && true // false
100 > 200 && 200 > 100; // false

논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현합니다.

! : 부정(NOT)
오른쪽 피연산자와 반대의 사실을 반환합니다.
falsy, truthy의 반대 값을 반환합니다.

!true // false
!(100 > 200) // true

!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false

변수

JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙일 수 있습니다. 그 이름을 바로 변수라고 부릅니다.

변수의 선언과 할당

어떤 사물을 다루기 위해서는 이름을 알아야 합니다. 데이터도 마찬가지입니다. 문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 합니다.

JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 합니다.

// 구구단 2단
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18

이렇게 console.log()로 구구단은 만들어 출력한다 가정했을 경우 2단에서 3단으로 바꾸고 싶다면 일일이 숫자를 바꿔 입력해줘야 합니다.

이러한 작업은 매우 비효율적인 작업이기 때문에, 반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 그 이름을 사용하여 구구단 n단을 출력하면 어떻게 될까요?

이러한 방식을 통해 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고, 그 메모리 공간에 이름을 부여하는 것을 변수 선언이라고 합니다.

변수 선언 키워드인 let을 사용하여 변수를 선언하면 컴퓨터는 값을 저장하기 위해 메모리 공간을 확보하고 그 공간의 이름을 num으로 기억합니다. 그 공안의 이름인 num을 변수라고 합니다.

let num; // 변수 선언

이제 컴퓨터가 확보한 num이라는 이름의 메모리 공간에 값을 넣어보겠습니다. 할당연산자(=)를 사용하여 메모리 공간에 특정한 값을 넣을 수 있습니다. 이것을 값 할당이라고 합니다.

num = 5; // 값 할당

변수 선언과 값 할당을 통해 컴퓨터는 값을 저장하기 위해 num이라는 이름의 메모리 공간을 확보하고, 그 메모리 공간에 숫자 5를 저장했습니다. 변수 num을 사용하여 구구단 5단을 출력하는 코드를 작성해 보겠습니다.

/ 구구단 5단
let num; // 변수 선언
num = 5; // 값 할당

console.log(num * 1); // 5
console.log(num * 2); // 10
console.log(num * 3); // 15
console.log(num * 4); // 20
console.log(num * 5); // 25
console.log(num * 6); // 30
console.log(num * 7); // 35
console.log(num * 8); // 40
console.log(num * 9); // 45

요약 및 정리

변수의 선언과 할당

let name; // 변수를 선언할 때는 let 키워드를 사용합니다. let 키워드 뒤에 선언하고자 하는 변수명을 입력합니다.
name = 'kimcoding'; // 선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용합니다.
let name = 'kimcoding'; //변수 선언과 값 할당을 동시에 할 수 있습니다.

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

여기서 만약 아무것도 할당하지 않은 변수는 undefined가 자동으로 할당됩니다. 이는 초기화라는 자바스크립트의 독특한 특징입니다.

값의 재할당

let키워드로 선언한 변수에 새로운 값을 할당할 수 있습니다. 이를 재할당이라고 합니다. 재할당에도 할당연산자(=)를 사용합니다.

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됩니다.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

var키워드

var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드입니다.

var키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let키워드와 const키워드가 등장하였습니다.

따라서 var키워드는 사용을 되도록 지양하고, let키워드와 const키워드를 사용할 것을 권장합니다. 재할당이 필요한 변수에는 let키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const키워드를 사용해야 합니다.

네이밍 규칙

변수명은 다음과 같은 네이밍 규칙을 준수해야 합니다.

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
예약어는 식별자로 사용할 수 없다.
예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.

ex) let, const, true, false, typeof 등

그 외 규칙들
변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 합니다.

let name, $head, _score // 사용 가능한 변수명

let 1st; // 사용할 수 없는 변수명

let true; // 사용할 수 없는 변수명

// 변수의 존재 목적을 이해할 수 없는 변수명
let x = 100;
let y = 5;

// 변수의 존재 목적을 명확히 알 수 있는 변수명
let name = 'kimcoding';
let age = 25;

네이밍 컨벤션

하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있습니다.

JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용합니다. 카멜 케이스는 낙타의 등모양에서 유래된 이름으로써, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법입니다.

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

변수 활용하기

변수를 활용한 연산

변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능합니다.

let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10

그러나 각각의 연산은 독립적으로 이뤄질 뿐, number는 그대로 10이 할당되어 있습니다. 연산의 결과를 변수에 반영하려면 어떻게 해야 할까요? 앞서 학습한 재할당을 하면 됩니다.

let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

템플릿 리터럴(template literal)

값을 큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 된다는 것을 이전에 학습했습니다.

이 중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 합니다. 템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있습니다. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아두어야 합니다.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있습니다. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됩니다.

단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수합니다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'


let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

김희목

이전 포스트

코드스테이츠 부트캠프 - (HTML/CSS 활용)

다음 포스트

코드스테이츠-부트캠프 (JavaScript 기초)