[EST] 240709 JavaScript-03

숫자 (Number)

- 정수와 실수를 표현하기 위해 사용되는 자료형

let num1 = 2;
let num2 = 2.3;

console.log(typeof num1, typeof num2); //number number

 

숫자형 특징

- 배정밀도 64비트 부동소수점 형식을 따름

- 여러 연산 가능

- 정수, 실수 외에도 특수 값 존재

  ◽ 정수 : 양의 정수 / 음의 정수 / 0

  ◽ 실수 : 소수점을 포함하는 모든 수

  ◽ 유효숫자 : 수의 정확도에 영향을 주는 수

 

* 0.1 + 0.2 != 0.3

console.log(0.1 + 0.2); // 0.30000000000000004

- 0.1 + 0.2가 0.3이 아닌 이유

  ◽ 숫자를 저장하는 형식 때문

  ◽ 10진수의 소수를 2진수로 전환하는 과정에서 무한소수화가 되면서 오차가 발생

  ◽ 반올림, 소수점을 지정하여 처리

 

자바스크립트에서 안전하게 사용할 수 있는 문자

- 가장 큰 수

  ◽ Number.MAX_SAFE_INTEGER

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

 

- 가장 작은 수

  ◽ Number.MIN_SAFE_INTEGER

console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

 

다양한 연산

- 산술연산

const a = 10;
const b = 3;

console.log(`${a} + ${b} = ${a + b}`); // 10 + 3 = 13 -> 더하기
console.log(`${a} - ${b} = ${a - b}`); // 10 - 3 = 7 -> 빼기
console.log(`${a} * ${b} = ${a * b}`); // 10 * 3 = 30 -> 곱하기
console.log(`${a} / ${b} = ${a / b}`); // 10 / 3 = 3.3333333333333335 -> 나누기
console.log(`${a} % ${b} = ${a % b}`); // 10 % 3 = 1 -> 나머지 값
console.log(`${a} ** ${b} = ${a ** b}`); // 10 ** 3 = 1000 -> n제곱
console.log(`${16} ** ${0.5} = ${16 ** 0.5}`); // 16 ** 0.5 = 4 -> n제곱근

 

 

- 단항연산

  ◽ 연산자와 피연산자가 1개씩

const a = 10;
const b = 3;

console.log(`-${a} = ${b} = ${-a}`); // -10 = 3 = -10
console.log(`-(-${a}) = ${-(-a)}`); // -(-10) = 10
console.log(+"4"); // 4 -> 타입을 숫자로 변환
console.log(typeof +"4"); number

 

- 증감연산

let num = 3;

console.log("3++ -> ", num++); // 3++ -> 3
console.log(num); // 4
console.log("++num ->", ++num); // 5
console.log("--num ->", --num); // 4
console.log("num-- ->", num-); // 4
console.log(num); // 3

 

- 특수한 값

   Infinity

    ◽ 무한대를 의미하는 숫자

    ◽ 아주 큰 수를 표현하거나 불가능한 연산(0으로 나누기)이 발생했을 때의 결과 값

console.log(1 / 0); //Infinity
console.log("-1/0 ->", -1 / 0); // -1/0 -> -Infinity

 

   e

    ◽ 10의 거듭제곱을 표현 가능

console.log(3e10); // 30000000000 -> 3*10^10
console.log(2e-2); // 0.02 -> 2*10^(-2)

 

NaN

    ◽ Not a Number의 약자

    ◽ 산술연산이 불가능한 데이터 타입과 연산을 진행하려고 할 때 반환되는 값

console.log(typeof NaN);  // number
console.log("hello" * 2); // NaN
console.log(+`-(-10)`); // NaN

숫자형 메소드

- parseInt

  ◽ parseInt(" ")

  ◽ 문자열 데이터에서 읽을 수 있는 숫자를 가져와 숫자형으로 변경

  ◽ 숫자가 아닌 문자가 나오면 숫자의 수집을 멈추고, 그 이전까지의 수집된 숫자를 정수로 반환

  ◽ 문자열의 시작이 숫자로 변환이 불가능한 경우, NaN을 반환

console.log(parseInt("36")); // 36
console.log(parseInt("36px")); // 36 -> 숫자만 반환
console.log(parseInt("12.5px")); // 12 -> 정수로 반환
console.log(parseInt("width: 25px")); // NaN (Not a Number) -> 숫자가 아닌 값으로 시작하면 NaN로 변환

 

