[Javascript] Codecademy 1. Introduction

1. Introduction

1-1. Introduction to JavaScript

JavaScript는 웹 페이지에서 사용자로부터 특정 이벤트 혹은 입력값을 받아 동적 처리를 목적으로 개발된 객체 기반의 프로그래밍 언어입니다. JavaScript는 웹 개발의 핵심이기 때문에 이를 기반으로 웹 개발뿐만 아니라 더 많은 것을 개발할 수 있습니다. 지금부터 JavaScript 시작합니다!

---

1-1-1. Console (콘솔)

console.log(5);

Console은 개발자에게 오류 같은 중요한 메시지를 표시하는 패널입니다. console.log()를 쓰면 괄호 안에 넣은 내용이 콘솔에 출력됩니다.

 

1-1-2. Comments (주석)

console.log(5); // Prints 5
/*
This is all commented
console.log(10);
*/

주석은 특정 기능을 실행하지 않도록 처리하는 기능을 말합니다. 현재 사용되지 않지만 나중에 사용될 수 있는 여지가 있는 부분에 대해 주석 처리를 하거나, 코드를 사용하는 다른 개발자들에게 설명해주는 역할을 하기도 합니다. JavaScript에는 2가지 유형의 코드 주석이 있습니다.

1. 한 줄 주석: //를 사용하며, 한 줄(line)에만 적용이 되어 짧은 설명 표기에 유용합니다.
2. 블록 주석: /**/를 사용하며, /*로 시작해 */로 주석을 끝냅니다. 코드 블록 전체를 주석 처리할 때 유용합니다.

 

1-1-3. Data Types (데이터 유형)

데이터 유형은 프로그래밍에서 사용하는 다양한 종류의 데이터를 식별하는 분류입니다. JavaScript에는 7가지의 기본 데이터 유형이 있습니다.

1. 숫자: 정수, 실수 등 임의의 숫자를 의미합니다.
2. String: 문자나 숫자를 큰 따옴표("")나 작은 따옴표('')로 감싼 데이터로, 구별없이 사용 가능합니다.
3. Boolean: 참과 거짓을 나타내기 위해 true와 false 두 가지 값으로 이루어진 데이터 타입입니다.
4. Null: '아무것도 없다'는 것을 의도적으로 나타내고자 할 때 사용합니다.
5. Undefined: 선언만 하고 값을 지정하지 않은 경우의 값입니다.
6. Symbol: ES6에서 추가된 데이터 유형으로 항상 유일하고 변경 불가능한 값입니다.
7. Object: 여러 프로퍼티나 메서드를 같은 이름으로 묶은 집합체입니다.

 

1-1-4. Arithmetic Operators (산술 연산자)

console.log(3.5 + 17.5);
console.log(2021 - 1969);
console.log(240 / 65);
console.log(3.14 * 100);

연산자는 코드에서 작업을 수행하는 문자입니다.

• 더하기: +
• 빼기: -
• 곱하기: *
• 나누기: /
• 나머지: %

 

1-1-5. String Concatenation (문자열 연결)

console.log('Hello ' + 'World!');

+ 연산자를 사용하면 오른쪽 문자열을 왼쪽 문자열에 추가합니다.

 

1-1-6. Properties (속성)

console.log('Teaching the world how to code'.length);

모든 문자열 인스턴스에는 해당 문자열의 문자 개수를 저장하는 length 속성이 있습니다. 문자열에 .length를 추가해 문자열의 길이를 알 수 있습니다.

 

1-1-7. Methods (메서드)

console.log('Codecademy'.toUpperCase());

JavaScript는 여러 문자열 메서드를 제공합니다. '.메서드 이름()'을 사용하여 추가합니다. 예시에 나와있는 .toUpperCase()는 모두 대문자로 된 문자열을 반환합니다.

 

1-1-8. Built-in Object (기본 제공 객체)

console.log(Math.random() * 100);

JavaScript에는 기본으로 제공해주는 여러 객체들이 있습니다. 예를 들자면 Javascript에는 산술을 도와주는 Math 객체가 내장되어 있습니다. Math 객체의 메서드 중 .random()은 0~1 사이의 난수를 반환합니다.

---

 

1. introduction

1-2. Variables

