Javascript 기본 1 (기본 문법)

JS(자바스크립트)란? 📖

언어는 사람과 사람 간 소통을 위해서 필요합니다. 그리고 사람과 컴퓨터와 소통이 필요한 순간이 생기는데 사람과 컴퓨터가 대화할 수 있는 방법이 바로 프로그래밍 언어입니다! 그중 가장 대표적인 `Javascript`에 대해서 설명해보려고 합니다!

1. JS의 역사

• 1995년 🌐 넷스케이프 커뮤니케이션이라는 곳에서 자바스크립트가 탄생했습니다!
• 왜 생겼을까? -> 🖥️ 브라우저에 동작하기 하게 위해서 생겼습니다!(브라우저 동작 스크립트 언어)
• 2005년 AJAX 등장! (비동기 웹 애플리케이션 개발 가능, 폭발적인 UX 향상 🚀)\
• 2008년 V8 엔진 (google) 출시하면서 브라우저 속도가 빨라집니다! (super fast, 컴파일러🛠️, 메모리 관리 시스템👍)
• 2009년 Node.js 등장 - Javascript는 브라우저에서 동작하기 위해 생겼는데 이걸 깨고 어디에서든 사용될 수 있게 나온 게 Node.js!
• 2015년 ECMAScript 6(ES6) 버전 출시 🚀
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

 

JS 언어의 특징 📖

1. 객체 지향 프로그래밍 지원

객체지향 vs 절차지향

` 💼 객체지향` : 위에서부터 아래로 순서대로 실행하는 것이 아니라, 역할을 가지고 있는 객체라는 그룹으로 묶어서 처리하는 것입니다! 

 

` 🔜 절차지향` : 위에서부터 아래로 컴퓨터가 순서대로 해석하면서 프로그램을 실행하는 것입니다!

 

* 객체를 만들 땐 중괄호`{}`, 각 속성을 쉼표`,`로 구분합니다

* 속성은 `이름과 값`을 가지며, 이름은 `문자열`로 작성, 값은 다양한 `데이터 타입`을 사용할 수 있습니다.

 

2. 동적 타이핑

자바스크립트는 동적 타이핑을 지원하는 언어입니다! 변수를 선언할 때 타입을 지정하지 않고 `런타임` 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미합니다!

 

`런타임` : 프로그램이 실행되는 동안의 시점! 즉, 코드가 실행되는 동안에 발생하는 시점을 말합니다.

 

`선언`과 `할당`이라는 단어에 주목해 주세요!

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

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

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

 

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

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

일급 객체 : 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환 값으로 사용할 수 있는 객체를 의미합니다.

 

// 함수를 변수에 할당
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. 클라이언트, 서버 모두 사용 가능

Node.js를 이용해 서버 측에서도 사용됩니다!

 

기본 문법 📖 

1. 변수와 상수

`변수`란 : 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용합니다.

 

변수 주요 개념 5가지

var myVar = "Hello World";

`변수 이름` : 저장된 값의 고유 이름 ex) myVar

`변수 값` : 변수에 저장된 값 ex) "Hello World"

`변수 할당` : 변수에 값을 저장하는 행위 ex) myVar = "Hello World"

`변수 선언` : 변수를 사용하기 위해 컴퓨터에 알리는 행위 ex) var myVar

`변수 참조` : 변수에 할당된 값을 읽어오는 것 ex) console.log(myVar);

 

변수 선언 3가지 방법

`var`, `let`, `const`

// 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"

 

 

`var` : 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 마지막에 선언된 값으로 변수가 덮어씌워집니다!

`let`, `const` : 같은 이름의 변수를 두 번 선언하면 오류가 발생, `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);

 

 

2. 데이터 타입

데이터 타입

 

`숫자(Number)`

// 정수형 숫자(Integer)
let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

// 실수형 숫자(Float)
let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

// 지수형 숫자(Exponential)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

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

// Infinity
let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

 

 

`문자열(String)`

// 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현
let name = 'Alice';
let message = "Hello, world!";

// 1. 문자열 길이(length) 확인하기
let str = "Hello, world!";
console.log(str.length); // 13

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

// 3. 문자열 자르기(substr, slice)
let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"

// 4. 문자열 검색(search)
let str = "Hello, world!";
console.log(str.search("world")); // 7

// 5. 문자열 대체(replace)
let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

// 6. 문자열 분할(split)
let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

 

 

`불리언(Boolean)` : 참(true)과 거짓(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"

 

 

`undefined` : 값이 할당되지 않은 변수를 의미

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

 

 

`null` : 값이 존재하지 않음을 의미합니다, undefined와는 다릅니다.

let y = null;

 

 

`객체(Object)` : 속성과 메서드를 가지는 컨테이너입니다!

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

 

 

`배열(Array)` : 여러 개의 데이터를 순서대로 저장하는 데이터 타입

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

 

 

3. 연산자

산술 연산자 (arithmetic operators)

 

`더하기 연산자(+)` : 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환합니다.

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

 

 

 

할당 연산자(assignment operators)

 

`등호 연산자(=)` : 변수에 값을 할당할 수 있습니다.

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

 

 

비교 연산자(comparison operators)

 

`일치, 불일치 연산자`

// 일치 연산자
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

 

 

`(<, >, <=, >=)`

// 작다(<) 연산자
console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

// 크다(>) 연산자
console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

// 작거나 같다(<=) 연산자
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

 

 

논리 연산자(logical operators) 

 

`(&&, ||, !)`

// 논리곱(&&) 연산자
console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

// 논리합(||) 연산자
console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

// 논리부정(!) 연산자
console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

 

 

 

삼항 연산자(ternary operator)

 

`삼항 연산자(?:)`

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

 

 

 

타입 연산자(type operators)

 

`typeof 연산자`

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"

 

* typeof null의 경우 `object`를 반환하는 버그가 있습니다!

 

4. 함수 

 

함수 정의하기

 

`함수 선언문(function declaration)` : 함수를 미리 정의해 두고, 필요할 때 호출할 수 있습니다.

function add(x, y) {
  return x + y;
}

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

 

 

`함수 표현식(function expression)` : 함수를 변수에 할당하여 익명 함수를 생성할 수 있습니다.

let add = function(x, y) {
  return x + y;
}

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

 

 

 

함수 호출하기

 

`함수 호출하기` : add()

function add(x, y) {
  return x + y;
}

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

 

 

 

함수 매개변수와 반환값

 

`함수 매개변수` : add(2, 3)

function add(x, y) {
  return x + y;
}

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

 

 

`함수 반환값`

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

 

 

함수 스코프

 

`전역 스코프(global scope)` 

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

 

전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

 

 

`지역 스코프(local scope)`

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

 

지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

 

 

`블록 스코프(block scope)`

if (true) {
  let x = 10;
  console.log(x);
}

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

 

if문 내에서 변수 x를 선언하고, 이를 출력합니다. if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

 

 

화살표 함수

 

`기본적인 화살표 함수`

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

 

함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

 

 

`매개변수가 하나인 화살표 함수`

let square = x => x * x;

console.log(square(3));   // 9

 

매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다.

 

 

 

1주 차 기본 문법을 정리해 봤습니다!

감사합니다!

 

 

---

출처 🏷️

https://www.iplocation.net/javascript