#1 [JavaScript] 자바스크립트 기본

📌변수와 상수

변수

• let 변수명 = 초기값;

⚠️변수명 규칙

1. 변수명에는 기호 사용 불가 (단, _,$만 사용 가능)
2. 숫자로 시작할 수 없음
3. js 예약어 사용 불가

let age = 25;
console.log(age); //25

age = 35;
console.log(age); //35

//let은 똑같은 변수명을 선언했을 때 오류가 뜸 --> var보다는 let을 사용

• 처음 선언할 때 초기화 시켜주지 않아도 괜찮음!
• 선언 이후 다른 값으로 덮을 수 있음

상수

• const 변수명 = 초기값;

⚠️상수 사용시 주의할 점!

const age = 25;
console.log(age);

age = 35;
console.log(age);

• 변수와 다르게 상수는 첫 선언 이후 값을 바꿀 수 없음
• read-only라는 에러가 뜨게 됨 말 그대도 읽기만 가능함!

const age;
age = 25;
console.log(age);

• 상수는 선언할 때 값을 초기화 시켜주지 않으면 에러가 뜸
• 상수는 값은 바꿀 수 없기 때문!

📌자료형과 형 변환

Primitive Type(원시 타입)

let number = 12;

• 한번에 하나의 값 만 가질 수 있음
• 하나의 고정된 저장 공간 이용

Non - Primitive Type (비 원시 타입)

let array = [1,2,3,4];

• 한번에 여러 개의 값을 가질 수 있음
• 여러 개의 고정되지 않은 동적 공간 사용

숫자형

let age = 25; //정수
let tall = 161.2; //실수

let inf = Infinity; //∞
let minusInf = -Infinity; //-∞

let nan = NaN; 

• 자바 스크립트는 정수,실수를 구분하지 않음
• NaN 연산이 잘못 사용되었을 때 실패를 나타냄
  • ex)문자열/숫자 → NaN이라는 결과가 출력됨

💡BigInt형

• 2^53-1보다 크거나 - (2^53-1)보다 작은 정수
• 길이에 관계없이 숫자형을 나타낼 수 있음

• 두가지 방법으로 사용
  • 끝에 n 붙여주기
  • 함수 BigInt()로 선언
• 다른 숫자형과 마찬가지로 연산 가능
• 일반 숫자와는 연산 불가!

문자열

let name1 = "김민서";
let name2 = '김민서';
let name3 = `김민서`;

• 세가지 방법으로 표현 가능

⚠️ 백틱 (템플릿 리터럴)

let name = "김민서";
let intro = `제 이름은 ${name} 입니다.`;

console.log(intro);

형 변환

• 묵시적 형변환

let numberA = 12;
let numberB = "2";

console.log(numberA + numberB);//122

console.log(numberA + parseInt(numberB));//14

• 숫자형을 문자형으로 나누어도 자동으로 형 변환해줌
  • 문자열 * 숫자 -> 숫자가 나옴 다른 자료형 간의 연산시 자동으로 형변환시켜줌
  • 문자열 + 숫자 -> 문자열로 나옴
• parseInt() 로 문자형을 정수형으로 바꿔줌

📌연산자

증감 연산자

let num = 10;

console.log(num++); //10
console.log(num); //11
console.log(++num); //12

• 후위/전위 연산자

비교 연산자

let compare = 1 !== "1";
console.log(compare);

• ==연산자로 비교할시 값만 비교하기 때문에 true가 나옴
• ===연산자로 자료형까지 비교할 수 있음
• != 과 !== 도 같음

null 병합 연산자

let num;
num = num ?? 20;//20

console.log(num);

• num 값이 null/undefined이면 20 대입 그렇지 않으면 유지
  • num에 10으로 초기화 시키면 100 출력

📌조건문

if else문

let a = 3;

if (a >= 7) {
  console.log("7 이상입니다.");
} else if (a >= 5) {
  console.log("5 이상입니다.");
} else {
  console.log("5 미만입니다.");
}

switch문

let fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("바나나");
    break;
  case "orange":
    console.log("오렌지");
  case "apple":
    console.log("사과");
    break;
  case "grape":
    console.log("포도");
    break;
  default:
    console.log("다른 과일");
}

• break가 없다면 밑에 case까지 실행됨

