TIL-1 JavaScript의 기초

TIL-1 JavaScript의 기초

Prologue. JavaScript 강의를 준비한다는 마음으로..

ChatGPT를 필두로 생성 AI 서비스가 여기저기 출시됨에 따라

그리고 생성 AI 코리아 라는 유튜브와 커뮤니티를 운영하면서

2023년과 2024년 개발자 교육을 받기 전 5월까지 나는

생성 AI, 특히 ChatGPT 교육을 외부 강의로 진행했다.

 

이번 스파르타 동북권 개발자 교육 본과정에 들어가면서

'회고'의 중요성을 깨달았기에 javaScript부터 하루에 1개 주차 과정을 배우고

그에 대한 내용을 강의를 준비하는 마음으로 포스팅하려고 한다.

 

1. JavaScript의 역사

1995년 넷스케이프 커뮤니케이션에서 시작된 LiveScript가 JavaScript로 바뀌게 되었다.

 

JAVA와의 관련성은 인도와 인도네시아의 관계

즉, <아무 관계도 없다.>

그 외 내용은 아래와 같다.

• 1999년 자바스크립트 표준화(ECMA-262) 완료
• 2005년 AJAX 등장
  • 비동기 웹 애플리케이션 개발 가능
  • 폭발적인 UX 향상 🚀
• 2008년 V8 엔진 출시(google)
  • super fast(코드 실행 속도 상당부분 개선)
  • 🛠️ 컴파일러, 메모리관리 시스템 👍
• 2009년 Node.js 등장, 서버 개발 활성화
  • 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
  • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
• 2015년 ECMAScript 6(ES6) 버전 출시 🚀
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며,
  Node.js를 이용한 서버 개발도 활발하게 이루어지고 있다.

 

2. JavaScript의 특징

1) 객체 지향 프로그래밍을 지원한다.

쉽게 말해 JavaScript는 순차적으로 수행되는

절차지향 프로그래밍과 달리 객체라는 그룹으로 묶어서 처리가 가능하다.

* JavaScript에서는 다양한 괄호를 사용하는데 (), {}, []

이중 객체를 만들때는 {}괄호를 통해 표현된다.

 

2) 동적 타이핑을 지원한다.

JavaScript는 동적타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않는다.

다시 말하자면 런타임(RunTime)에 변수에 할당되는 값에 따라 데이터 타입이 결정된다.

 

런타임(Runtime)?
런타임 시점이란, 프로그램이 실행되는 동안의 시점을 의미한다.
즉, 코드가 실행되는 동안에 발생하는 시점이며, 반대의 의미로는 컴파일 시점이 있다고 한다.

 

3) 함수형 프로그래밍 지원

JavaScript는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급객체로 취급하고 고차함수를 지원한다.

<이를 통해 코드의 재 사용성과 가독성을 높일 수 있다.>

// 함수를 변수에 할당
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


// 고차 함수로 작성될때는?

// 고차 함수 예시: 함수를 인자로 받는 함수
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

 

 

4) 비동기 처리가 가능하다

비동기 처리는 순차적으로 작업을 기다리는 것이 아닌 병렬로 처리할 수 있는 방식이다.

 

5) 클라이언트 및 서버측 모두에서 사용가능하다.

JavaScript는 클라이언트 측에서만 사용되지 않고 Node.js를 이용하여 서버에서도 사용된다.

즉, 이해도가 높을 수록 FullStack이 가능하다.

(나는 언제쯤 도달할까..? 😃..??)

 

3. JavaScript의 기본 문법

문법에 들어가기전
<변수의 5가지 주요개념>

변수 이름 : 저장된 값의 고유 이름
변수 값 : 변수에 저장된 값
변수 할당 : 변수에 값을 저장하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
변수 참조 : 변수에 할당된 값을 읽어 오는것

3-1. 변수

JavaScript에서는 var, let, const 세가지 방법으로 변수선언이 가능하다.

var는 예정부터 사용되던 방식이고

let과 const는 ES6(ECMAScript 6)에서 새로 도입된 방법이다.

 

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

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

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

 

VS CODE와 같은 프로그램으로 실행해보면 알겠지만

<var>와 <let>은 변수 덮어쓰기가 가능하며 덮어쓴 변수로 대체 된다.

 

그러나 <const>는 덮어쓰기가 불가능하며 오류가 발생한다.

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

 

3- 2. 데이터 타입과 형 변환

1) 데이터 타입

데이터 타입이라고 해서 DataBase를 배우는게 아니니 걱정하지 않아도 된다.

데이터 타입은 JavaScript가 변수를 어떻게 저장하고 처리하는지를 결정한다.

기본적으로 7가지정도가 있는데 세부 내용은 아래와 같다.

숫자, 문자열, 불리언, null, undefined, 객체, 배열

지금부터 알아보자

 

