[221101] JS : 표준내장객체 3

 

 

1. 배열

• splice : 대상 배열에 요소를 추가하거나 삭제하거나 교체합니다. 대상 배열 원본이 변경됩니다.
• arr.splice(시작 인덱스, 삭제할 요소 개수, 추가할 요소

• 요소 추가 : arr.splice(2번 인덱스, 0개 삭제, 그자리에 'X' 추가)

const arr = ['A', 'B', 'C']
arr.splice(2, 0, 'X')

console.log(arr) // ['A', 'B', 'X', 'C']

• 요소 삭제 : arr.splice(1번 인덱스, 1개 삭제)

const arr = ['A', 'B', 'C']
arr.splice(1, 1)

console.log(arr) // ['A', 'C']

• 요소 교체 : arr.splice(1번 인덱스, 1개 삭제, 그자리에 'X' 추가)

const arr = ['A', 'B', 'C']
arr.splice(1, 1, 'X')

console.log(arr) // ['A', 'X', 'C']

• 요소 추가 및 삭제 : arr.splice(0번 인덱스, 0개 삭제, 그자리에 'X', 'Y', 'Z' 추가)

const arr = ['A', 'B', 'C']
arr.splice(0, 0, 'X', 'Y', 'Z')

console.log(arr) // ['X', 'Y', 'Z', 'A', 'B', 'C']

 

 

 

• 프로토 타입 메서드 : 데이터에 붙여서 쓰는 메서드
• 정적 메서드 : class 객체에서 바로 사용하는 메서드로 배열에는 사용할 수 없음

2. Array

(1) Array.from

• 유사 배열(Array-like)을 실제 배열로 반환.
• li 태그 모두를 querySelectorAll 로 가져온 요소를 console.log 해보면 nodelist 가 나오는데 nodelist 는 유사배열. 유사배열은 객체데이터로 배열데이터가 아님.
• Array.from(liEls).map( ) → from 으로 감싸주면 유사 배열을 실제 배열로 사용가능.
• 다만, 각 key 값이 제로베이스 넘버링이 되어있고 마지막에는 length 와 그 값이 있어야 함.

 

(2) Array.isArray

• 배열 데이터인지 확인.
• 중괄호 안의 데이터가 배열 데이터인지 확인하여 반환

 

 

 

3. Object

(1) Object.assign

• 하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환.
• 두개 데이터를 병합하는 concat 메서드와 유사
• 인수는 최소 두개 이상을 넣어줘야 함 한계는 없음

const target = { a: 1, b: 2 }
const source1 = { b: 3, c: 4 }
const source2 = { c: 5, d: 6 }
const result = Object.assign(target, source1, source2)

console.log(target) // { a: 1, b: 3, c: 5, d: 6 }
console.log(result) // { a: 1, b: 3, c: 5, d: 6 }

→ 원본 데이터인 target 이 변경되고 result 에 들어감, const result = target 과 같은 의미

→ 객체 데이터에서 속성의 이름(key) 는 고유함, 똑 같은 이름은 존재할 수 없음. 따라서 앞의 데이터는 날라가고 뒤에서 덮어쓴 데이터를 반환.

 

• 새로운 객체를 반환하려면, 빈 객체를 대상으로 추가 가능

const target = { a: 1, b: 2 }
const source1 = { b: 3, c: 4 }
const source2 = { c: 5, d: 6 }
const result = Object.assign({}, target, source1, source2)

console.log(target) // { a: 1, b: 2 }
console.log(result) // { a: 1, b: 3, c: 5, d: 6 }

 

• 전개 연산자 사용 가능.

const target = { a: 1, b: 2 }
const source1 = { b: 3, c: 4 }
const source2 = { c: 5, d: 6 }
const result = {
  ...target,
  ...source1,
  ...source2
}

console.log(target) // { a: 1, b: 2 }
console.log(result) // { a: 1, b: 3, c: 5, d: 6 }

→ 원본 데이터가 변경되지 않음

 

 

(2) Object.keys

• 주어진 객체의 속성 이름을 나열한 배열을 반환.

 

(3) Object.values

• 주어진 객체의 속성 값을 나열한 배열을 반환.

 

(4) Object.entries

• 주어진 객체의 각 속성과 값으로 하나의 배열 만들어 요소로 추가한 2차원 배열을 반환.
• 2차원 배열은 배열 안에 배열이 들어간 것을 의미.
• for in, for of, object.keys, object.entries 등 다양한 방법 있음

 

(5) Object.freeze 와 Object.isFrozen

• 주어진 객체를 변경할 수 없도록 동결하거나, 동결 여부를 확인.

 

(6) Object.seal 과 Object.isSealed

• 주어진 객체를 변경할 수 없도록 밀봉하거나, 밀봉 여부를 확인.
• 동결과 다른 점은 밀봉 후에도 속성의 값 변경 가능.
• 추가, 삭제는 안되지만 수정은 가능.

 

(7) Object.defineProperty

• 주어진 객체에 속성을 추가하거나, 특성을 변경.

 

const user = {}

Object.defineProperty(user, 'name', {
  value: 'Heropy'
})

console.log(user.name) // 'Heropy'

// 열거 불가
for (const key in user) {
  console.log('key:', key) // 출력 없음
}

// 수정 불가
user.name = 'Neo'
console.log(user.name) // 'Heropy'

// 삭제 불가
delete user.name
console.log(user.name) // 'Heropy'

→ 속성을 true 로 따로 정의하지 않아서 모두 기본값이 false 이기 때문에 열거, 수정, 삭제가 불가한 것

 

const user = {
  _name: "Heropy",
};

Object.defineProperty(user, "name", {
  get() {
    return this._name;
  },
  set(value) {
    this._name = value;
    console.log(`이름이 ${value}로 바뀌었습니다!`);
  },
});

// Get!
console.log(user.name); // 'Heropy'

// Set!
user.name = "Neo"; // '이름이 Neo로 바뀌었습니다!'

for (let key in user) {
  console.log(key); // '_name'
}

→ _ 는 언제 없어져도 이상하지 않을 데이터이기 때문에 조회는 가능하지만 암묵적으로 쓰지말라고 지정해놓은 것.

→ this : user

→ get : 조회할 때 동작하는 함수

→ set : 지정할 때 동작하는 함수. 이 함수는 데이터를 지정할 때 동작하기 때문에 여기서 value 는 'Neo'

 

(8) Object.defineProperties

• 주어진 객체에 여러 속성을 추가하거나, 특성을 변경.
• 여러 개의 속성을 한꺼번에 지정해줄 수 있음

const user = {};

Object.defineProperties(user, {
  name: {
    enumerable: true,
    value: "Heropy",
  },
  age: {
    enumerable: true,
    value: 85,
  },
  email: {
    enumerable: true,
    configurable: true,
    writable: true,
    value: [],
  },
  address: {
    value: "경기 수원시",
  },
});

console.log(user);

for (const key in user) {
  console.log(key);
}
// 'name'
// 'age'
// 'email'

 

 

 

 

4. JSON

• JSON(JavaScript Object Notation)는 데이터 전달을 위한 표준 데이터 포맷.
  • 문자, 숫자, 불린, Null, 객체, 배열만 사용
  • 문자는 큰 따옴표만 사용
  • 후행 쉼표 사용 불가 → 다음 데이터가 없는데도 불구하고 끝에 쉼표를 사용하면 에러
  • .json 확장자 사용

 

(1) stringify

• JavaScript 데이터를 JSON 문자로 변환.

console.log(JSON.stringify("Hello world!")); // '"Hello world!"'
console.log(JSON.stringify(123)); // '123'
console.log(JSON.stringify(false)); // 'false'
console.log(JSON.stringify(null)); // 'null'
console.log(JSON.stringify({ name: "Heropy", age: 85 })); // '{"name":"Heropy","age":85}'
// console.log(JSON.stringify({ name: 'Heropy', age: 85 }, null, 2))
console.log(JSON.stringify([1, 2, 3])); // '[1,2,3]'

 

(2) parse

• JSON 문자를 분석해 JavaScript 데이터로 변환.

console.log(JSON.parse('"Hello world!"')); // "Hello world!"
console.log(JSON.parse("123")); // 123
console.log(JSON.parse("false")); // false
console.log(JSON.parse("null")); // null
console.log(JSON.parse('{"name":"Heropy","age":85}')); // { name: 'Heropy', age: 85 }
console.log(JSON.parse("[1,2,3]")); // [1, 2, 3]

 

 

 

 

5. 모듈

• 모듈(Module)은 이해 가능한, 보다 작은 단위로 나눠진 것을 말합니다.
• 특히 자바스크립트에서 모듈은 특정 데이터들의 집합(파일)입니다.

 

(1) 내보내기(export)

• 기본 내보내기(Default exports) : 이름 X (선택), 모듈당 1번만 사용 가능

export default 데이터;

 

• 이름 내보내기(Named exports) : 이름 필수, 모듈당 n번 사용 가능

export const 이름1 = 데이터1;
export const 이름2 = 데이터2;

 

• 사용 패턴

export default {
  name: "기본 데이터!",
  desc: "이름 필요 없음!",
};

export const str = "Hello~";
export const num = 123;
export const arr = ["A", "B", "C"];
export function hello() {}

 

• as 키워드 : 내보내는 데이터의 이름 변경

const a = "Named!";
const b = 123;
const c = ["A", "B", "C"];
function d() {}
export { a as str, b as num, c as arr, d as hello };

 

(2) 가져오기(Imports)

• 구조 : import 기본데이터, { 이름데이터1, 이름데이터2 } from '경로'

import defData from "./myModule.js";
import defData, { str, num, arr, fn } from "./myModule.js";
import { str, num, arr, fn } from "./myModule.js";
import {
  str as myStr,
  num as myNum,
  arr as myArr,
  fn as myFn,
} from "./myModule.js";
import * as myName from "./myModule.js";

→ *는 와이드카드 문자(wildcard character)로 여러 개를 한 번에 지정한다는 의미의 기호