📌함수

함수 사용 전

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;

let width2 = 30;
let height2 = 15;
let area2 = width2 * height2;

console.log(area1);

함수 사용 후

//함수 선언
//매게 변수 전달
function getArea(width,height) {
  let area = width * height;
  console.log(area);
}
//함수 호출
getArea(100, 200);
console.log("함수 실행 완료!");

//함수 선언
function getArea(width, height) {
  let area = width * height;
  return area;
}
//함수 호출
let area = getArea(100, 200);
console.log("area :", area);
console.log("함수 실행 완료!");

• 반환 값이 있는 함수

📌스코프

• 범위, 변수 혹은 함수가 갖게 되는 유효 범위

Global Scope (전역 스코프)

• 어디서든지 해당 변수 접근 가능

Local Scope (지역 스코프)

let array = [1,2,3,4];

• 지역을 벗어난 곳에서는 접근 불가능

const num = 10;//전역

function print() {
  const num = 100;//지역
  console.log(`지역 스코프 ${num}`);
}

print();
console.log(`전역 스코프 ${num}`);

블록 스코프

• 같은 블록에서만 접근 가능

❓var를 사용하지 않는 이유❓

let age = 25;
let age = 35;

• let의 경우 똑같은 변수명 선언 시 오류가 뜸!

var age = 25;
console.log(age);

var age = 35;
console.log(age);

• var의 경우 아무 이상 없이 실행됨

만약 코드가 긴 경우 같은 변수가 선언 되었을 때 혼란을 줄 수 있음

따라서 var보다는 let을 사용!

function print() {
  for (let i = 0; i < 10; i++) {
    console.log(`블록 스코프 : ${i}`);
  }
  console.log(i);
}

print();

function print() {
  for (var i = 0; i < 10; i++) {
    console.log(`블록 스코프 : ${i}`);
  }
  console.log(i);
}

print();

• let 의 경우 블록 스코프이기에 변수 i가 for문 내부에서만 접근 가능
• var 의 경우 함수 스코프이기에 for문 밖에까지 접근이 가능함

📌호이스팅

: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

함수 호이스팅

ex) 함수를 가장 하단에 선언하더라도 가장 첫 줄에서도 사용가능!!

console.log(helloA());

let helloA = function () {
  return "안녕하세요 여러분";
}; //함수 표현식

function helloB() {
  return "안녕하세요 여러분";
} //함수 선언식

변수 호이스팅

console.log(num);//undefined
var num = 10;

var num;
console.log(num);//undefined
num = 10;

• 왼쪽 코드를 오른쪽 코드처럼 인식함
• 변수의 선언문만 해당 스코프의 최상단으로 올려 해석함

❓let/const는 선언 전 접근 시 error 발생하는 이유❓

Temporal Dead Zone(일시적인 사각지대)

:변수를 사용하는 것을 허용하지 않는 공간

let/const는 호이스팅이 발생하지 않는 것이 아님! var 와 다르게 변수 초기화 전까지 TDZ라는 공간에 있어 발생하지 않는 것처럼 보임

• var는 변수 생성 후 바로 메모리 할당
• let/const는 초기화 완료 후 메모리 할당

⚠️ 호이스팅이 많은 코드는 가독성이 떨어지게 되고 오류 발생시키기 쉬움. 따라서 변수는 let/const를 사용하도록 하자!

📌함수 표현식

함수 표현식

• 함수 표현식의 겨우 호이스팅이 불가함!

console.log(helloA());

let helloA = function () {
  return "안녕하세요 여러분";
}; //함수 표현식

function helloB() {
  return "안녕하세요 여러분";
} //함수 선언식

화살표 함수

• 화살표 함수도 호이스팅 불가능!

let helloA = () => "안녕하세요 여러분"; //화살표 함수

콜백 함수

• 다른 함수에 매개변수로 넘겨준 함수

function start(name, callback) {
  console.log(`안녕하세요 ${name} 입니다.`);
  callback(); //finish();
}

function finish() {
  console.log("감사합니다.");
}

start("minseo", finish);

• 매개변수로 전달된 finish() 함수가 callback이라는 함수로 호출되어 실행

📌객체

• 비 원시 타입