1-1 숫자 (Number)

숫자는 정수 및 부동 소수점을 포함한 숫자인데, 

예를들어 42, 3.14와 같이 모든 숫자를 number 타입으로 처리한다.

let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

let num = 42;
let floatNum = 3.14;

let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"

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"

NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값입니다.
보통 수학적으로 정의되지 않는 계산을 수행하거나,
숫자가 아닌 값을 숫자로 변환하려고 할 때 발생한다.

 

1-2 문자열 (String)

문자열은 텍스트 데이터를 나타내며

작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 둘러쌀 수 있다.

let str = "Hello, world!";
console.log(str.length); // 13

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"

let str = "Hello, world!";
console.log(str.search("world")); // 7

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

 

1-3 불리언 (Boolean)

불리언은 생소하겠지만 쉽게 해석하자면 참과 거짓을 나타내는 개념이다.

값은 true 또는 false만 가질 수 있다.

let isTrue = true;
let isFalse = false;

let bool1 = 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

 

1-4 undefined와 null 

undefined와 null 모두 값이 존재하지 않음을 뜻하는데,

둘의 차이는 undefined는 작성된 코드 결과 값에 의해 값이 할당 되지 않은 변수를 의미하고

null은 값이 존재하지 않음을 사용자가 직접 처리한것이다.

let x;
console.log(x); // undefined

let y = null;

 

1-5 객체(Object)

Javascript에서 중요한 역할을 한다.

객체는 속성과 메소드를 가지는 컨테이너의 역할이고, 중괄호 {}로 정의된다.

let obj = {
  key: "value",
  anotherKey: 123
};


let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

 

1-6 배열(Array)

배열은 여러개의 데이터를 순서대로 저장하는 데이터 타입이며

대괄호 []로 정의되며 인덱스는 0부터 시작한다.

let arr = [1, 2, 3, "four", true];

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

여기서 인덱스란?  0         1         2
위 숫자와 같이 배열의 위치를 결정하는 순서로 생각하면
쉽게 이해가 가능하고 0 부터 시작하기때문에
첫번째 인덱스는 0번이다.

 

2) 형 변환

형 변환은 하나의 데이터 타입을 다른 데이터 타입으로 변환하는 과정을 말하며,

JavaScript에서는 <암시적 형 변환> 과 <명시적 형 변환>으로 나뉜다.

 

2-1 암시적 형 변환

암시적 형 변환에서는 다양한 쓰임새를 확인 할 수 있는데,

JavaScript에서 자동으로 수행되는 형 변환 형태이며

일반적으로 연산자를 사용할 때 발생한다.

 

// 문자열 일때

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

// 숫자 일때

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9

//불리언 일때

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

 

 

2-2 명시적 형 변환

명시적 형 변환은 개발자가 직접 자료형을 변환 하는것을 말한다.

 

// 문자열 일때
console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

// 숫자 일때
console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

 

 

3- 3. 연산자

컴퓨터의 시발점은 계산을 잘하기 위해서 이기도 하며

JavaScript에서도 이와 같은 기능을 잘 수행해낸다.

 

그러므로 JavaScript에서도 연산자의 기능을 수행해 내는데

이 때 연산자가 필요하다.

1) 산술 연산자

// 더하기(+)

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

// 빼기(-)

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN

//곱하기(*)

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

// 나누기(/)

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

// 나머지(%)

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

 

 

2) 할당 연산자

할당 연산자는 우리가 익히 알고있는 연산자 이며

등호, 부등호와 같은 연산자 이다.

// 등호(=)

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

// 더하기 등호(+=)

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15

// 빼기 등호(-=)

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

// 곱하기 등호(*=)

let x = 10;
console.log(x); // 10

x *= 5;
console.log(x); // 50

// 나누기 등호(/=)
let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

// 나머지 등호(%=)
let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

 

 

3) 비교 연산자

비교 연산자는 할당과 비슷하게 (=) 등호와 (>, <) 부등호를 사용하지만

우리가 잘 몰랐던 내용도 있다.

 

// 일치(===)
console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false


// 불일치(!==)
console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true


// 부등호 크다와 작다 (>, <)
// 2는 3보다 크다? false값 반환
console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false


// 2는 3보다 작다? true값 반환
console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true


// 부등호 작거나 같다 (<=)
console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true


// 부등호 크거나 같다 (>=)
console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

 

 

4) 논리 연산자

논리 연산자는 두개의 값을 불리언 형식으로 추론해야 할때 쓰인다.

// 논리곱(%%) 연산자 or 논리 and 연산자로 불림
// 두 값이 모두 ture 인 경우에만 true 반환
console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

// 논리 합(||) 연산자 
||은 엔터 와 백스페이스 사이에 있는 \(역슬래시)를 쉬프트를 누르면 나온다.
// 두 값중 하나라도 true 일경우 true를 반환한다.
console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

