[DAY3] JavaScript 기초 1(주석, 데이터 타입)

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

JavaScript 프로그래밍 언어의 기본적인 개념과 실행 방법, 주요 데이터 타입(Number, String, Boolean)에 대해 정리함.

 

🚀 JavaScript 기초

 

1) JavaScript 기초	JavaScript는 HTML 파일 내에서 브라우저를 통해 실행되거나, Node.js 환경에서 실행됨. REPL 환경을 통해 간단한 JavaScript 코드를 실행하고 결과를 바로 확인할 수 있음.
2) console.log() 메서드	console.log() 메서드를 사용하여 개발자 도구의 콘솔이나 터미널에 원하는 값을 출력함.
3) 주석	코드 설명을 위해 주석을 사용할 수 있으며, JavaScript에서는 //로 단일 줄 주석을, /* ... */로 여러 줄 주석을 추가할 수 있음.
4) 값과 표현식	값은 하나의 고유한 의미를 가지며, 표현식은 값으로 평가될 수 있는 코드. + 연산자와 같은 연산자를 사용하여 새로운 값을 생성할 수 있음.
5) 데이터 타입	Number: 숫자 데이터 타입으로, 정수와 실수를 포함함. String: 문자열 데이터 타입으로, 따옴표로 묶인 텍스트를 표현함. Boolean: 참(true) 또는 거짓(false)을 표현하는 논리적 데이터 타입.

1. JavaScript 기초

---

1) JavaScript 코드 실행하기

• JavaScript는 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어임.
• HTML 파일과 JavaScript 파일을 브라우저에서 실행해야 작동함. 또는 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 함.

🚀Glossary

REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경. 내가 작성한 코드가 문법에 맞는지 틀린 지 간단하게 실행해 볼 수 있음.
프로그램(program): 작업(task) 수행을 위한 코드 모음
프로세스(process): 프로그램 실행의 결과물.

2) console.log()

‘hello world’라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력함. REPL이 아닌 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있음. 괄호 안에 'hello world'를 입력하고 엔터를 눌러 출력함.

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

 

🚀Glossary

console.log(): 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

3) JavaScript 엔진이 코드 읽는 법

🚀Glossary

기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없음.
프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지님.
자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어.
JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램. 크롬에 내장된 v8이 대표적.

4) 주석

내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어려움. 과거의 내가 열심히 작성했던 코드를 왜 그렇게 작성했는지도 기억하기 쉽지 않음.

코드에 간단히 메모를 하기 위해 주석(comment)를 추가함. JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성함. 주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 사람의 언어, 자연어를 작성할 수 있음.

// 문자열 'hello world'를 설명하는 주석입니다. 주석은 가능하면 코드 위에 작성합니다.
'hello world';

/* 
여러 줄의 코드를 주석 처리할 수 있습니다.
console.log('Hello');
*/

 

🚀Glossary

주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성할 수 있음.
자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분.

5) 값과 표현식

REPL에 a b c d를 입력함. Uncaught SyntaxError: Unexpected identifier가 발생할 것임. 문법 에러가 발생했음.

a b c d // Uncaught SyntaxError: Unexpected identifier

123을 입력함. 에러가 발생하지 않음.

123; // 123

• 값(value): 읽고, 평가가 완료되어 하나의 의미를 가지는 코드.
• 값을 표현하기 위해서는 다양한 방식이 있음. 예를 들어, 숫자값 1995를 표현하기 위해서는 아래와 같은 다양한 코드로 쓸 수 있음.
• 표현식(expression): 하나의 값으로 평가될 수 있는 코드. + 기호와 같이 값에 변화를 줄 수도 있음.
• 연산자(operator): 산술 연산이나 논리 연산 등을 할 수 있는 기호.

1995;
1000 + 900 + 90 + 5;
1900 + 95;

 

🚀Glossary

값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
표현식(expression): 값으로 평가될 수 있는 코드.
연산자(operator): 특정 연산을 수행할 수 있는 코드.

6) 구구단 출력

지금까지 배운 내용으로 구구단을 출력함. 예를 들어, 2단의 결과를 출력하기 위해서는 값을 직접 입력할 수도 있지만

console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(14);
console.log(16);
console.log(18);

* 연산자로 좀 더 직관적으로 2단이라는 것을 표현할 수도 있음.

// 구구단 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

2. 데이터 타입

---

• Number: 숫자 데이터 타입. 정수와 실수를 포함.
• String: 문자열 데이터 타입. 따옴표로 묶인 텍스트를 표현.
• Boolean: 참(true) 또는 거짓(false)을 표현하는 논리적 데이터 타입.

1) 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로 나눈 나머지 구하기)

a. Math 내장 객체

좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용함. 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

2) String 타입

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

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

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

+ 로 문자열을 이어 붙일 수 있음. 문자열과 문자열을 이어 붙일 때의 + 는 문자열 연결 연산자로써 쓰임.

다른 타입과 이어 붙이려고 하면 모두 문자열로 변함. 특히, 숫자와 이어 붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심함. 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 함.

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

a. 문자열의 length 속성

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

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

b. 인덱스(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'

c. 문자열 주요 메서드

• toLowerCase() : 문자열을 소문자로 변경함.
• toUpperCase() : 문자열을 대문자로 변경함.
• concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있음.
• slice() : 문자열의 일부를 자를 수 있음.

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

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

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

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

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

 

3) Boolean 타입

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

true;
false;

a. falsy

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

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

b. 비교연산자(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보다 작거나 같다."는 거짓)

c. 논리연산자(logical operator)

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

• || : 논리합(OR)
  • 두 값 중 하나만 true여도 true로 판단함.

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

  • 두 값이 모두 false면 false로 판단함.

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

• && : 논리곱(AND)
  • 두 값이 모두 true면 true로 판단함.

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

  • 두 값 중 하나만 false여도 false로 판단함.

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

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

• ! : 부정(NOT)
  • 오른쪽 피연산자와 반대의 사실을 반환함.

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

• • falsy, truthy의 반대 값을 반환함.

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

 

⭐후기

---

• JavaScript 기초를 공부하며, 웹 개발에 있어 필수적인 프로그래밍 언어의 기본을 이해할 수 있음.
• 특히, 주요 데이터 타입의 이해는 다른 프로그래밍 언어와 유사한 부분이 있다는 것을 깨닫고 쉽게 익힘. JavaScript의 기초를 탄탄히 다지면서, 복잡한 웹 애플리케이션 개발을 할 수 있도록 노력하겠음.
• 데이터 타입을 더 확장하여 null, undefined, Symbol, 그리고 Object 타입 등도 공부할 계획임.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.