let person = {
  key: "value", //프로퍼티 (객체 프로퍼티)
  key1: "value2",
  key3: true,
  key4: [1, 2],
  key5: function () {}
}; //객체 리터럴 방식

console.log(person);

let person = {
  name: "김민서",
  age: 22
}; //객체 리터럴 방식

console.log(person.name);

• person.name name의 value 값을 가져옴
• key 값을 통해 value값을 가져오기 때문에 key값은 고유해야함

객체 수정

let person = {
  name: "김민서",
  age: 22
}; //객체 리터럴 방식

person.location = "한국"; //점 표기법으로 추가
person["gender"] = "여성";//괄호 표기법으로 추가
person.name = "김민서 A"; //값 수정가능
person["age"] = 20;
console.log(person);

• let -> const로 바꿔도 수정이 가능함
• 상수 자체를 수정하는 것이 아니라 person이라는 상수가 갖는 객체를 수정하는 것이기 때문에 가능한것

❓그렇다면 상수 자체를 수정하는 것은❓

let person = {
  name: "김민서",
  age: 22
}; //객체 리터럴 방식
console.log(person);

person = {
  number: "010-3952-3928"
};
console.log(person);

const person = {
  name: "김민서",
  age: 22,
  print: function () {
    console.log(`제 이름은 ${this.name} 입니다.`);
  }
}; //객체 리터럴 방식

person.print();

• this 키워드를 통해 자신이 속해 있는 객체 가르킬 수 있음

⚠️ 화살표형 함수로 바꾸게 되면 신이 속해 있는 객체 가르킬 수 없음!

객체 삭제

const person = {
  name: "김민서",
  age: 22
}; //객체 리터럴 방식

//delete person["name"];//메모리에서 값이 지워지지는 않음
//그래서
person.name = null; //메모리에서 값을 지울 수 있음

console.log(person);

📌배열

• 비 원시 자료!

생성 방식

• 생성자 호출 방식 / 배열 리터럴

//생성자 호출 방식
let arr = new Array(); 

//배열 리터럴
let arr = [];

let arr = [1, "2", true, undefined];
console.log(arr);

• 자료형이 달라도 상관 없음

접근 방식

• 객체와 다르게 key값이 따로 없음

  → 대신 데이터가 위치한 순서인 index를 통해 접근 가능 (index는 0부터 시작)

let arr = [1, 2, 3, 4];

//키 값이 따로 없기에 순서 즉 index를 이용해 배열에 접근
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

배열 요소 추가하기

1️⃣ push( )

let arr = [1, 2, 3, 4];

arr.push(5);
console.log(arr);

• 자료형에 관계없이 push를 통해 추가할 수 있음
• 가장 마지막 값으로 추가됨

2️⃣ unshift( )

let arr = [1, 2, 3, 4];

arr.unshift(5);
console.log(arr);

• 첫번째 값으로 추가됨

배열 요소 삭제하기 pop( )

let arr = [1, 2, 3, 4];

arr.pop();
console.log(arr);

• 가장 마지막 값이 삭제됨

배열 요소 크기 접근 length( )

let arr = [1, 2, 3, 4];
//자료형에 관계없이 push를 통해 추가할 수 있음
arr.push(5);
console.log(arr.length);
//length를 통해 배열의 길이를 알 수 있음

📌반복문

for문

for (let i = 1; i <= 100; i++) {
  console.log("김민서");
}

배열과 반복문

let arr = ["a", "b", "c", "d"];
for (let i = 0; i < 4; i++) {
  console.log(arr[i]);
}

객체과 반복문

let person = {
  name: "김민서",
  age: 22,
  tall: 161
};

const personKeys = Object.keys(person);

for (let i = 0; i < personKeys.length; i++) {
  const curKey = personKeys[i];
  const curValue = person[curKey]; //해당 인덱스의 키값을 받아와 value 값도 찾아옴

  console.log(`${curKey}:${curValue}`);
}

• 객체를 배열로 바꿔줘야함
  • Object.keys → 객체에 있는 key 값들을 자동으로 배열로 반환받을 수 있음
  • Object.values → 반대로 value 값도 가져올 수 있음

let person = {
  name: "김민서",
  age: 22,
  tall: 161
};

const newArray = Object.entries(person);
//key - value담아줌

