블로깅챌린지]Unit.5 JavaScript 기초(타입, 변수, 할당) - 코드스테이츠

SEB_FE_45

Section1. Unit5. JavaScript기초

---

1. JavaScript 

JavaScript 는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다.

이에 HTML파일과 함께 브라우저에서 실행해야 작동한다. 혹은 Node.js라는 런타임을 컴퓨터에 설치해 실행할 수 있다.

코드스테이츠에서는 학습툴로 StackBlitz을 통해 실습을 진행하였다.

※ 용어 설명
- REPL(Read-Evaluate-Print loop)
 : 읽고(Read), 평가하고(Evaluate), 출력(Print)을 반복(loop)하는 가장 간단한 개발 환경
- 프로그램 : 작업(task) 수행을 위한 코드모음
- 프로세스 : 프로그램 실행의 결과물
- console.log() : 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

JavaScript 는 사람이 다룰 수 있게 일정한 문법과 의미를 지닌 프로그래밍 언어이다.

- 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없음
- 프로그래밍 언어
 : 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지님
- 자바스크립트(JavaScript)
 : JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어
- JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램. 크롬에 내장된 v8이 대표적
- 주석 : 메모기능(//자연어 , /*자연어(여러줄 가능)*/)
- 자연어 : 인간이 쓰는 언어
- 값(value) : 하나의 고유한 의미를 가지는 코드, JS 엔진이 하나의 값으로 읽고 평가할 수 있어야 함
- 표현식(expression) : 값으로 평가될 수 있는 코드
- 연산자(operator) : 특정 연산을 수행할 수 있는 코

JavaScript 코드 작성 시 

---

2. JavaScript 타입(Number, String, Boolean)

가. Number 타입

숫자를 표현하기 위한 데이터 타입이며, 정수(integer)와 실수(float), 음수까지 표현할 수 있다.

같은 숫자 값 간에는 간단한 사칙연산이 가능하며, 수학에서 사용하는 기호(+, -, *, /)를 산술연산자(arithmetic operator)라고 한다.

Math 내장객체는 조금 더 복잡한 계산을 하기 위해 사용한다. 아래는 Math 내장객체의 대표 매서드 예시이다.

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

.floor는 내림 / .ceil은 올림 / .round는 반올림 / .abs는 절대값 / .sqrt는 루트값 / .pow는 제곱근을 의미한다.

---

나. String 타입

자연어를 표현하기 위한 데이터 타입이며, 따옴표('), 큰따옴표("), 백틱(`)으로 감싸서 표현한다.

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있으며, 숫자와 문자를 조합해서 문자열로 만들 수 있다.

백틱(`)을 이용한 문자열은 줄바꿈도 가능하다.

'문자열' + '문자열'과 같이 +기호는 문자열 연결 연산자로 사용되기도 한다.

단, 다른 타입과 이어붙이는 경우 모두 문자열로 표시된다. 특히, 숫자와 문자열을 연결하다가 예상치 못한 결과가 발생할 수 있기 때문에 가능한 다른 타입 간의 연산은 하지 않도록 주의해야 한다.

 

문자열 속성 중에는 문자열의 길이를 확인할 수 있는 .length라는 속성이 있다.

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

 

문자열의 각 문자는 순서가 있으며, 각 문자가 몇번째 위치하는지 Index로 확인할 수 있다. 첫번째 문자의 인덱스는 0임을 주의해야 한다.

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

 

문자열 주요 메서드는 아래와 같다.

'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
'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false

.toLowerCase() 문자열을 소문자로 / .toUpperCase() 문자열을 대문자로 / .concat() 문자열 이어붙이기 / .slice() 문자열 자르기 / indexOf() 문자열 내 특정 문자가 몇번째 위치하는지 확인하기(두개 이상 있을 때는 가장 앞에 있는 문자의 인덱스 조회/찾는 문자 없으면 -1 반환) / .includes() 문자열 내 특정 문자가 포함되어 있는지 확인(있으면 true / 없으면 false 반환)

---

다. Boolean 타입

사실관계를 구분하기 위한 타입으로 값은 true 또는 false 중 하나이다.

불리언 타입은 아니지만, 자바스크립트에서 false로 "여겨지는" 값이 일부 있다. 이를 falsy 값이라고 한다. 반대로 truthy값도 있지만, 종류가 너무 많아 falsy 값을 암기하는 것이 용이하다.

대표적인 falsy 값은 [false, 0, -0, 0n, " ", ' ', ` `, null, undefined, NaN]이 있다.

 

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

===(피연산자 간의 관계가 같다.), !==(피연산자 간 관계가 다르다) 는 엄격한 동치 연산자로 두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환한다. 동치연산자는 보이는 값이 같아도, 타입이 다르면 false가 된다.

==(피연산자 간의 관계가 같다.), !=(피연산자 간 관계가 다르다) 는 느슨한 동치 연산자이다. "대체로" 타입이 달라도 값이 같으면 true, 다르면 false를 반환한다. 느슨한 동치 판단으로 예외가 많이 발생해 권장하지 않는다.

>, <, >=, <= 는 대소관계 비교 연산자이다. 이는 수학에서 부등호 기호의 사용법과 유사하다. >=, <=의 경우 입력 순서 중요하다.

 

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

|| 는 논리합(OR)로 두 값 중 하나만 true여도 true로 판단한다. 두 값이 모두 false면 false로 판단한다.

&&는 논리곱(AND)로 두 값 모두 true면 true로 판단한다. 두 값 중 하나만 false여도 false로 판단한다.

논리 부정연산자(!)는 사실관계를 반대로 표현한다.

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

---

3. 변수

가. 변수의 선언과 할당

어떤 사물을 다루기 위해 이름을 알아야 하듯, 컴퓨터와 소통하기 위해 특정 데이터에 이름을 붙이는 것을 변수라고 한다.
ex. 글씨를 쓰기 위해 사용하는 도구 = "볼펜" (글을 쓰기 위해 사용하는 도구를 볼펜이라고 부를거야!)

변수 선언은 특정데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고, 메모리 공간에 이름을 부여하는 것이다.

변수를 선언할 때에는 let 키워드를 사용한다.

let num; // 변수 선언

값 할당은 변수 선언을 통해 확보한 공간에 특정 값을 넣는 것이다.

num = 5; // 값 할당

변수 선언과 값 할당을 동시에 진행할 수도 있다.

let 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 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 variable;
console.log(variable) // undefined

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

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

const 키워드를 사용하면 재할당이 금지된다. 이를 재할당이 불가능한 변수(상수)라고 한다.

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

var 키워드는 let과 const 키워드가 등장하기 이전에 사용하던 변수 선언 키워드이다. var 키워드는 여러 단점이 존재하기 때문에 let과 const 키워드를 사용하기를 권장한다.

---

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

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러기호( $ )를 포함할 수 있다.
  let name, $head, _score // 사용가능한 변수
• 단, 식별자를 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야 한다. 숫자 시작은 허용하지 않는다.
  let 1st; // 사용할 수 없음
• 예약어(프로그래밍 언어에서 사용하고 있거나, 사용될 예정인 단어 ex. let, const, true 등)는 식별자로 사용할 수 없다.
  let true; // 사용할 수 없음
• 그 외에 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 한다.
  let x = 100 // 변수의 존재목적을 이해할 수 없음
  let name = "kim" // 변수의 존재 목적을 명확히 알 수 있음

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

자바스크립트에서는 일반적으로 카멜케이스(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)

값을 따옴표(' '), 큰따옴표(" "), 백틱(` `)으로 묶으면 문자열 타입의 값이 된다. 이중에서 백틱(` `)을 사용하는 방법을 템플릿 리터럴이라 한다.

템플릿 리터럴은 문자열 내부에 변수를 삽입할 수 있는 기능이 매우 유용하게 사용되기 때문에 반드시 알아두자!
템플릿 리터럴 내부에 ${ }를 사용하여 변수를 삽입할 수 있다.

이때, 문자열이 할당되지 않은 변수도 문자열로 취급된다.

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'

---

4. 오늘의 회고!

스파르타 코딩클럽을 통해 들었던 웹개발 종합반 강의에서 자바스크립트의 변수 선언과 할당 그리고 그 외에 기능들에 대해 경험한 적이 있었다. 아쉽게도 기억나는 것은 변수의 선언과 할당정도였다.

해당 강의에서는 웹페이지를 구현하는데 집중했기 때문에 대부분의 코드를 코드스니펫을 이용하여 진행했기 때문에 실제로 스스로 변수를 선언하고, 값을 할당하는 등의 내용을 많이 경험하지는 못했던 것 같다.

이번 유닛을 통해 자바스크립트의 기초에 대해 알 수 있는 시간이었다. 이후 진행한 코플릿 문제 풀이를 통해 오늘 배운 내용을 복습할 수 있었다. 다만, 교육 자료 만으로는 속성의 사용법 등을 완벽하게 이해하기는 어려워 MDN이나 다른 사람들이 공부한 블로그 자료를 찾아봐야만 했다. 교과서라고 할 수 있는 강의자료 내용이 조금 더 보완되면 좋겠다.

그래도 학습 이후 라이브세션을 통해 금일 배운 내용을 복습 할 수 있도록 강의가 진행되어 이해가 안되었던 부분을 이해하는데 도움이 되었다.

학습적인 부분 외에도 짧은 시간 말씀 묵상하기와 아내와 함께 운동하며 하루 돌아보는 시간을 충실히 갖으며, 복습도 하고 있어 나름 의미있는 시간을 보내고 있다고 생각한다.

지금은 조금 느리지만, 노력하는 만큼 나아질 것이라 믿고! 더욱 열심히 노력해보자!