[2주차] 자바스크립트 문법 종합반 : JS란, 변수와 상수, 데이터 타입과 형 변환

자바스크립트 문법 종합반

- JS란

-변수와 상수

-데이터 타입

-형 변환

 

---

언어란?

보통 사람 간 소통을 위해 쓰이는 도구

 

그렇다면 프로그래밍 언어는 무엇인가?

0과 1만을 이해하지 못하는 컴퓨터에게 대화를 시도하는 그 방법

(대표적인 프로그래밍 언어 예시)

• JAVA
• C
• JavaScript
• Python .....

JS의 역사

• 1995년 자바스크립트 탄생

: 넷스케이프 커뮤니케이션이라는 회사의 LiveScript 로 시작됨. 하지만 그 당시 JAVA 언어의 인기가 상당하여 마케팅적 전략으로 → Javascript 로 이름을 변경하였다.

: JS는 브라우저를 동작시키는 스크립트 언어이다. 동적인 액션들을 제어.

• 2005년 AJAX(에이작스)라는 기술이 등장

: 버튼하나를 누르면 페이지 전체 로드되는게 국룰이었지만 AJAX 기술이 등장하면서 reload 되는 것을 제어할 수 있게 되었다.

: 결과적으로 비동기 웹 애플리케이션 개발 가능해졌고, 폭발적인 UX 향상

• 2008년 V8 엔진 출시(google)

: super fast(코드 실행 속도 상당부분 개선)

: 컴파일러, 메모리관리 시스템 

• 2009년 Node.js 등장, 서버 개발 활성화

: JS는 브라우저의 동작을 제어하는 역할이었는데, 브라우저를 꺠고 나와 어디서든 사용할 수 있게 하는  2009 Node.js의 등장

: 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)

: 결국 JS가 FrontEnd(ex. 자동차외관) + BackEnd(ex.자동차엔진, 로직) + DB(MongoDB) = FullStack 역할을 모두 할 수 있게 되었다.

• 2015년 ECMAScript 6(ES6) 버전 출시
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있다.

 

JS 언어의 특징

• 객체 지향 프로그래밍 지원

자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다. 이를 통해 복잡한 기능을 구현할 수 있다.

 

객체지향이 무엇인지 이해하기 위해서는 반대되는 개념과 함께 생각하면 이해하면 쉬운데,

절차지향 vs 객체지향

- 절차지향: 절차지향 프로그래밍은 순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것

ex. 첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리하는 순서대로 프로그래밍하는 것. 위에서 아래로.

- 객체지향: 객체지향 프로그래밍은 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법

ex. 데이터와 함수를 객체라는 그룹으로 묶어서 처리하고, 이렇게 프로그래밍하게 되면 필요한 객체 묶음을 어디서든지 기능할 수 있게끔 할 수 있다.

 

+ 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고 부르기도 한다. 

+ JS에서 객체를 만들기

자바스크립트에서 객체를 만들 때는 중괄호({})를 사용하여 객체를 만들고, 각 속성을 쉼표(,)로 구분하여 추가한다.

속성은 이름과 값을 가지며, 이름은 문자열로 작성하고, 값은 다양한 데이터 타입을 사용할 수 있다. 객체 내부의 함수를 메소드(method)라고 부르며, 속성의 값으로 함수를 추가할 수 있다.

 

• 동적타이핑 언어다

자바스크립트가 아닌 다른언어에서는, 변수를 지정할 때 타입을 함께 지정해줘야 하지만,

자바스크립트에서는 변수의 타입을 함께 지정해줄 필요가 없다.

ex.

var a = "abc"(JS)

string a = "abc" (JAVA)

변수 타입 문자열

 

let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
console.log(typeof myVariable); // "string" 출력

myVariable = 123; // 숫자 데이터 타입으로 할당
console.log(typeof myVariable); // "number" 출력

myVariable = true; // 불리언 데이터 타입으로 할당
console.log(typeof myVariable); // "boolean" 출력

 

 

그럼 JS의 변수의 타입이 언제 결정되는가?

런타임에 결정된다.

 

런타임이란?

프로그램이 실행되는 동안의 시점 = 코드가 다 짜진 후 돌아갈 때

 

• 함수형 프로그래밍 지원

JS는 함수를 사용해서 프로그래밍을 할 수 있다.

 