- parseFloat

  ◽ parseFloat(" ")

  ◽ 문자열에서 읽을 수 있는 숫자를 가져와 숫자형으로 변경

  ◽ 실수로 변환

console.log(parseFloat("12.5px")); // 12.5 -> 실수값으로 반환

 

- Number.isNaN()

  ◽ Number.isNaN( )

  ◽ 인지가 NaN인지 판단

  ◽ 형변환이 일어나지 않음

  ◽ 숫자형 NaN일 경우에만 true를 반환

console.log(Number.isNaN(23)); // false -> number
console.log(Number.isNaN(undefined)); //false -> 숫자도 NaN도 아님
console.log(Number.isNaN("2345")); //false -> 숫자로 변환
console.log(Number.isNaN("hello")); //false -> 숫자로 변환 불가능 + NaN
console.log(Number.isNaN(NaN)); //true -> 숫자형 NaN으로 true 반환
console.log(Number.isNaN("hello" * 3)); //true -> hello 자체가 NaN을 생성

 

- isNaN()

  ◽ isNaN( )

  ◽ 인자가 NaN인지 판단

  ◽ 형변환이 일어남 / 자동으로 숫자로 변환해서 확인

  ◽ undefined는 변환하면 NaN로 반환

console.log(isNaN(23)); // false -> number
console.log(isNaN(undefined)); // true -> Not a Number
console.log(isNaN("hello")); // true -> Not a Number
console.log(isNaN("2345")); false -> number

 

- toFixed

  ◽ toFixed(소수점 이하 n자리)

  ◽ 숫자의 소수점 이하의 자리수를 지정 가능

  ◽ 지정된 소수점 이하의 자리수를 반올림하여 문자열로 반환

  ◽ 값이 없거나 0이면 정수를 반환

const pi = 3.1415926;

console.log(typeof pi.toFixed(10)); //string -> 결과는 문자형으로 반환
console.log(pi.toFixed(2)); //3.14 -> 소수점 이하 2번째 자리까지 반환 
console.log(pi.toFixed(3)); //3.142 -> 소수점 이하 3번째 자리까지 반올림하여 반환
console.log(pi.toFixed(10)); //3.1415926000 -> 소수점 이하 10번째 자리까지 반환 + 부족한 부분은 0으로 채움
console.log(pi.toFixed()); // 3 -> 빈칸이면 정수만 반환

 

- Math 객체를 이용한 연산

  원주율

  ◽ Math.PI

console.log(`Math. PI: ${Math.PI}`); // Math.PI: 3.141592653589793

 

 숫자 반올림

  ◽ Math.round(숫자)

console.log(`Math.round: ${Math.round(4.7)}`); // Math.round: 5
console.log(`Math.round: ${Math.round(4.3)}`); // Math.round: 4

 

 숫자 올림

  ◽ Math.ceil(숫자)

console.log(`Math.floor: ${Math.floor(8.6)}`); // Math.floor: 8

 

 숫자 버림

  ◽ Math.floor(숫자)

console.log(`Math.ceil: ${Math.ceil(9.3)}`); // Math.ceil: 10

 

 정수

  ◽ Math.trunc(숫자)

console.log(`Math.trunc: ${Math.trunc(4.7)}`); // 4
console.log(`Math.trunc: ${Math.trunc(-1.5)}`); // -1

 

 제곱

  ◽ Math.pow(숫자)

console.log(`Math.pow: ${Math.pow(2, 3)}`); // 8 -> 2의 3제곱
console.log(`2 ** 3 = ${2 ** 3}`) // 8 -> 2의 3제곱

 

 제곱근

  ◽ Math.sqrt(숫자)

console.log(`Math.sqrt: ${Math.sqrt(16)}`); //4 -> 16의 제곱근

 

 절대값

  ◽ Math.abs(숫자)

console.log(`Math.abs: ${Math.abs(-5)}`); // 5 -> -5의 절대값
console.log(`Math.abs: ${Math.abs(4)}`); // 4 -> 4의 절대값

 

 랜덤숫자

  ◽ Math.random(숫자)

console.log(`Math.random: ${Math.random()}`); // 0~1 사이의 수를 랜덤으로 반환