for (let i = 0; i < newArray.length; i++) {
  console.log(`${newArray[i][0]}:${newArray[i][1]}`);
}

• Object.entries 새로운 배열로 반환해줌

  

let person = {
  name: "김민서",
  age: 22,
  tall: 161
};

for (let key in person) {
  console.log(`${key}:${person[key]}`);
}

• 객체를 배열로 변환하는 과정없이 key값 접근 가능함!

📌배열 내장 함수

forEach

const arr = [1, 2, 3, 4];

//forEach
arr.forEach(function (elm) {
  console.log(elm * 2);
});

• elm으로 배열의 각 요소들에 접근

const arr = [1, 2, 3, 4];

//forEach
arr.forEach(function (elm, idx) {
  console.log(`${idx}: ${elm}`);
});

• idx로 인덱스도 접근 가능

const arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach(function (elm) {
  newArr.push(elm * 2);
});

console.log(newArr);

const arr = [1, 2, 3, 4];

let number = 3;
arr.forEach((elm) => {
  if (elm === number) {
    console.log(true);
  }
});

map

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});
console.log(newArr);

• 전달한 콜백함수의 결과를 모아 새로운 배열 만들어줌

at

let colors = ["red", "green", "blue"];

console.log(colors.at(0));

• at(인덱스 번호) → 해당 인덱스에 해당하는 값을 반환해줌
• 괄호에 -1을 넣으면 배열의 가장 마지막 값을 반환

includes/indexOf

const arr = [1, 2, 3, 4];

let number = 5;
console.log(arr.includes(number));
console.log(arr.indexOf(number));

• includes는 값을 true/false로 반환
• indexOf는 값이 몇번째 index에 존재하는지를 반환
  • 만약 같은 값이 여러개가 있다면 가장 앞에 있는 인덱스를 기준으로 반환함
  • 값이 없다면 -1을 반환
  • 배열 요소의 값이 객체이거나 배열의 형태일 때는 못찾음

findIndex

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];

let number = 3;

console.log(arr.findIndex((elm) => elm.color === "blue"));
//2

• 배열 요소의 값이 객체이거나 배열의 형태일 때에 값을 찾아줌

find

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];

const element = arr.find((elm) => {
  return elm.color === "blue";
});

console.log(element);

• find -> 만족하는 인덱스 요소 자체를 반환시켜줌

filter

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];
//filter
console.log(arr.filter((elm) => elm.color === "blue"));

• 처음으로 나오는 값이 아닌 조건에 만족하는 모든 값을 반환

  

slice

const arr = [
  { num: 1, color: "red" },//0
  { num: 2, color: "black" },//1
  { num: 3, color: "blue" },//2
  { num: 4, color: "green" },//3
  { num: 5, color: "blue" }//4
];
//index
console.log(arr.slice(0, 2));//red,black

• start ~ end-1까지 자르는 걸 주의해야함!

concat

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" }
];

const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];
//concat
console.log(arr1.concat(arr2));

• 새로운 배열로 합쳐짐

  

join

const arr = ["김민서", "님", "안녕하세요", "또오셨네요!"];
//join
console.log(arr.join("바보"));

• 문자열을 합쳐줌

sort

let chars = ["나", "다", "가"];
//문자열 정렬
chars.sort();
console.log(chars);

let nums = [4, 1, 11, 8, 20, 5];

const compare = (a, b) => {
  //1.같다
  if (a > b) {
    return 1;
  }
  //2.작다
  if (a < b) {
    return -1;
  }
  //3.같다
  return 0;
};
nums.sort(compare);
console.log(nums);

• sort는 기본적으로 오름차순으로 정렬
• compare함수를 이용해 내림차순으로 정렬

reduce

let nums = [1, 100, 25, 50];

let sum = nums.reduce((acc, cur, idx) => {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);

console.log(sum);

• 배열의 모든 요소들에 대해 확인하고 누적된 값을 확인하고 싶을 때 사용

isArray

let a = Array.isArray([1, 100, 50]);
let b = Array.isArray({ id: 1, color: "black" });
let c = Array.isArray("string");
let d = Array.isArray(undefined);

console.log(a, b, c, d);//true false false false

• 괄호안 매개변수가 배열 → true 아니면 → false