// 논리부정(!) 연산자 or 논리 NOT 연산자로 불림
// 표현식의 부정값을 반환한다. true면 false를, false면 true를 반환한다.
console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

 

5) 삼항 연산자

삼항 연산자는 말 그대로 항이 3개가 있는 연산자 이며 꽤나 세련되게 수식을 완성할 수 있다.

// 삼항 연산자(?:)
// 삼항 연산자의 뜻은 수식 아래에 주석으로 설명
let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"
// let result = (x > 5) ? "크다" : "작다";의 경우
//(x > 5) x가 5보다 크면(?) "크다" 아니면(:) "작다"
// 위와같이 불리언 타입으로 결정할 수 있다.

//위 개념을 이해할 수 있게 되면 if문을 배울때도 생각보다 이해가 쉬워진다.

 

6) 타입 연산자

타입 연산자는 메소드와 비슷한 형식으로 typeof를 붙여서 사용이 가능하다

타입 연산자 이전까지 다양한 예제 스니펫을 공유할때 

console.log(typeof "123"); // "string" <=== 이와 같은 형태를 보았을 것이다.

타입 연산자를 사용하면 출력되는 해당 데이터 형태의 정보를 쉽게 알수 있다.

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

 

 

3- 4. 함수

JavaScript에서는 함수를 정의하여 코드의 재 사용성을 높일 수 있다.

즉, 상황에 따라 함수 한 덩어리로  다양한 계산 이나 수식에 인용할 수 있다.

함수의 꽃.. 콜백 함수는 차후에 배운것을 정리하기로 하고

이번 포스팅에서는 가장 기본적인 형태를 보여주는것으로 한다. 😃..

 

// 함수 선언문
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5
//위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언했으며
//함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있다.



// 함수 표현식
let add = function(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5
// 위에서 소개된 함수 선언문과 함수표현식은 모두 5를 반환한다.



// 함수 호출하기
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5


// 함수 매개변수
// 아래 예제 에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들인다.
// 함수를 호출할 때는 매개변수에 console.log로 값을 전달한다.
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5



// 함수 반환값
// 아래 예제 에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환한다.
// 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있다.
function add(x, y) {
  return x + y;
}
let result = add(2, 3);
console.log(result);   // 5

 

 

 

3- 5. 함수 스코프

 

JavaScript에서 스코프는 변수, 함수, 객체가 접근 할 수 있는 유효 범위를 의미한다.

스코프는 코드의 구조와 실행 컨텍스트에 따라 달라지며 크게 전역, 지역, 블록으로 나뉜다.

실행 컨텍스트란? ===> 실행 환경, 실행 맥락정도로 이해

실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행되는 환경을 의미하며,
JavaScript 엔진은 코드를 실행하기 위해 실행 컨텍스트를 생성하고,
이 컨텍스느 내에서 변수, 함수선언, 그리고 실행될 코드를 관리한다.

 

 

// 전역 스코프 ===> 어디든 참조 가능
// 변수 x를 선언하고 함수 함수 printX에서 변수 x를 참조
let x = 10;
function printX() {
  console.log(x);
}
printX();   // 10


// 지역 스코프 ===> 선언된 해당 함수 내에서만 참조 가능
// 변수 x를 선언하고 함수 함수 printX에서 변수 x를 참조
function printX() {
  let x = 10;
  console.log(x);
}
printX();   //


// 블록 스코프 ===> if문 내에서 선언된 변수는 해당 블록 내에서만 참조가능
//  if문 내에서 변수 x를 선언하고, 이를 출력
if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

 

 

3- 6. 화살표 함수(Arrow Function)

화살표 함수는 ES6(ECMAScript 6)에서 도입된 함수 표현식의 새로운 문법이다.

화살표 함수는 간결한 구문을 제공하지만 this 바인딩이 기존의 함수와 다르다.

( this 바인딩의 경우 차후 공부를 하며 정리하여 소개 하겠다...😀)

 

장점

 

• 화살표 함수는 function 키워드를 사용하지 않고, 더 간결하게 작성할 수 있다.
• 함수 본문이 하나의 표현식이라면 중괄호 {}와 return 키워드를 생략할 수 있다.

 

// 기본적인 화살표 함수
//화살표 함수를 사용하여 add라는 함수를 선언
let add = (x, y) => {
  return x + y;
}
console.log(add(2, 3));   // 5


// 한 줄로 된 화살표 함수
let add = (x, y) => x + y;
console.log(add(2, 3));   // 5


// 매개변수가 하나인 화살표 함수
let square = x => x * x;
console.log(square(3));   // 9

 

포스팅을 하다보니 분량이 많아서 1주차의 TIL은 두개로 나뉘어야 할듯하다.

다음 TIL2 포스팅에서 if 문 부터 이어서 소개하겠다.