// Q. 1 ~ 10까지의 랜덤 정수
// 1) 0 <= random < 1
// 2) * 10 -> 0 <= random < 10
// 3) + 1 -> 1 <= random < 11 (ex. 1.1, 10.9999)
// 4) 소수점 버림
console.log(`1부터 10까지의 랜덤 정수: ${Math.floor(Math.random() * 10 + 1)}`);

 

가장 큰 값

  ◽ Math.max(숫자)

console.log(`Math.max: ${Math.max(10, 20, 30, 40, 20)}`); // Math.max: 40

 

가장 작은 값

  ◽ Math.min(숫자)

console.log(`Math.max: ${Math.max(10, 20, 30, 40, 20)}`); // Math.min: 10

 

BigInt

- 큰 정수를 나타내는 인수형

- 정수형 표현만 가능

- BigInt끼리는 연산이 가능하지만, BigInt와 숫자는 연산불가능

- 정수 리터럴의 끝에 n을 붙여서 표현

// 정확성이 보장되지 않는 숫자 타입
9007199254740991 + 1 
9007199254740991 + 2
9007199254740991 + 3
9007199254740991 + 4

// bigint
9007199254740991n + 1n
9007199254740991n + 2n
9007199254740991n + 3n
9007199254740991n + 4n

let bigNum1 = 123456n; 

console.log(typeof bigNum1); // bigint
console.log(5n / 2n); // 2n
console.log(5n / 2); // BigInt와 다른타입의 연산은 불가능
console.log(5n / BigInt(2)); //2n

 

- BigInt 변환 시 주의사항

  ◽ " "를 이용하여 문자열로 안전하게 변환해야함

console.log(BigInt("9007199254740992")); // 9007199254740992n
console.log(BigInt("9007199254740993")); // 9007199254740993n
console.log(BigInt("9007199254740994")); // 9007199254740994n
console.log(BigInt("9007199254740995")); // 9007199254740995n

 

불리언(Boolean)

- 참과 거짓을 나타냄

- 조건문이나 반복문에서 주로 사용됨

let bool1 = true;
let bool2 = false;

console.log(typeof bool1); // boolean
console.log(typeof bool2); // boolean

 

  ◽ Truthy : Boolean으로 타입을 변환했을 때, true가 되는 값

      -> 값을 형변환 해보면 됨 -> 문자열 맨 앞에 !!

console.log(`true: ${!!true}`); // true: true
console.log(`23: ${!!23}`); // 23: true
console.log(`'hello: ${!!"hello"}`); // 'hello': true
console.log(`배열: ${!![]}`); // 배열: true
console.log(`객체: ${!!{name: "weniv"}}`); // 객체: true

 

◽ Falsy : Boolean으로 타입을 변환했을 때, false가 되는 값

      -> 값을 형변환 해보면 됨 -> 문자열 맨 앞에 !!

console.log(`false: ${!!false}`); // false: false
console.log(`0: ${!!0}`); //0: false -> 0은 falsy / 나머지 숫자는 truthy
console.log(`'': ${!!""}`); //'': false
console.log(`null: ${!!null}`); // null: false
console.log(`undefined: ${!!undefined}`); //undefined: false
console.log(`NaN: ${!!NaN}`); // NaN: false

  

undefined

- 변수가 선언되었지만 값이 할당되지 않은 상태

- 해당 변수에 아무런 값도 할당되지 않았거나, 정의되지 않은 변수에 접근하려고 할 때, undefined가 반환

let a;

console.log(a); // undefined
console.log(typeof a); //undefined

// "undefined" VS undefined
console.log(typeof "undefined"); //String (문자열)
console.log(typeof undefined); //undefined

 

null

- 의도적으로 변수의 값이 없음을 나타내기 위해 사용하는 데이터 타입

- null을 이용하면 변수가 더이상 값을 가지고 있지않음을 명시적으로 표현

//null
//사용자의 로그인 정보
let isLoggedIn = true;
let currentUser = {
  name: "licat",
  level: 3,
};

//로그아웃
//로그인되어있음 isLoggedIn 거짓
//currentUser 빈 값
isLoggedIn = false;
currentUser = null; //개발자가 비어있는 값을 나타내기 위해 사용
console.log(typeof currentUer); //null이 object가 나오는 것은 오류
console.log(Object.prototype.toString.call(currentUser));

 

symbol

- ES6에 추가된 원시타입

- 고유하고 변경 불가능한 식별자를 만드는데 사용

- 인자로 심볼의 설명을 적성가능 / 인자가 같다고 해도 고유한 식별자로 만듦

