JavaScript

[JavaScript] 01. INTRODUCTION 소개

I. INTRODUCTION TO JAVASCRIPT

# 자바스크립트 # 자료형 # 연산자 # 변수 # 템플릿 리터럴

1. What is JavaScript?

JavaScript는 웹 개발의 핵심으로 웹 사이트에 움직임을 주는 동적 처리를 가능하게 합니다. JavaScript는 발전을 거듭하며 현대 웹 브라우저의 주 언어로 자리 잡았습니다. JavaScript를 통해 다양한 라이브러리를 사용하고 서버 개발 등 여러 개발에 활용할 수 있습니다.

최근 개발의 트렌드인 JavaScript. 함께 배워보겠습니다.

2. Console / 콘솔

Console(콘솔)은 개발자에게 오류 등의 중요한 메시지를 표시하는 패널입니다. 이 콘솔을 통해 화면에 원하는 항목을 표시할 수 있습니다. console.log( )를 통하여 ( )안의 내용을 출력할 수 있습니다.

console.log(5); // Output: 5

일반적으로 JavaScript 코드에서 문장이 끝나면 ;(세미콜론)을 작성합니다.

3. Comments / 주석

Comments(주석)은 프로그램 실행 시 수행되지 않는 메모입니다. 코드에 주석을 남겨 작성한 코드에 대한 설명을 합니다. 다음에 사용될 수 있는 코드들을 감추는 용도로 사용되기도 합니다.

한 줄 주석 : // 를 사용하여, 코드 줄 뒤에 한 줄 설명을 추가합니다.
블록 주석: /*으로 주석을 시작하여 */으로 주석을 끝냅니다. 여러 줄의 주석을 작성할 수 있습니다.

console.log('DevJiye'); // Output: DevJiye

/*
console.log('The first time Yossarian saw the chaplain'); 
console.log(' he fell madly in love with him.'); 
*/

4. Data Types / 자료형

Data Type(자료형)은 JavaScript 프로그래밍에서 사용하는 다양한 유형의 데이터에 부여하는 분류 값입니다.

Number : 숫자형, 정수와 소수점을 포함한 숫자를 의미합니다.
String : 문자열형, '...' 이나 "..." 같이 따옴표로 묶인 문자 그룹(숫자, 문자, 공백, 기호 등)을 말합니다. JavaScript에서는 일반적으로 '...'(작은 따옴표)을 사용합니다.
Boolean : 논리형, 참을 나타내는 true와 거짓을 나타내는 false가 있습니다.
Null : 아무것도 없는 값, 즉 값이 알 수 없는 상태를 표현할 때 사용합니다.
Undefined : 정의되지 않은 값, 즉 값이 할당되지 않은 상태를 표현합니다.
Object : 관련된 데이터들의 모음이나 복잡한 개체를 표현합니다.
Symbol : 객체의 고유한 식별자를 만들 때 사용합니다. ES6에서 새로 추가되었습니다.

console.log(2022); // Datatype: Number
console.log(20.49); // Datatype: Number
console.log('JavaScript'); // Datatype: String 
console.log('I love to code! #Corner'); // Datatype: String

5. Arithmetic Operators / 산술 연산자

Arithmetic Operators(산술 연산자)는 JavaScript 코드에서 작업을 수행하는 연산자입니다.

Add (덧셈 연산자) : +
Subtract (뺄셈 연산자) : -
Multiply (곱셈 연산자) : *
Divide (나눗셈 연산자) : /
Remainder (나머지 연산자) : %

console.log(22 + 3.5); // Output: 25.5
console.log(2022 - 1945); // Output: 77
console.log(240 / 80); // Output: 3
console.log(0.2708 * 100); // Output: 27.08
console.log(11 % 3); // Output: 2

6. String Concatenation / 문자열 연결

문자열 사이에 + 연산자를 넣어 오른쪽 문자열을 왼쪽 문자열에 추가합니다.

console.log('Hello'+' '+'World'); // Output: Hello World

7. Properties / 속성

JavaScript에 데이터를 입력하면 해당하는 자료형의 인스턴스를 저장합니다. 모든 자료형은 각 인스턴스로 전달되는 특정한 속성에 접근할 수 있습니다. 예를 들어, 문자열 인스턴스의 경우 .length를 붙여 문자 수를 확인할 수 있습니다.

console.log('Corner'.length); // Output: 6

8. Methods / 메서드

Method(메서드)는 우리가 수행할 수 있는 함수입니다. console.log( )처럼 '---'.메서드 이름()을 통해 각 자료형의 인스턴스를 처리하는 특정 메서드에 접근할 수 있습니다.

console.log('hello'.toUpperCase()); // Output:  HELLO
console.log('Hey'.startsWith('H')); // Output:  true
console.log('    Remove whitespace   '.trim()); // Output: Remove whitespace

.toUpperCase()은 모두 대문자로 된 문자열을 반환하는 메서드입니다.
.startsWith('A')은 문자열의 시작이 'A'인지를 판별해 논리 값을 반환하는 메서드입니다.
.trim()은 공백을 지운 문자열을 반환하는 메서드입니다.

9. Built-in Objects / 내장 객체

JavaScript에는 console 외에도 기본적으로 제공되는 내장 객체들이 많습니다. 이 내장 객체의 장점은 다양한 메서드가 있다는 점입니다. 예를 들어, 내장 객체인 Math에서 0과 1 사이의 난수를 생성하는 .random() 메서드를 사용할 수 있습니다. Number 객체에서는 정수인지를 판단하는 .isInteger() 메서드를 사용할 수도 있습니다.

