[JavaScript] 기초

KIM DA MI·2023년 2월 20일

목록 보기

1/16

1. 코드 기초

학습 목표
1. JavaScript 코드를 직접 실행할 수 있다.
2. 원하는 데이터를 console.log()로 출력할 수 있다.
3. JavaScript 엔진이 코드를 읽는 법에 대해 기억한다.
4. 코드와 주석을 구분할 수 있다.
5. 값과 연산자를 구분할 수 있다.
6. console.log()로 구구단을 출력할 수 있다.

1-1. 코드 실행

자바스크립트(JavaScript)

최초 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다.
HTML, JavaScript 파일을 함께 브라우저에 실행해야 한다.
Node.js : 컴퓨터에서 자바스크립트를 실행할 수 있는 자바스크립트 런타임

REPL(Read-Evaluate-Print loop)

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

프로그램(program)

작업(task) 수행을 위한 코드 모음.

프로세스(process)

프로그램 실행의 결과물.

1-2. 코드 독해

JavaScript 엔진이 코드 읽는 법

기계어 : 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
프로그래밍 언어 : 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
JavaScript도 프로그래밍 언어 중 하나이며, JavaScript 엔진으로 실행할 수 있다.
JavaScript 엔진 : 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고, 해당 지점에서 코드 실행을 바로 중단한다. (크롬에 내장된 v8이 대표적)

주석

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

JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 된다.

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

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

값과 표현식

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

1-3. 코드 출력

console.log()

개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드
```
console.log('hello world'); // hello world
```
- console.log() 메서드로 괄호 안에 'hello world'를 입력하고 파일을 실행하면 출력 결과를 확인할 수 있다.

2. 타입

학습 목표
1. 데이터 타입이 무엇인지 이해한다.
2. JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.
3. Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.
4. Math 내장 매서드 중 Math.floor(), Math.sqrt() 등에 대해 설명할 수 있다.
5. + 연산자로 문자열과 문자열을 합칠 수 있다.
6. 문자열의 길이를 조회할 수 있다.
7. Boolean타입의 두 가지 값인 true와 false를 이해한다.
8. 비교연산자(===)와 논리연산자(!, &&, ||)를 이해한다.

타입

타입(type)은 값(value)의 종류이다.
자바스크립트의 모든 값은 타입을 가지고 있다. (정보 전달하기 위해서 다양한 표현을 사용)
타입이 있어 쉽게 분류할 수 있다. (자주 쓰는 표현은 분류가 필요)
각 타입은 고유한 속성과 메서드를 가진다.

2-1. Number 타입

JavaScript의 여러 데이터 타입 중 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.floor(100.621); // 100
```
Math.ceil(): 괄호 안의 숫자를 올림하여 반환한다.
```
Math.ceil(100.621);  // 101
```
Math.round(): 괄호 안의 숫자를 반올림하여 반환한다.
```
Math.round(100.621); // 101
Math.round(100.421); // 100
```
Math.abs(): 괄호 안의 숫자의 절대값을 반환한다.
```
Math.abs(-100); // 100
Math.abs(100); // 100
```
Math.sqrt(): 괄호 안의 숫자의 루트값을 반환한다.
```
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
```
Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환한다.
```
Math.pow(2, 5); // 32
```

2-2. String 타입

인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입이다.
따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸면 된다.

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

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

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

가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 한다.

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

문자열의 length 속성

문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있다.

문자열 값에 .length 를 붙인다.

console.log("JavaScript".length); // 10
console.log("123456".length); // 6

인덱스(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() : 문자열을 소문자로 변경한다.
```
'HELLO WORLD'.toLowerCase(); // 'hello world'
```
toUpperCase() : 문자열을 대문자로 변경한다.
```
'hello world'.toUpperCase(); // 'HELLO WORLD'
```
concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있다.
```
'hello '.concat('world'); // 'hello world'
```
slice() : 문자열의 일부를 자를 수 있다.
```
'hello world'.slice(0, 5); // 'hello'
```
indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인한다.
- 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회한다.
- 포함되어 있지 않으면 1 을 반환한다.
```
'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🍕'); // -1
```

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

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🍕'); // false

2-3. Boolean 타입

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

falsy

불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 한다.
```
// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN
```
반대로 true로 “여겨지는” 값은 truthy 값이라고 한다.

비교연산자(comparison operator)

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

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

// 대표적인 falsy 값
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)

|| : 논리합(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
```

3. 변수

학습 목표
1. 변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.
2. let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.
3. 변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.
4. template literal을 사용할 수 있다.

3-1. 변수의 선언과 할당

특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 한다.
만약 반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 그 이름을 사용하여 출력하면 컴퓨터가 기억하고 있는 숫자를 바꾸어주는 것만으로도 손쉽게 출력할 수 있다.
특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것을 변수 선언이라고 한다.
변수 선언 키워드 : let을 사용
```
let num; // 변수 선언
```
- 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보하고 그 공간의 이름을 num으로 기억한다.
  그 공간의 이름인 num을 변수라고 한다.
할당연산자(=)를 사용하여 메모리 공간에 특정한 값을 넣을 수 있다. 이것을 값 할당이라고 한다.
```
num = 5; // 값 할당
```
- 컴퓨터는 값을 저장하기 위해 num이라는 이름의 메모리 공간을 확보하고, 그 메모리 공간에 숫자 5를 저장했다.
변수 선언과 값 할당을 동시에 할 수 있다.
```
let name = 'kimdami';
```

아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당된다.
이는 초기화라는 JavaScript의 독특한 특징이다.

값의 재할당

let 키워드로 선언한 변수에 새로운 값을 할당할 수 있다. 이를 재할당이라고 한다.
재할당에도 할당연산자(=)를 사용한다.
```
let name = 'kimdami';
console.log(name) // 'kimdami'
name = 'apple';
console.log(name) // 'apple'
```

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

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

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

var키워드

var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드이다.
var키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let키워드와 const키워드가 등장했다.
따라서 var키워드는 사용을 되도록 지양하고, let키워드와 const키워드를 사용할 것을 권장한다.
재할당이 필요한 변수에는 let키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const키워드를 사용해야 한다.
```
var name = 'kimdami'; // var키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋다.
```

네이밍 규칙

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

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
```
let name, $head, _score // 사용 가능한 변수명
```
단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다.
숫자로 시작하는 것은 허용하지 않는다.
```
let 1st; // 사용할 수 없는 변수명
```
예약어는 식별자로 사용할 수 없다.
- 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
- ex) let, const, true, false, typeof 등
```
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) : 단어의 시작을 대문자로 작성

3-2. 변수 활용하기

변수를 활용한 연산

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

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 = 44;
let name = 'kimdami';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 44 kimdami'
```
- 단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수하다.
```
let course = 'SEB FE';
let cohort = 44;
let name = 'kimdami';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 44 kimdami'
```

KIM DA MI

다음 포스트