let sym1 = Symbol("name");
let sym2 = Symbol("name");
console.log(sym1 === sym2); // false

---

객체타입

객체타입의 특징

- 객체는 속성(property)로 값과 메서드를 가짐 (값 = 상태 / 메서드 = 동작)

- 값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨

- 객체 값을 다른 변수에 할당할 때는 값 자체가 복사되어 저장되는 것이 아닌 값의 참조(위치)가 저장됨

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr2[0] = 10;
console.log(`arr1: ${arr1}`); // arr1: 10, 2, 3
console.log(`arr1: ${arr2}`); // arr1: 10, 2, 3
//arr2로 arr1을 수정가능

 

배열

- 데이터를 순서대로 저장하는 객체

- 원시타입과의 차이점

  ◽ 원시타입: 하나의 데이터를 표현함

  ◽ 객체타입: 여러 개의 데이터를 한 변수에 저장가능

  ◽  다양한 작업(데이터 추가, 정렬, 제거, 검색)을 수행할 수 있도록 여러가지 메서드 제공

- 배열은 대괄호( [ ] )을 사용

- 요소들은 쉼표로 구분하여 배열 생성 가능

- 요소를 작성하지 않으면 빈 배열을 생성

// 배열 선언
const arr = []; // 빈 배열
const arr2 = [1, 2, 3, 4]; // 요소를 갖는 배열

console.log(arr);
console.log(arr2);

// Array 생성자 함수
const arr3 = new Array(10, 20, 30);
console.log(arr3);

// 생성자함수 주의사항
const arr4 = new Array(5); // 인자가 하나인데 숫자다 -> 길이
console.log(arr4);
console.log(new Array(1));

const arr5 = new Array("a");
console.log(arr5);

 

배열의 특징

- 배열의 요소는 순서를 가지고 있기 때문에, 인덱스를 이용하여 배열의 요소에 접근 가능

- 존재하지 않는 원소에도 접근이 가능

const arr = [10, 20, 30, 40, 50];

console.log(arr[0]); // 10
console.log(arr[4]); // 50
console.log(arr[10]); // undefined -> 존재하지 않는 배열의 값
console.log(arr[-1]); // undefined -> 음수

// 음수 인덱스를 사용하고 싶은 경우 -> at을 사용
console.log(arr.at(-2)); // 40

 

- 인덱싱을 이용하여 배열의 요소를 추가하거나 수정가능

const arr = [10, 20, 30, 40, 50];

arr.length = 2;
console.log(arr); // [10, 20] -> 길이 2인 배열을 가짐

arr.length = 5;
console.log(arr); // [10, 20, , , ] -> [10, 20]에서 길이가 5인 배열을 가짐 (나머지는 empty)

 

- 배열도 길이를 나타내는 length 출력 가능

const arr = [10, 20, 30, 40, 50];

console.log(arr.length); // 5

 

- 다른 배열을 요소로 가질 수 있음 ( = 다차원 배열)

  ◽  1차원 배열 -> 벡터(vector)

//1차원 배열 -> 벡터(vector)
const arr2 = [10, 20, "hello"];
console.log (arr2); // [10, 20, 'hello']

 

  ◽  2차원 배열 -> 행렬(matrix)

//2차원배열 -> 행렬(matrix)
const arr3 = [
  [10, 20],
  [30, 40]
];
console.log(arr3[0][1]); // 20

 

  ◽  3차원 배열 -> 텐서

//3차원배열 -> 텐서
const arr4 = [
  [
    [1, 2],
    [3, 4]
  ], 
  [
    [5, 6],
    [7, 8]
  ]
];
console.log(arr4[1][0][0]); // 5

 

배열의 메서드

push( )

- 배열의 끝에 요소를 추가하고 길이를 반환

- 여러 개의 요소도 추가 가능

const arr = [10, 20, 30];

arr.push(40);
console.log(arr); // [10, 20, 30, 40]

arr.push(50, 60, 70); 
console.log(arr); // [10, 20, 30, 40, 50, 60, 70]

 

pop( )

- 배열의 마지막 요소를 꺼내어 반환 

- 꺼낸 요소는 배열에서 제외됨

const arr = [10, 20, 30, 40, 50, 60, 70];

const element = arr.pop(); // 마지막 요소를 반환

console.log(arr); // [10, 20, 30, 40, 50, 60]
console.log("element: ", element); // element: 70

 

unshift

