항해 1일차 (프로그래밍 기초1)

드디어 항해 1일차(돌파력 있는 개발자 되기 1일차 )

오늘은 js 기본 문법에 대해서 공부를 하였다. js의 역사부터 배열까지 많은 공부를 하였다.

간략하게 보자면

JS의 역사

• 1995년 자바스크립트 탄생
• 1999년 자바스크립트 표준화(ECMA-262) 완료
• 2005년 AJAX 등장
• 2008년 V8 엔진 출시(google)
• 2009년 Node.js 등장, 서버 개발 활성화
• 2015년 ECMAScript 6(ES6) 버전 출시 🚀
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

JS 언어의 특징

자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다.
이를 통해 복잡한 기능을 구현할 수 있다.
객체지향 프로그래밍 : 데이터와 함수를 객체라는 그룹으로 묶어서 처리합니다. 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고도 한다

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

기본 문법

😀 변수와 상수

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

// 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);

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있다. var은 예전부터 사용되던 방법이다. let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법이다.
var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워집니다. let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생합니다. const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용합니다.

😀 데이터 타입과 형 변환

숫자(Number)

정수형 숫자(Integer)
실수형 숫자(Float)
지수형 숫자(Exponential)
NaN(Not a Number)
Infinity

문자열(String)

문자열은 문자의 나열입니다. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현한다.

불리언(Boolean)

불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입입니다.
불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용된다.

undefined

undefined는 값이 할당되지 않은 변수를 의미한다

null

null은 값이 존재하지 않음을 의미합니다. undefined와는 다르다.

객체(Object)

자바스크립트에서는 객체가 매우 중요한 역할을 한다. 객체는 속성과 메소드를 가지는 컨테이너입니다. 중괄호({})를 사용하여 객체를 생성한다.

배열(Array)

배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열을 생성합니다.

형 변환(암시적 형 변환 vs 명시적 형 변환)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.
명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

연산자

더하기 연산자(+)
빼기 연산자(-)
곱하기 연산자(*)
나누기 연산자(/)
나머지 연산자(%)

할당 연산자

등호 연산자(=)
더하기 등호 연산자(+=)
빼기 등호 연산자(-=)
나누기 등호 연산자(/=)
나머지 등호 연산자(%=)

비교 연산자

일치 연산자(===)
불일치 연산자(!==)
작다(<) 연산자
크다(>) 연산자
작거나 같다(<=) 연산자
크거나 같다(>=) 연산자

논리 연산자(logical operators)

논리곱(&&) 연산자
논리합(||) 연산자
논리부정(!) 연산자

삼항 연산자(ternary operator)

삼항 연산자(?:)

타입 연산자(type operators)

typeof 연산자

함수

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있습니다

function add(x, y) {
  return x + y;
}
  console.log(add(2, 3));   
 ///////////////////////////
let add = function(x, y) {
  return x + y;
}
console.log(add(2, 3));  
///////////////////////////
let add = ((x, y) =>x + y)
console.log(add(2, 3));   

스코프 (지역 스코프 vs 전역 스코프)

즉 범위를 뜻한다.

전역 스코프

let x = 10;

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

printX();   // 10

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

지역 스코프

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

printX();   //

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

조건문

if문
if-else문
if-else if-else문

switch문

반복문

for문
for...in문
while문
do...while문
break문과 continue문

배열, 객체 기초

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.

객체 속성 접근

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;  // this 자기 자신
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");

객체 속성 접근

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

객체 메소드

Object.keys() 메소드 객체의 속성 이름을 배열로 반환
Object.values() 메소드 객체의 속성 값들을 배열로 반환
Object.entries() 메소드 객체의 속성 이름과 속성 값들을 2차원 배열로 반환
Object.assign() 메소드 새로운 객체를 만듬

객체 비교 & 병합

console.log(JSON.stringify(person1) === JSON.stringify(person2));
let mergedPerson = {...person1, ...person2};

배열

자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있습니다.

기본적인 배열 생성

let fruits = ["사과", "바나나", "오렌지"];

배열의 크기 지정

let numbers = new Array(5); 

배열 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

배열 메소드

push() = 배열 끝 요소 추가
pop() = 배열 끝 요소 제거
shift() = 배열 앞 요소 제거
unshift() = 배열 앞 요소 추가
splice() = 배열 요소 삭제, 새로운 요소
slice() = 배열의 일부분을 새로운 배열로 만듬
forEach() = 배열의 각 요소에 대해 콜백 함수 실행
map() = 배열 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환
filter() = 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환
reduce() = 연산을 할때 많이 사용
find() = ind() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환
some() = 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인
every() = every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인
sort() = 배열의 요소를 정렬
reverse() = 배열의 요소를 역순으로 정렬

공부를 하면서

내가 모자란 부분에 대해서 게속 공부하였고, 비슷한 some 메소드와 every 메소드에 대해서 더욱 더 알 수 있었다. 또한 reduce 함수에 대해서 구글링하여 찾아보았다.