:자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원합니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

 

+일급객체란?

일급 객체(first-class object)란, 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미한다.

 

// 함수를 변수에 할당
const add = function(a, b) {
  return a + b;
}

// 함수를 인자로 받는 함수
function calculate(func, a, b) {
  return func(a, b);
}

// 함수를 반환하는 함수
function getAddFunction() {
  return add;
}

// 함수를 일급 객체로 다루어 코드의 재사용성을 높임
console.log(calculate(add, 2, 3)); // 5
console.log(getAddFunction()(2, 3)); // 5

 

+고차함수란?

고차 함수(higher-order function)란, 함수를 인자로 받거나, 함수를 반환하는 함수를 의미한다.

// 고차 함수 예시: 함수를 인자로 받는 함수
function operate(func, a, b) {
  return func(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(add, 2, 3)); // 5
console.log(operate(multiply, 2, 3)); // 6

 

• 비동기 처리

비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

 

• 클라이언트 측 및 서버 측 모두에서 사용 가능

자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용된다. 이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용할 수 있다.

---

Node.js 설치하기 (완료)

설치가 되었는지 확인하려면 아래와 같이 node 파일명을 터미널에 적어준다. 

+Terminal, clear

:터미널에 clear 를 적고 엔터치면, 터미널 기록이 모두 삭제된다.

 

---

 

변수

하나의 값을 저장할 수 있는 공간

 

변수가 필요한 이유

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 다시 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용한다.

 

변수의 5가지 주요 개념

// 변수의 5가지 주요 개념
var 변수이름 = "변수 값";

// 1. 변수수 이름 : 저장된 값의 고유 이름
// 2. 변수 값 : 변수에 저장된 값
// 3. 변수 할당 :변수에 값을 저장하는 행위.  변수이름 = "변수 값";
/* 4. 변수 선언 :변수를 사용하기 위해 컴퓨터에 알리는 행위
: var 라는 키워드를 이용해 var = 변수이름 이라는 걸 만들어줘 하고 컴퓨터에 알리는 행위.*/ 
// 5. 변수 참조 : 변수에 할당된 값을 읽어오는것

        console.log(변수이름);
//또는
        var a = 10;
        var b = 20;
        var c = a + b;
//라고 했을 때 a와 b를 참조했다고 표현함

 

변수를 선언할 수 있는 3가지 방법 : var, let, const

//변수를 선언할 수 있는 3가지 방법 : var, let, const

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// var로 나눠서 변수 선언 var myVar1 = 3; 하지만 보통은 한줄로 합쳐서 씀
var myVar1;
myVar1 = 3;

// let으로 변수 선언
let myLet = "Hello World1";
console.log(myLet); // "Hello World1"

// const으로 변수 선언
const myConst = "Hellow Wrold2";
console.log(myConst); //"Hello World2"

 

 

var, let, const 어떻게 다른가?

1. var 은 같은 이름의 변수를 여러번 선언해도 오류가 없음, 대신 마지막에 선언한 값으로 덮어 씌워진다. let과 const는 오류발생으로 사용불가.

//var, let, const 어떻게 다른가?

// var로 변수 선언
var myVar = "Hello World";
var myVar = "Declare using the same variable of var again"; //var는 같은 이름의 변수를 여러번 선언해도 오류가 없다, 대신 마지막에 선언한 값으로 변수가 덮어씌워진다.
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World1";
let myLet = "Declare using the same variable of let again"; //같은 이름의 변수를 두 번 선언하면 오류가 발생
console.log(myLet); // "Hello World1"

// const으로 변수 선언
const myConst = "Hellow Wrold2";
const myConst = "Declare using the same variable of const again"; //같은 이름의 변수를 두 번 선언하면 오류가 발생
console.log(myConst); //"Hello World2"

 

2.  var, let은 같은 변수에 다른 값으로 재할당을 할 수 있으나, const 키워드로 선언하고 아마 할당한 값은 재할당이 안된다.

// var로 변수 선언
var myVar = "Hello World";
// 재할당작업 (아래)
myVar = "Allocate different value to the variable";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World1";
// 재할당작업 (아래)
myLet = "Allocate different value to the variable1";
console.log(myLet); // "Hello World1"

// const으로 변수 선언
const myConst = "Hellow Wrold2";
// 재할당작업 (아래)
myConst = "Allocate different value to the variable2";
console.log(myConst); //"Hello World2"

위와 같이 작업하면 

terminal 오류가 뜬다.

ihamin@ihamin-ui-MacBookAir week_1 % node 01.js
/Users/ihamin/Desktop/Github/Sparta/JS종합반/week_1/01.js:30
const myConst = "Declare using the same variable of const again"; //같은 이름의 변수를 두 번 선언하면 오류가 발생
      ^

SyntaxError: Identifier 'myConst' has already been declared
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

Node.js v20.8.0
ihamin@ihamin-ui-MacBookAir week_1 %

---

데이터 타입

 

1. 숫자 (Number)

// 데이터 타입
// runtime : run 하는 time = 터미널에 코드가 실행될 때 데이터 타입이 결정된다. 

// 1. 숫자(Number)
// 1-1. 정수형 숫자(Integer 인테져)

let num1 = 10;
console.log(num1); //코드 결과 //10
console.log(typeof num1); //해당되는 변수의 타입 알아보기 //number

// 1-2. 실수(float)
let num2 = 3.14;
console.log(num2); //3.14
console.log(typeof num2); //number

// 1-3 지수 (Exponential)
let num3 = 2.5e5; // 2.5 * 10^5 십의 5제곱
console.log(num3); // 250000
console.log(typeof num3); // number

// 1-4 NaN (= Not an Number) 숫자가 아니다
// 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생
let num4 = "Hello" / 2; //문자형을 2로 나눈다 -> none sense
console.log(num4); // NaN
console.log(typeof num4); // number

// 1-5 Infinity (무한대)
let num5 = 1 / 0;
console.log(num5);// Infinity
console.log(typeof num5); //number

let num6 = -1 / 0;
console.log(num6);// -Infinity
console.log(typeof num6); //number

 

2. 문자열 (String)

// 2. 문자열 (String)
// 문자열은 문자의 나열이다. 작음 따옴표(')나 큰 따옴표("")로 감싸서 표현한다

let str = "Hello World!";
console.log(str); // Hello World!
console.log(typeof str); // string

// 문자열은 다양한 속성 attribute 과 기능 function 을 가지고 있다.
// 2-1. 문자열 길이(length) 확인하기
console.log(str.length); // 12

// 2-2. 문자열 결합(concatenation)
let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2);
console.log(result); // Hello, World!