변수는 계속 변하는 값이면서, 그 값을 저장하는 공간입니다. 쉽게 생각하면 컴퓨터 메모리에 있는 정보의 작은 용기로 생각할 수 있습니다.

---

1-2-1. Create a Variable: var (변수 생성: var)

var favoriteFood = 'pizza';
/* var favoriteFood = 'chicken'; (O)
favoriteFood = 'icecream'; (O)
재선언 가능, 재할당 가능 */

var는 새 변수를 만들거나 선언하는 JavaScript 키워드입니다. var는 변수에 값을 할당하지 않고 선언할 수 있고, 이 경우 변수는 정의되지 않은 값으로 자동 초기화됩니다. JavaScript ES6 버전 이전에는 변수를 선언하는 데 var 키워드만 사용할 수 있었습니다.

 

※ var: 한 번 선언한 변수의 이름을 사용하여 나중에 재선언할 수 있습니다. 예를 들어 var a = 10;으로 선언한 후 var a = 15;로 재선언이 가능합니다. 그러나 변수가 중복되면서 코드가 난해해질 수 있습니다.

 

1-2-2. Create a Variable: let (변수 생성: let)

let changeMe = true;
/* let changeMe = false; (X)
changeMe = false; (O)
재선언 불가능, 재할당 가능 */

let은 새 변수를 만들거나 선언하는 JavaScript 키워드입니다. let는 변수에 값을 할당하지 않고 선언할 수 있고, 이 경우 변수는 정의되지 않은 값으로 자동 초기화됩니다.

 

※ let: var와는 달리 재선언이 불가능합니다. let a = 10;으로 변수를 선언했다면 let a = 15;로 재선언이 불가능합니다. 그러나 재할당은 가능하므로 a = 5;를 사용해 변수 a의 값을 5로 재할당할 수 있습니다.

 

1-2-3. Create a Variable: const (변수 생성: const)

const number = 92;
/* const number; (X)
const number = 5; (X)
number = 6; (X)
값 없이 선언 불가능, 재선언 불가능, 재할당 불가능 */

const은 새 변수를 만들거나 선언하는 JavaScript 키워드입니다. const 변수는 값 없이 선언할 수 없습니다.

 

※ const: var와 달리 재선언이 불가능하며, let처럼 재할당도 불가능합니다.

 

1-2-4. Mathematical Assignment Operators (수학 할당 연산자)

let num = 5;
num += 1; // num = num + 1;과 동일

num += 1;은 num = num + 1;과 동일한 결괏값을 내며, 수학 할당 연산을 사용해 num을 재할당했습니다. +=와 더불어 -=, *=, /= 등의 다른 수학 할당 연산자도 사용할 수 있습니다.

 

1-2-5. The Increment and Decrement Operator (증가 및 감소 연산자)

let gainedDollar = 3;
let lostDollar = 50;

gainedDollar++;
lostDollar--;

수학적 할당 연산자에는 증가 연산자(++)와 감소 연산자(--)가 있습니다. 증가 연산자는 변수 값을 1만큼 증가시키고, 감소 연산자는 변수 값을 1만큼 감소시킵니다.

 

1-2-6. String Concatenation with Variables (변수를 사용한 문자열 연결)

let favoriteAnimal = 'cat';
console.log('My favorite animal: ' + favoriteAnimal);

+ 연산자는 문자열의 값이 변수에 저장되어 있어도 문자열을 결합하는 데 사용할 수 있습니다.

 

1-2-7. String Interpolation (문자열 사이 채움)

let myName = '알밤';
let myCity = 'NewYork';
console.log(`My name is ${myName}. My favorite city is ${myCity}`);

템플릿 리터럴을 사용해 변수를 문자열에 삽입하거나, 보간할 수 있습니다. 템플릿 리터럴을 백틱(`, 키보드 맨 위의 1 옆에 있는 키)으로 감싸고, ${변수명}을 사용해 변수에 저장된 값이 삽입됩니다.

※ 템플릿 리터럴: 변수를 이용해 문자열을 동적으로 생성할 수 있는 문법

 

1-2-8. typeof operator (typeof 연산자)

let newVariable = 'Playing around with typeof.';
console.log(typeof newVariable); // string 출력

변수의 데이터 유형을 확인하기 위해 사용되는 연산자로, 값을 확인하여 데이터 유형을 반환합니다.

 

 

 

 

Corner Reacth Starter #1

Editor 알밤