- 배열의 첫번째 요소로 새로운 요소를 추가

const arr = [10, 20, 30, 40, 50, 60]

arr.unshift(50);
console.log(arr); // [50, 10, 20, 30, 40, 50, 60]


const arr2 = ["사과", "바나나", "수박"];
arr.unshift("오이", "배");
console.log(arr2); // ['오이', '배', '사과', '바나나', '수박']

 

shift

- 배열에서 첫번째 요소를 꺼내고 반환

- pop( )과 마찬가지로 꺼낸 요소는 배열에서 제외

const arr = [10, 20, 30, 40, 50, 60]

arr.shift(); 
console.log(arr); //  [10, 20, 30, 40, 50, 60]


const arr2 = ['오이', '배', '사과', '바나나', '수박'];
arr.shift();
console.log(arr2) = ['배', '사과', '바나나', '수박'];

 

splice

- 배열의 요소를 추가, 제거 또는 교체가능

  ◽ 추가

    - splice(n번째자리, 변경할 요소(없으면 0), 넣고자 하는 값)

const arr2 = [1, 2, 3];

arr2.splice(1, 0, 4, 5, 6);
console.log(arr2); // [1, 4, 5, 6, 2, 3]

 

  ◽ 변경

    - splice(변경할 n번째자리, 변경할 요소의 개수, 변경할 요소)

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

arr2.splice(3, 1, 5, 8);
console.log(arr2); // [1, 4, 2, 1, 5, 8]

 

  ◽ 삭제

    - splice(삭제할 n번째자리, 삭제할 요소의 개수)

const arr2 = [1, 4, 5, 6, 2, 3];

arr2.splice(2, 2);
console.log(arr2); // [1, 4, 2, 3]

 

slice

- slice(시작 인덱스, 종료 인덱스 + 1)

- 배열에서 요소들을 추출하여 새로운 배열을 반환

const fruits = ["사과", "바나나", "체리", "블루베리", "두리안"];

console.log(fruits.slice(1, 3)); // ['바나나', '체리']

 

- slice(시작 인덱스)

  ◽ 시작 인덱스부터 끝까지 새로운 배열을 생성

const fruits = ["사과", "바나나", "체리", "블루베리", "두리안"];

console.log(fruits.slice(3)); // ['블루베리', '두리안']

 

- slice( )

  ◽  배열전체 복사가능

const fruits = ["사과", "바나나", "체리", "블루베리", "두리안"];

const fruits2 = fruits.slice(); // ["사과", "바나나", "체리", "블루베리", "두리안"]

//fruits2 0번째 요소 변경
fruits2[0] = "딸기";
console.log("fruits: ", fruits); // ["사과", "바나나", "체리", "블루베리", "두리안"]
console.log("fruits2: ", fruits2); // ["딸기", "바나나", "체리", "블루베리", "두리안"]

 

sort

- 배열의 요소를 정렬하는데 사용됨

- 메서드를 호출하면 배열을 변경하며, 정렬된 배열을 반환

- 유니코드 순서에 따라 정렬 -> 사전식

const fruits = ["사과", "바나나", "체리", "블루베리", "두리안"];

fruits.sort();
console.log(fruits); // ['두리안', '바나나', '블루베리', '사과', '체리']


const numbers = [1, 5, 2, 4];

numbers.sort();
console.log(numbers); // [1, 2, 4, 5]


const numbers2 = [5, 100, 27, 36];

numbers2.sort();
console.log(numbers2); // [100, 27, 36, 5]

 

- 숫자를 오름차순 (작은 수부터 나열)

const numbers2 = [5, 100, 27, 36];

numbers2.sort(function (a, b) {
    return a - b;
});

console.log(numbers2); // [5, 27, 36, 100]

 

- 숫자를 내림차순 (큰 수부터 나열)

const numbers2 = [5, 100, 27, 36];

numbers2.sort(function (a, b) {
    return b - a;
});

console.log(numbers2); // [100, 36, 27, 5]

 

indexOf

- indexOf(찾는 요소, 배열의 순서) -> 배열의 순서(option)

- 요소의 첫번째 인덱스를 반환

- 요소가 배열에 없으면 -1을 반환

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

console.log(arr3.indexOf(2)); // 1 -> 2가 있는 첫번째 요소의 자리
console.log(arr3.indexOf(5)); // -1 -> 요소가 배열에 없으면 -1을 반환
console.log(arr3.indexOf(2, 3)); // 4 -> 2를 찾는데 배열에서 3의 자리부터 찾음

 