// 2-3 문자열 자르기(substr, slice)
let str3 = "Hello, World!";
console.log(str3.substr(7, 5)) // from 어디서부터 자를 지 숫자(1부터시작), length 몇개까지 자를지 숫자 // World
// 7번째부터 5개를 잘라서 출력해라
console.log(str3.slice(7, 12)); // start number, end number // World
// 7번째부터 12번 위치까지에 해당하는 부분을 잘라서 출력해라

// 2-4 문자열 검색(search)
let str4 = "Hello, World!";
console.log(str4.search("World")); // World가 시작하는 시작지점을 찾아라 // 7

// 2-5 문자열 대체(replace)
let str5 = "Hello, World!";
let result01 = str5.replace("World", "JavaScript");
console.log(result01); // Hello, JavaScript!

// 2-6 문자열 분할 (split)
let str6 = "apple, banana, kiwi"; // 현재 , 를 기준으로 합쳐져 있는 문자열
let result02 = str6.split(","); // splitter(=자르는 기준) // ,를 기준으로 자른다
console.log(result02); // 배열의 형태로 문자열 요소들이 분할되서 들어가 있다. // [ 'apple', ' banana', ' kiwi' ]

 

3. 불리언(Boolean)

// 불리언(Boolean)
// 불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입입니다.
let bool1 = true; // 'true'는 문자열이기 때문에 유의하기 
console.log(bool1); // true
console.log(typeof bool1); // boolean

let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // boolean

// 불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됩니다. 아래 예제참고