Math.floor(Math.random());
console.log(Number.isInteger(0.1)); // Output: true

II. VARIABLES

1. VARIABLES / 변수

Variable(변수)는 변화하는 값을 저장할 때 사용되는 이름이 붙은 박스와 같습니다. 변수에 설명이 포함된 이름을 붙여 메모리 영역에 저장된 값을 접근할 수 있습니다. var, let, const를 통해 변수를 만들 수 있습니다.

다음은 변수의 이름에 대한 규칙입니다.

변수의 이름은 숫자로 시작할 수 없습니다.
변수 이름은 대소문자를 구분합니다.
변수 이름은 JavaScript 내의 키워드와 같을 수 없습니다.

2. Create a Variable: var / 변수 선언: var

JavaScript ES6 버전 이전에 var 키워드를 통해서만 변수를 선언할 수 있었습니다.

다음은 var 키워드의 문제점들입니다.

문제점 1) 변수의 중복 선언을 허용합니다.

var 변수는 중복하여 선언할 수 있습니다. 선언된 변수여도 에러가 발생하지 않아 잘못된 값이 입력될 수도 있습니다

var test = 'This is';
console.log(test); // Output: This is
var test = 'Corner';
console.log(test); // Output: Corner

문제점 2) 중괄호{ } 외부에서 접근할 수 있습니다.

var 변수는 조건문이나 반복문 등 블록 내에서 선언된 값임에도 불구하고, 블록 밖에서 접근이 가능한 전역 변수로 작동됩니다.

if (true) {  
var inBlock = true; 
}
console.log(inBlock); // Output: ture

3. Create a Variable: let / 변수 선언: let

var 키워드의 문제점을 보완하기 위해 JavaScript ES6에서는 let, const 키워드를 이용하여 변수를 선언할 수 있습니다.
let 키워드를 통해 변수를 선언할 수 있습니다. let 변수는 변수에 다른 값을 다시 할당할 수 있습니다. let 변수에 값을 할당하지 않고 선언만 하면 undifned 값을 가집니다.

let meal = 'Enchiladas';
console.log(meal); // Output: Enchiladas
meal = 'Burrito';
console.log(meal); // Output: Burrito

4. Create a Variable: const / 변수 선언: const

const 키워드를 통해 변수를 선언할 수 있습니다. let과 달리 값을 재할당 할 수 없습니다. const 변수는 선언과 동시에 값을 할당해야 합니다.

const entree = 'Steak';
console.log(entree) // Output: Steak
entree = 'Tacos' // 작성 시 SyntaxError가 발생합니다.

5. Mathematical Assignment Operators / 수학 할당 연산자

할당 연산자 =은 변수에 값을 할당할 때 사용됩니다. 할당 연산자 왼쪽에 값을 저장하는 변수를 놓고 할당연산자 오른쪽에는 저장할 값이나 식을 작성합니다.

let w = 4;
w = w + 1; 
console.log(w); // Output: 5

앞서 작성된 코드는 + 연산자와 = 연산자를 결합한 +=을 활용하여 코드로 줄일 수 있습니다. 이러한 복합 할당 연산자는 +=, -=, *=, /= 등으로도 쓰일 수 있습니다.

let w = 4;
w += 1; 
console.log(w); // Output: 5

6. The Increment and Decrement Operator / 증가 및 감소 연산자

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

let a = 10;
a++; 
console.log(a); // Output: 11
a--;
console.log(a); // Output: 10

7. String Concatenation with Variables / 변수를 사용한 문자열 연결

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

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

8. String Interpolation / 문자열 보간

JavaScript ES6에서는 템플릿 리터럴(문자열 표기 방식)을 사용하여 변수를 문자열에 삽입할 수 있습니다.

백틱 ` ` 으로 템플릿 리터럴을 감쌉니다. 백틱 ` 은 키보드 1 옆에 있습니다.
템플릿 리터럴 안에 ${변수 이름}을 사용해 변수의 저장된 값을 삽입합니다.

let myCity = 'Seoul';
console.log(`My favorite city is ${myCity}.`); // Output: My favorite city is Seoul.

9. typeof operator / typeof 연산자

typeof 연산자는 프로그램에서 변수의 데이터 유형을 확인하기 위한 연산자입니다. typeof 값 형식으로 작성하여 값의 자료형을 반환받을 수 있습니다.

const unknown1 = 'foo';
console.log(typeof unknown1); // Output: string 
const unknown2 = 10;
console.log(typeof unknown2); // Output: number

Quiz

JavaScript는 (________)을 통해 화면에 원하는 항목을 표시할 수 있습니다. (________) 객체 내의 ".log()" 메서드를 통해 내용을 출력합니다.
정의되지 않은 값 즉, 값이 할당되지 않은 상태를 표현하는 자료형은 (________)입니다.
var 키워드를 사용한 변수 선언 시 문제가 발생할 수 있어 JavaScript ES6에서는 (________) 키워드로 변수를 선언합니다. (________) 키워드는 변수의 재할당이 가능합니다.

'JavaScript' 카테고리의 다른 글

[JavaScript] 03. FUNCTIONS 함수 (1)	2022.09.19
[JavaScript] 02. CONDITIONALS 조건 (2)	2022.09.19

Contents

새소식

인기 검색어