includes

- 요소가 포함되어 있으면 true

- 요소가 포함되어 있지 않으면 false

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

console.log(arr3.includes(3)); // true -> 3이 배열에 포함되어 있는가? : 있음(true)
console.log(arr3.includes(5)); // false -> 5가 배열에 포함되어 있는가? : 없음(false)

 

forEach

- 각 요소에 대해 주어진 함수를 실행

- 함수는 인자로 배열 요소, 인덱스를 받음

- 배열의 요소를 순환하면서 해당 요소를 함수로 전달하고, 이 함수가 각 요소에 대해 실행됨

const fruits3 = ["참외", "키위", "감귤"];

fruits3.forEach(function (item, index) {
    console.log(item, index); // 참외 0 / 키위 1 / 감귤 2
    fruits3[index] = item + "💛"; // 요소뒤에 추가됨
});

console.log(fruits3); // ['참외💛', '키위💛', '감귤💛']

-> 문제점: 원본도 같이 변경됨

 

↳ 해결방법: push메서드를 이용하여 원본유지가 가능

const fruits4 = ["사과", "바나나", "포도"];
const result = [];
const resultArr = fruits4.forEach(function (item, index) {
    console.log(item, index); // 사과 0 / 바나나 1 / 포도 2
    result.push(item + "💜"); 
});

console.log(fruits4); // ['사과', '바나나', '포도']
console.log(result); // ['사과💜', '바나나💜', '포도💜']

 

map

- 배열의 각 요소에 대해 주어진 함수를 실행함

- 그 결과를 새로운 배열로 반환

const arr4 = [10, 20, 30];
const newArr = arr4.map(function (item, index) {
    console.log(item, index); // 10 0 / 20 1 / 30 2
    return item * index;
});

console.log(newArr); // [0, 20, 60]
console.log(arr4); // [10, 20, 30]

 

filter

- 기존의 배열에서 특정 조건을 만족하는 요소들만 추출

- 새로운 배열로 반환

const arr5 = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
const filterArr = arr5.filter(function (item, index) {
    //짝수만 -> 짝수를 2로 나누면 나머지가 0이 나옴
    return item % 2 === 0;
});

console.log(filterArr); // [2, 4, 2, 4]

 

reduce

- 배열의 요소를 모두 더하고자 할 때, reduce메서드 사용

- 배열의 각 요소에 대해 함수를 실행

- 이전 계산 결과인 a와 현재 요소인 c를 함수의 인자로 전달

- 초기값을 생략하면 a는 첫번째 요소를 사용

- c는 두번째 요소(인덱스 1) 요소부터 순회

- 빈 배열에서 초기값없이 reduce( )를 호출하면 오류발생

const arr6 = [1, 2, 3, 4, 5];
const reduceRes = arr6.reduce(function (a, c) {
    return a + c;
}, 0); //초기값을 0으로 설정

console.log(reduceRes); // 15 -> 1+2+3+4+5 = 15

const redRes = [].reduce(function (a, c){
    console.log("in reduce: ", a, c);
    return a + c;
}, 0); //초기값을 0으로 설정


console.log(redRes); // 0
// 빈 배열 []에 대해 reduce를 호출하면, 초기 값만 반환
// 콜백함수 호출되지 X
// 따라서, reduce는 초기 값 0을 반환

 

join

- split의 반대기능

- 배열의 요소들을 연결할 때 사용

- 인자로 문자열을 전달하여 연결 문자로 사용 가능

const arr7 = ["hello", "world", "weniv"];

console.log(arr7.join(" ")); // hello world weniv
console.log(arr7.join("-")); // hello-world-weniv

 

concat

- 여러 개의 배열을 연결하거나 배열을 복사할 때 사용

- 기존 배열의 수정없이 새로운 배열을 반환 (원본 배열은 수정되지 X)

- 인자없이 concat메서드를 실행하면 얕은 복사가 됨

- 배열은 풀어서, 값은 요소로 넣음

const arr8 = [1, 2, 3];
const arr9 = [4, 5, 6];

const concatRes = arr8.concat(arr9, 7, 8, [10]);

console.log(concatRes); // [1, 2, 3, 4, 5, 6, 7, 8, 10]
console.log(arr8); // [1, 2, 3]
console.log(arr9); // [4, 5, 6]