let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater than y");
} else {
  console.log("x is less than or equal to y");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

 

4. undefined

// undefined (값이 할당되지 않은 변수)
// un: not, define : 정의하다
let x;
console.log(x); // undefined

 

5. null

// null (값이 존재하지 않음을 '명시적'으로 일부러 나타내는 방법)
let y = null;
console.log(y); // null

 

6. 객체(Object)

// 객체(Object)
// key - value pair
let person = { 
  name: 'Alice',
  age: 20,
  isMarried: true }; // 중괄호로 감싸주기 // key는 name, value는 'Alice' 를 pair 로 짝짓기
            // key는 '', "" 가 안들어감, value는 어떠한 데이터타입이던 상관없이 들어감
console.log(typeof person); // object

console.log(person.name); // 'Alice'
console.log(person.age); // 20
console.log(person.isMarried); // true

 

 

7. 배열(Array)

// 배열(Array)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입이다.
let number = [1, 2, 3, 4, 5]; // 대괄호를 통해 감싸준다 // ','를 기준으로 요소를 순서대로 나열함 // 배열들은 요소 모두가 index를 가진다. 예를 들어 1의 위치에 대한 정보 즉, 인덱스는 0이다.
let fruits = ['apple', 'banana', 'orange'];

 

 

---

 

형 변환

자바스크립트에서는 다양한 자료형을 다룰 수 있다. 그리고 이 자료형들은 서로 형변환이 가능하다.

 

1. 명시적 형 변환 (explicit coercion)

   1-1 명시적 불리언 변환

// 1. 명시적 형 변환 (explicit coercion)
//  개발자가 일부러 직접 자료형을 변환하는 것
//  1-1 Boolean 변환
//  console.log(Boolean(변환을시킬값));
console.log(Boolean(0)); // false
console.log(Boolean(""));   // 빈 문자열 // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
// 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다.

console.log(Boolean("false"));   // true
console.log(Boolean({}));   // 빈 객체 // true
// 그 외의 값은 true로 변환됩니다.

 

   1-2 명시적 문자열 변환

// 1-2 문자열 변환
//  console.log(String(변환을시킬값));
let result6 = String(123);
console.log(typeof result6); // string

let result7 = String(true);
console.log(String(true));      // "true"
console.log(typeof result6); // string

let result8 = String(null);
console.log(String(null));      // "null"
console.log(typeof result8); // string

let result9 = String(undefined);
console.log(String(undefined)); // "undefined"
console.log(typeof result9); // string


console.log(String(123));       // "123"
console.log(String(false));     // "false"
console.log(String({}));        // "[object Object]"

 

 

   1-3 명시적 숫자 변환

// 1-2 숫자 변환
let result10 = Number("123");
console.log(result10); // 123
console.log(typeof result10); // number

console.log(Number(""));      // 빈문자열은 0
console.log(Number("  "));    // 빈공백은 0
console.log(Number(true));    // Boolean true 는 1
console.log(Number(false));   // Boolean false는 0

 

 

 

2. 암시적 형 변환 (implicit coercion)

    2-1 암시적 문자열 변환

// 2. 암시적 형 변환 (implicit coercion)
// 개발자가 의도하지 않았지만, 자동으로 형변환이 되는 것

//  2-1 문자열 변환
//  2-1-1 숫자 + 문자열 = 문자열
let result1 = 1 + "2"; 
console.log(result1); // 12
console.log(typeof result1); // string
// 더하기 연산자로 숫자와 문자열이 합해지면 문자열이 된다.

// 2-1-2 Boolean + 문자열 = 문자열
let result2 = true + "1";
console.log(result2); // true1
console.log(typeof result2); // string

// 2-1-3 {}객체 + 문자열 = 문자열
console.log("1" + {});   // "[object Object]1"

// 2-1-4 null + 문자열 = 문자열
console.log(null + "1");   // "null1"

// 2-1-5 undefined + 문자열 = 문자열
console.log(undefined + "1");   // "undefined1"

 

   2-2 암시적 숫자 변환

//  2-1 숫자 변환
//  2-2-1 숫자 - 문자열
let result3 = 1 - "2";
console.log(result3); // -1
console.log(typeof result3); // number
// + 더하기 연산자가 아닌 다른 연산자(-,*,/)가 나왔을 때는 숫자가 우선시되어 숫자로 변환됨

// 2-2-2 문자열 * 문자열
let result4 = "2" * "2";
console.log(result4); // 4
console.log(typeof result4); // number

// 2-2-3 빈 문자열 또는 공백 문자열 + 숫자
let result5 = 4 + + "5";
console.log(result5); // 9
console.log(typeof result5); // number
// 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됩니다.