[파트06]데이터처리 > 객체와빌트인객체

객체(Object)

1. 개체(Entity)의 정의:
   • 자바스크립트의 객체는 소프트웨어의 가장 기본적인 구성요소로, 개체라고도 불립니다.
2. 속성(Property)과 구성:
   • 객체는 속성(property)으로 구성되며, 각 속성은 객체의 특징이나 상태를 나타냅니다. 속성은 키(key)와 값(value)의 쌍으로 구성됩니다.
3. 자바스크립트 객체 선언:
   • 객체는 중괄호 {}를 사용하여 선언합니다. 각 속성은 쉼표로 구분되며, 키는 따옴표로 묶일 수 있습니다(하지만 필수는 아님).

const 객체명 = {
  "속성명": 값,
  "속성명2": 값
};

 

자바스크립트 객체의 실용성

• 객체는 데이터를 구조화하는데 매우 유용하며, 코드 내에서 다양한 데이터 타입을 하나의 변수로 관리할 수 있도록 해 줍니다.

객체의 속성(Property)

1. 속성의 기본 구조:
   • 객체의 속성은 키(key)와 값(value)의 쌍으로 구성되며, 이는 객체가 정보를 저장하는 기본적인 방식입니다.
2. 속성의 역할과 중요성:
   • 객체 내의 속성은 JavaScript에서 데이터를 조직화하고 관리하는 데 중요한 역할을 합니다.
3. 속성 접근 방법:
   • 점 표기법 (Dot notation): 가장 일반적인 속성 접근 방식으로, objectName.propertyName 형태로 사용합니다. 예를 들어, 객체 person의 age 속성에 접근하려면 person.age라고 작성합니다.
   • 대괄호 표기법 (Bracket notation): 속성 이름을 문자열로 명시해야 할 경우나 변수를 사용해야 할 때 유용합니다. objectName["propertyName"] 형태로 사용하며, 예를 들어 person["age"]와 같이 사용할 수 있습니다. 변수를 사용하는 경우 var propName = "age"; person[propName];와 같이 사용할 수 있습니다.
4. 속성의 동적 접근:
   • 속성의 이름이 런타임에 결정되거나, 프로그램의 다른 부분에서 제공될 경우 대괄호 표기법이 특히 유용합니다. 이 방법을 통해 동적으로 속성 이름을 변경하거나 할당할 수 있습니다.
5. 메소드:
   • 객체 내에 정의된 함수를 메소드(method)라고 합니다. 메소드 역시 객체의 속성 중 하나로, 메소드를 호출할 때는 objectName.methodName() 형태로 사용합니다.

const 객체 = {
  속성: "값",
};

객체.속성;  // 값
객체["속성"];  // 값

 

*객체 Object 생성 방법

- 리터럴 표기

- 생성자 함수

- Object.create

* 각 방법은 필요시 구글 서치 또는 MDN 문서 참고

 

Object 클래스의 주요 정적 메소드 요약

1. 속성 정의 관련 메소드:
   • Object.defineProperty(obj, prop, descriptor): 객체에 직접 새 속성을 정의하거나 기존 속성을 수정한 후 그 객체를 반환합니다.
   • Object.defineProperties(obj, props): 여러 속성을 한 번에 정의합니다.
2. 속성 설명자 조회 메소드:
   • Object.getOwnPropertyDescriptor(obj, prop): 객체의 특정 속성에 대한 설명자(descriptor)를 반환합니다.
   • Object.getOwnPropertyDescriptors(obj): 객체의 모든 자체 속성 설명자를 반환합니다.
3. 속성 이름 및 심볼 조회 메소드:
   • Object.getOwnPropertyNames(obj): 객체의 모든 자체 속성의 이름을 배열로 반환합니다.
   • Object.keys(obj): 주어진 객체의 모든 열거 가능한 속성의 이름을 배열로 반환합니다.
   • Object.getOwnPropertySymbols(obj): 객체의 모든 자체 심볼 속성을 배열로 반환합니다.
4. 속성 값 조회 메소드:
   • Object.values(obj): 주어진 객체의 모든 열거 가능한 속성의 값들을 배열로 반환합니다.
5. 객체 비교 메소드:
   • Object.is(value1, value2): 두 값이 동일한지 비교합니다. === 연산자와 유사하지만 NaN과 NaN을 같다고 평가하고 +0과 -0을 다르다고 평가합니다.

샘플 코드 및 설명

// 객체 생성
const object = {
  a: 1,
  b: 2,
};

// Object.defineProperty 사용 예
Object.defineProperty(object, 'c', {
  value: 3,
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(object.c);  // 3

// Object.getOwnPropertyDescriptor 사용 예
const descriptor = Object.getOwnPropertyDescriptor(object, 'a');
console.log(descriptor);  // { value: 1, writable: true, enumerable: true, configurable: true }

// Object.keys 및 Object.values 사용 예
const keys = Object.keys(object);
const values = Object.values(object);
console.log(keys);  // ['a', 'b', 'c']
console.log(values);  // [1, 2, 3]

// Object.is 사용 예
console.log(Object.is(NaN, NaN));  // true, 일반적으로는 false
console.log(Object.is(0, -0));  // false, 일반적으로는 true

// Object.getOwnPropertyNames 사용 예
const propertyNames = Object.getOwnPropertyNames(object);
console.log(propertyNames);  // ['a', 'b', 'c']

 

객체 속성 조작하기

1. 속성 동적 생성: 객체에 새로운 속성을 추가합니다.
2. 속성 수정: 객체의 기존 속성 값을 변경합니다.
3. 속성 삭제: 객체에서 특정 속성을 제거합니다.

// 객체 생성
const person = {
  name: 'John',
  age: 30
};

// 1. 속성 동적 생성
// 'hobby'라는 새로운 속성을 person 객체에 추가
person.hobby = 'reading';
console.log(person);  // { name: 'John', age: 30, hobby: 'reading' }

// 2. 속성 수정
// 'age' 속성의 값을 31로 수정
person.age = 31;
console.log(person);  // { name: 'John', age: 31, hobby: 'reading' }

// 3. 속성 삭제
// 'hobby' 속성을 person 객체에서 삭제
delete person.hobby;
console.log(person);  // { name: 'John', age: 31 }

*객체 속성 나열하기

1. for...in 루프:
   • 객체의 모든 열거 가능한 속성을 순회합니다. 이는 객체가 직접 소유하거나 상속받은 열거 가능한 속성 모두를 포함합니다.
2. Object.keys(obj):
   • 객체 자신이 소유하는 모든 열거 가능한 속성의 이름들을 배열로 반환합니다. 상속받은 속성은 포함하지 않습니다.
3. Object.getOwnPropertyNames(obj):
   • 객체가 소유하는 모든 속성의 이름을 배열로 반환합니다, 여기에는 열거할 수 없는(non-enumerable) 속성도 포함됩니다.

샘플 코드 및 설명

// 객체 정의
const person = {
  name: 'Alice',
  age: 25,
  hasPet: false
};

// 1. for...in 루프 사용 예
for (const key in person) {
  console.log(key);  // 출력: name, age, hasPet
}

// 2. Object.keys 사용 예
const keys = Object.keys(person);
console.log(keys);  // 출력: ['name', 'age', 'hasPet']

// 3. Object.getOwnPropertyNames 사용 예
const propNames = Object.getOwnPropertyNames(person);
console.log(propNames);  // 출력: ['name', 'age', 'hasPet']

// 각 방법은 person 객체의 속성을 나열하는데 사용됩니다.
// for...in 루프는 상속받은 열거 가능한 속성도 순회할 수 있지만, 이 예제에서는 상속받은 속성이 없습니다.
// Object.keys와 Object.getOwnPropertyNames는 객체가 직접 소유한 속성만을 나열합니다.

객체 속성 삭제하기

• delete 연산자 사용: 객체에서 특정 속성을 삭제합니다.
• 반환 값: 속성이 성공적으로 삭제되면 true를, 그렇지 않으면 false를 반환합니다.

샘플 코드 및 설명

// 객체 생성
const person = {
  name: 'Jason',
  age: 25
};

// delete 연산자를 사용하여 'name' 속성 삭제
const result = delete person.name;
console.log(result);  // true 출력, 속성 삭제 성공

// 'name' 속성이 삭제된 후의 객체 상태 출력
console.log(person);  // { age: 25 }

// 이 예에서 'name' 속성은 객체에서 성공적으로 제거되었습니다.
// delete 연산자는 주로 객체에서 동적으로 속성을 관리할 때 사용됩니다.
// 속성을 삭제한 후에는 해당 속성을 더 이상 객체에서 찾을 수 없습니다.

객체 비교

• 객체 비교: 자바스크립트에서 두 객체를 비교할 때, 객체의 참조가 동일한지를 검사합니다. 즉, 두 객체가 메모리 상에서 같은 위치를 가리키는지 확인합니다.
• 동일성 비교 결과: 두 객체가 같은 속성과 값을 가지고 있더라도, 다른 메모리 주소를 가리키면 서로 다르다고 판단합니다(false). 같은 객체를 자기 자신과 비교하면 true입니다.

샘플 코드 및 설명

// 두 개의 서로 다른 객체 생성
const foo = { name: 'apple' };
const bar = { name: 'apple' };

// 두 객체 비교
console.log(foo === bar);  // false 출력, 각각 다른 참조를 가지고 있기 때문

// 같은 객체를 비교
console.log(foo === foo);  // true 출력, 같은 객체의 참조이기 때문

// 이 예제에서 foo와 bar는 같은 속성(name)과 값을('apple') 가지고 있지만,
// foo와 bar는 각각 독립적으로 생성된 서로 다른 객체이므로, 서로 다른 메모리 주소를 가리킵니다.
// 따라서, foo와 bar를 비교하면 false가 출력됩니다.
// 반면, foo를 자기 자신과 비교하면 true가 출력됩니다, 같은 객체를 참조하기 때문입니다.

동일한 객체 참조

• 문제 상황: 두 변수가 동일한 객체를 참조할 때 한 변수를 통한 변경이 다른 변수에도 영향을 미칩니다.
• 핵심 내용: 한 객체에 대한 참조를 공유하는 두 변수가 있을 경우, 한 변수를 통한 객체의 수정은 다른 변수에서도 확인할 수 있습니다.

샘플 코드 및 설명

// 객체 생성 및 변수 할당
const person = { name: 'Jason', age: 25 };

// 두 번째 변수 joy에 person 객체 참조 할당
const joy = person;

// joy를 통해 객체의 'name' 속성 수정
joy.name = 'Joy';

// 두 변수 모두 동일한 객체를 참조하므로 변경 사항이 공유됨
console.log(person);  // 출력: { name: 'Joy', age: 25 }
console.log(joy);     // 출력: { name: 'Joy', age: 25 }

// 이 예에서, person과 joy는 동일한 객체의 메모리 주소를 가리킵니다.
// 따라서, joy를 통해 name 속성을 'Joy'로 변경하면, person을 통해서도 같은 객체의 변경된 상태를 볼 수 있습니다.

*깊은 복사 방법

1. 라이브러리 사용: lodash 라이브러리의 cloneDeep 함수를 사용하여 객체를 깊게 복사합니다.
2. JSON 메서드 사용: JSON.stringify()로 객체를 문자열로 변환한 뒤 JSON.parse()로 다시 객체로 변환하여 깊은 복사를 수행합니다.

샘플 코드 및 설명

// lodash 라이브러리 사용 예
// lodash 라이브러리를 설치해야 사용할 수 있습니다.
// npm install lodash --save
const _ = require('lodash');

const original = {
  name: 'Jason',
  details: {
    age: 25,
    city: 'New York'
  }
};

const deepCopyLodash = _.cloneDeep(original);
deepCopyLodash.details.city = 'Los Angeles';

console.log(original.details.city);  // 'New York' 출력
console.log(deepCopyLodash.details.city);  // 'Los Angeles' 출력
// lodash를 사용한 깊은 복사 후, 복사된 객체를 수정해도 원본 객체는 변경되지 않습니다.

// JSON 메서드 사용 예
const originalJSON = {
  name: 'Jason',
  details: {
    age: 25,
    city: 'New York'
  }
};

const deepCopyJSON = JSON.parse(JSON.stringify(originalJSON));
deepCopyJSON.details.city = 'Los Angeles';

console.log(originalJSON.details.city);  // 'New York' 출력
console.log(deepCopyJSON.details.city);  // 'Los Angeles' 출력
// JSON 메서드를 사용한 깊은 복사 후, 복사된 객체를 수정해도 원본 객체는 변경되지 않습니다.

빌트인 객체 요약

1. 기초 객체: Object, Function, Boolean, Symbol
2. 오류 처리 객체: Error
3. 수치 및 날짜 객체: Number, BigInt, Math, Date
4. 텍스트 처리 객체: RegExp, String
5. 컬렉션 객체:
   • 인덱스 기반 컬렉션: Array
   • 키 기반 컬렉션: Map, Set
6. 구조화된 데이터: JSON
7. 고급 비동기 처리 객체: Promise, Generator, AsyncFunction

샘플 코드 및 설명

// 1. 기초 객체 예제: Object
const person = { name: "Alice", age: 25 };

// 2. 오류 처리 객체 예제: Error
try {
  throw new Error("Something went wrong!");
} catch (e) {
  console.log(e.message);  // 출력: Something went wrong!
}

// 3. 수치 및 날짜 객체 예제: Math와 Date
console.log(Math.sqrt(16));  // 출력: 4
console.log(new Date().getFullYear());  // 출력: 현재 연도

// 4. 텍스트 처리 객체 예제: RegExp와 String
const str = "Hello World!";
console.log(str.replace(/World/, "JavaScript"));  // 출력: Hello JavaScript!

// 5. 컬렉션 객체 예제: Array와 Map
const array = [1, 2, 3];
const map = new Map();
map.set("key", "value");
console.log(array[1]);  // 출력: 2
console.log(map.get("key"));  // 출력: value

// 6. 구조화된 데이터 예제: JSON
const jsonData = JSON.stringify({ key: "value" });
console.log(JSON.parse(jsonData));  // 출력: { key: "value" }

// 7. 고급 비동기 처리 객체 예제: Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise resolved!"), 1000);
});
promise.then((message) => console.log(message));  // 출력: Promise resolved!

Number 객체 요약

1. 기본 사용법:
   • 문자열이나 다른 데이터 타입을 숫자 타입으로 변환할 때 사용합니다.
   • 예: Number('1.2')은 문자열 '1.2'를 숫자 1.2로 변환합니다.
2. 정적 속성:
   • Number.MAX_VALUE: 자바스크립트에서 표현할 수 있는 최대 숫자 값입니다.
   • Number.MAX_SAFE_INTEGER: 안전하게 표현할 수 있는 최대 정수 값입니다.
   • Number.NaN: 'Not a Number'의 특수 값을 나타냅니다.
3. 정적 메소드:
   • Number.isNaN(): 인자가 NaN인지 판별합니다.
   • Number.isFinite(): 인자가 유한한 숫자인지 판별합니다.
   • Number.isInteger(): 인자가 정수인지 판별합니다.
4. 파싱 함수:
   • Number.parseInt(): 문자열을 파싱하여 정수로 반환합니다.
   • Number.parseFloat(): 문자열을 파싱하여 부동 소수점 숫자로 반환합니다.

샘플 코드 및 설명

// Number 객체 기본 사용법
const example = Number('1.2');
console.log(example);  // 출력: 1.2

// Number의 정적 속성 사용 예
console.log(Number.MAX_VALUE);  // 자바스크립트에서 표현 가능한 최대 숫자 값 출력
console.log(Number.NaN);  // NaN 값 출력

// Number의 정적 메소드 사용 예
console.log(Number.isNaN(NaN));  // true 출력
console.log(Number.isFinite(Infinity));  // false 출력, 무한대는 유한한 수가 아님
console.log(Number.isInteger(1.0));  // true 출력, 1.0은 정수로 간주

// Number의 파싱 함수 사용 예
console.log(Number.parseInt('10', 10));  // 문자열 '10'을 10진수 정수로 파싱하여 10 출력
console.log(Number.parseFloat('1.25'));  // 문자열 '1.25'를 부동 소수점 숫자로 파싱하여 1.25 출력

// 이 샘플 코드는 Number 객체를 사용하여 데이터 타입을 변환하고,
// 숫자 관련 여러 작업을 수행하는 방법을 보여줍니다.

String 객체 요약

1. 문자열 생성: 문자열을 생성하는 데 사용됩니다.
2. 속성: length 속성은 문자열의 길이를 반환합니다.
3. 메소드:
   • charAt(): 지정된 위치의 문자를 반환합니다.
   • indexOf(): 지정된 문자열이 처음 등장하는 위치를 반환합니다.
   • toUpperCase(): 문자열을 대문자로 변환합니다.

샘플 코드 및 설명

// 문자열 생성 예제
const greeting = 'Hello, World!';

// length 속성 사용 예제
console.log(greeting.length);  // 출력: 13

// charAt() 메소드 사용 예제
console.log(greeting.charAt(7));  // 출력: W

// indexOf() 메소드 사용 예제
console.log(greeting.indexOf('World'));  // 출력: 7

// toUpperCase() 메소드 사용 예제
console.log(greeting.toUpperCase());  // 출력: HELLO, WORLD!

// 이 코드는 String 객체의 다양한 기능을 사용하는 방법을 보여줍니다.

Math 객체

이 이미지는 자바스크립트에서 수학적 연산을 수행하는 데 사용되는 Math 객체에 대한 개요를 제공합니다. Math 객체는 수학 상수와 정적 메서드를 포함하고 있습니다.

• 상수: PI, E 등
• 메서드:
  • Math.abs(x): 숫자의 절대값 반환
  • Math.pow(x, y): 𝑥x의 𝑦y제곱 반환
  • Math.sqrt(x): 𝑥x의 제곱근 반환
  • Math.ceil(x): 𝑥x보다 크거나 같은 최소 정수 반환
  • Math.floor(x): 𝑥x보다 작거나 같은 최대 정수 반환
  • Math.round(x): 𝑥x를 가장 가까운 정수로 반올림
  • Math.max(x, y, ...), Math.min(x, y, ...): 주어진 숫자들 중 최대값과 최소값 반환
  • Math.random(): 0과 1 사이의 난수 생성

샘플 코드

// Math 객체 사용 예시

// 상수 PI 사용
console.log("PI 값:", Math.PI);

// 절대값 구하기
console.log("절대값:", Math.abs(-123));

// 제곱 계산
console.log("2의 4제곱:", Math.pow(2, 4));

// 제곱근 구하기
console.log("9의 제곱근:", Math.sqrt(9));

// 올림, 내림, 반올림
console.log("1.25 올림:", Math.ceil(1.25));
console.log("1.25 내림:", Math.floor(1.25));
console.log("1.5 반올림:", Math.round(1.5));

// 최대값, 최소값
console.log("최대값:", Math.max(3, 2));
console.log("최소값:", Math.min(3, 2));

// 난수 생성
console.log("난수:", Math.random());

 

각 객체에 대한 상세 기능은 필요에 따라 구글 서치 또는 MDN 사이트 참고

문자열 특징

이 내용은 자바스크립트에서 문자열을 사용할 때의 특징들을 설명합니다.

• 문자열 내에서 이스케이프 문자 사용: 문자열 안에서 줄바꿈을 하고 싶을 때는 이스케이프 문자 \n을 사용합니다.
• 특별한 문자 포함 방법:
  • 이스케이프 문자 \n을 사용하여 줄바꿈 처리.
  • 백틱( )을 사용한 템플릿 리터럴 안에서는 문자 그대로 표현되어 별도의 이스케이프가 필요 없습니다.
• 데이터 형식과 문자열 형태로의 변환:
  • 객체나 배열을 문자열 형태로 변환할 때는 JSON.stringify()를 사용합니다.
  • JSON.parse()를 사용하여 문자열을 JSON 형식의 객체나 배열로 변환합니다.

샘플 코드

// 문자열과 JSON 변환 예시

// 이스케이프 문자를 사용한 줄바꿈
var multilineString = "첫 번째 줄\n두 번째 줄";
console.log("이스케이프 문자 사용:", multilineString);

// 템플릿 리터럴을 사용한 다중 줄 문자열
var templateLiteral = `첫 번째 줄
두 번째 줄`;
console.log("템플릿 리터럴:", templateLiteral);

// JSON.stringify를 사용하여 객체를 문자열로 변환
var myObject = { name: "John", age: 30 };
var jsonString = JSON.stringify(myObject);
console.log("JSON.stringify:", jsonString);

// JSON.parse를 사용하여 문자열을 객체로 변환
var jsonObject = JSON.parse(jsonString);
console.log("JSON.parse:", jsonObject);

JavaScript 정규표현식

JavaScript에서 정규표현식은 문자열 내의 패턴을 검색하고 조작하는 데 사용됩니다. 이들은 매우 강력하며 문자열 검증, 검색 및 치환 작업에 자주 사용됩니다.

정규표현식 생성 방법

1. 리터럴 방식: /pattern/flags
2. 생성자 함수 방식: new RegExp("pattern", "flags")

자주 사용하는 플래그

• g: 전역 검색 (문자열 내의 모든 일치 항목 찾기)
• i: 대소문자 구분 없이 검색
• m: 여러 줄 모드

자주 사용하는 메서드

• test(): 주어진 문자열이 정규표현식에 일치하는지 검사하고, 일치하면 true를 반환합니다.
• exec(): 일치하는 정보를 찾으면 그 정보를 담은 배열을 반환하고, 찾지 못하면 null을 반환합니다.
• match(): 문자열에 사용되며, 정규표현식과 일치하는 모든 결과를 배열로 반환합니다.
• replace(): 문자열에 사용되며, 정규표현식과 일치하는 부분을 다른 문자열로 치환합니다.
• search(): 문자열에 사용되며, 정규표현식과 일치하는 부분의 인덱스를 반환합니다.

샘플 코드

// 정규표현식 사용 예시

// 이메일 검증 정규표현식
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// test 메서드
const email = "example@example.com";
console.log("이메일 유효성 검사:", emailPattern.test(email)); // true

// exec 메서드
const data = "The quick brown fox jumps over the lazy dog.";
const regex = /quick/;
console.log("exec 사용:", regex.exec(data)); // ["quick", index: 4, input: "The quick brown fox jumps over the lazy dog.", groups: undefined]

// match 메서드
const numbers = "123 456 789";
const digitPattern = /\d+/g;
console.log("match 사용:", numbers.match(digitPattern)); // ["123", "456", "789"]

// replace 메서드
const string = "Visit Microsoft!";
const newString = string.replace(/Microsoft/, "W3Schools");
console.log("replace 사용:", newString); // "Visit W3Schools!"

// search 메서드
const position = string.search(/Microsoft/);
console.log("search 사용:", position); // 6

 

*JavaScript 컬렉션 객체

JavaScript의 컬렉션 객체는 데이터를 효과적으로 관리하고 조작하기 위해 설계된 구조입니다. 주요 컬렉션 유형으로는 Map, Set, WeakMap, WeakSet 등이 있습니다. 이들은 각각 고유한 특성과 사용 방법을 가지고 있으며, 일반적인 객체와 배열에서 제공하지 않는 추가 기능과 성능 이점을 제공합니다.

Map

Map 객체는 키-값 쌍을 저장하며, 키에는 다양한 타입의 값을 사용할 수 있습니다.

• set(key, value): 키-값 쌍을 Map에 추가합니다.
• get(key): 지정된 키와 연관된 값을 반환합니다.
• has(key): Map이 지정된 키를 가지고 있는지 여부를 반환합니다.
• delete(key): 지정된 키와 관련된 요소를 삭제합니다.
• clear(): Map의 모든 요소를 삭제합니다.
• size: Map에 있는 요소의 수를 반환합니다.

Set

Set 객체는 값의 집합을 나타내며 중복을 허용하지 않습니다.

• add(value): Set에 값을 추가합니다.
• has(value): Set이 특정 값을 포함하고 있는지 확인합니다.
• delete(value): 지정된 값을 Set에서 제거합니다.
• clear(): Set의 모든 요소를 삭제합니다.
• size: Set에 있는 요소의 수를 반환합니다.

샘플 코드

// Map 사용 예시
const map = new Map();
map.set('apple', 5);
map.set('banana', 2);
map.set('orange', 8);

console.log("바나나의 수량:", map.get('banana')); // 2
console.log("맵에 'apple'이 있는가?:", map.has('apple')); // true
map.delete('apple');
console.log("맵 크기:", map.size); // 2
map.clear();
console.log("맵이 비었는가?:", map.size); // 0

// Set 사용 예시
const set = new Set();
set.add('apple');
set.add('banana');
set.add('apple'); // 중복 추가는 무시됨

console.log("셋에 'apple'이 있는가?:", set.has('apple')); // true
set.delete('apple');
console.log("셋 크기:", set.size); // 1
set.clear();
console.log("셋이 비었는가?:", set.size); // 0

*JavaScript에서의 Indexed Collections

JavaScript에서 indexed collections는 주로 배열(Array) 형태로 사용됩니다. 배열은 데이터를 순차적인 인덱스로 관리하는 선형 데이터 구조입니다. 배열의 각 요소는 정수 인덱스로 접근할 수 있으며, 배열은 다양한 데이터 타입의 요소를 포함할 수 있습니다.

주요 메서드 및 속성

• push(element1, ..., elementN): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
• pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.
• unshift(element1, ..., elementN): 배열의 시작에 하나 이상의 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
• slice(start, end): 배열의 일부분을 새 배열로 반환합니다.
• splice(start, deleteCount, item1, ..., itemN): 배열의 특정 위치에 요소를 추가하거나 제거합니다.
• forEach(callback): 배열의 각 요소에 대해 주어진 함수를 실행합니다.
• map(callback): 배열의 모든 요소에 함수를 적용하고, 결과로 새 배열을 생성합니다.
• filter(callback): 특정 조건을 만족하는 모든 요소로 새 배열을 생성합니다.
• find(callback): 조건을 만족하는 첫 번째 요소를 반환합니다.
• reduce(callback, initialValue): 배열의 각 요소에 대해 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

샘플 코드

// Indexed Collections (Array) 사용 예시

// 배열 생성 및 요소 추가
const fruits = ['apple', 'banana'];
fruits.push('orange'); // ['apple', 'banana', 'orange']
console.log("요소 추가 후:", fruits);

// 요소 제거
const lastFruit = fruits.pop(); // 'orange'
console.log("마지막 요소 제거 후:", fruits);

// 배열 앞에 요소 추가
fruits.unshift('strawberry'); // ['strawberry', 'apple', 'banana']
console.log("앞에 요소 추가 후:", fruits);

// 배열의 일부분을 새로운 배열로 만들기
const firstTwo = fruits.slice(0, 2); // ['strawberry', 'apple']
console.log("처음 두 요소:", firstTwo);

// 배열 내 요소 수정 및 제거
fruits.splice(1, 1, 'mango'); // ['strawberry', 'mango']
console.log("요소 교체 후:", fruits);

// 배열 순회
fruits.forEach(fruit => console.log("요소 순회:", fruit));

// 배열의 요소를 변형하여 새 배열 생성
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log("대문자 변환된 배열:", upperFruits);

// 조건에 맞는 요소 필터링
const longNameFruits = fruits.filter(fruit => fruit.length > 6);
console.log("긴 이름의 과일:", longNameFruits);

// 조건을 만족하는 첫 번째 요소 찾기
const foundFruit = fruits.find(fruit => fruit.startsWith('s'));
console.log("s로 시작하는 과일:", foundFruit);

// 배열 요소를 사용한 값 계산
const totalLength = fruits.reduce((acc, fruit) => acc + fruit.length, 0);
console.log("과일 이름의 총 길이:", totalLength);

 

*JavaScript에서의 JSON 객체

**JSON (JavaScript Object Notation)**은 데이터를 저장하거나 전송할 때 사용되는 경량의 데이터 형식입니다. JavaScript에서 JSON은 문자열 형식으로 객체와 배열을 표현하는 데 사용되며, 이 형식은 다른 프로그래밍 언어와의 통신에도 매우 효과적입니다.

JSON의 주요 특징

• JSON은 순수한 텍스트입니다.
• JSON 형식은 JavaScript 객체의 리터럴 형식과 매우 유사합니다.
• JSON은 자바스크립트 내장 객체인 JSON을 통해 직렬화(serialize) 및 역직렬화(deserialize)가 가능합니다.

직렬화와 역직렬화

• 직렬화(Serialization): 객체나 배열 등의 메모리 구조를 문자열 형태로 변환하는 과정입니다. 이는 데이터를 파일에 저장하거나 네트워크를 통해 전송할 때 사용됩니다.
• 역직렬화(Deserialization): 직렬화된 문자열을 다시 객체나 배열 등의 메모리 구조로 변환하는 과정입니다.

*실무에서 자주 사용하는 메서드

1. JSON.stringify(value, replacer?, space?)
   • JavaScript 값이나 객체를 JSON 문자열로 변환합니다.
   • 선택적인 replacer 함수를 사용하여 결과에 포함될 값들을 필터링하거나 변형할 수 있습니다.
   • space 인자를 사용하여 출력된 JSON 문자열의 가독성을 높일 수 있습니다.
2. JSON.parse(text, reviver?)
   • JSON 문자열을 JavaScript 객체로 파싱합니다.
   • 선택적인 reviver 함수를 사용하여 반환되는 객체의 키-값을 변형할 수 있습니다.

샘플 코드

// 객체 직렬화
const person = {
  name: "John Doe",
  age: 30,
  isAdmin: true
};
const jsonString = JSON.stringify(person, null, 2); // pretty print with 2 spaces
console.log("직렬화된 JSON 문자열:", jsonString);
// 결과: {
//   "name": "John Doe",
//   "age": 30,
//   "isAdmin": true
// }

// 배열 직렬화
const fruits = ["apple", "banana", "cherry"];
const fruitsString = JSON.stringify(fruits);
console.log("직렬화된 배열:", fruitsString);
// 결과: ["apple","banana","cherry"]

// JSON 문자열 역직렬화
const jsonStringParsed = JSON.parse(jsonString);
console.log("역직렬화된 객체:", jsonStringParsed);
// 결과: { name: 'John Doe', age: 30, isAdmin: true }

// 역직렬화에 reviver 함수 사용
const jsonStringWithDate = '{"date":"2020-01-01"}';
const dataWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
  if (key === 'date') return new Date(value);
  return value;
});
console.log("날짜를 포함한 객체 역직렬화:", dataWithDate);
// 결과: { date: 2020-01-01T00:00:00.000Z }

 

JavaScript의 Intl 객체

Intl 객체는 ECMAScript Internationalization API의 일부로, 다양한 언어의 데이터 포맷을 제공하는 객체입니다. 이 객체는 날짜, 시간, 숫자, 통화 등을 다양한 로케일에 맞게 형식화할 수 있도록 도와줍니다. 이는 국제화(i18n)에 필수적인 도구로, 웹 애플리케이션을 여러 나라와 문화권에서 사용할 때 특히 유용합니다.

자주 사용하는 Intl 객체의 메서드와 속성

1. Intl.DateTimeFormat: 날짜와 시간을 형식화하기 위한 생성자입니다.
2. Intl.NumberFormat: 숫자를 다양한 포맷으로 형식화하는 데 사용됩니다.
3. Intl.Collator: 문자열 비교에 사용되며, 알파벳 순으로 정렬할 때 유용합니다.

샘플 코드 및 설명

// 날짜 형식화
const date = new Date();
const dateFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric', month: 'long', day: 'numeric'
});
console.log("날짜 형식화 (en-US):", dateFormatter.format(date));
// 결과: "날짜 형식화 (en-US): October 2, 2023"

// 숫자 형식화
const numberFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});
console.log("숫자 형식화 (독일, 유로):", numberFormatter.format(123456.789));
// 결과: "숫자 형식화 (독일, 유로): 123.456,79 €"

// 문자열 비교
const collator = new Intl.Collator('fr', { sensitivity: 'base' });
console.log("문자열 비교 ('e' vs 'é'):", collator.compare('e', 'é'));
// 결과: "문자열 비교 ('e' vs 'é'): 0" (0은 두 문자열이 동등하다는 의미)

 

Map 과 json 차이점

Map과 JSON은 서로 다른 목적과 사용법을 가지고 있습니다. Map은 프로그램 내부에서 효율적으로 데이터를 관리하고 조작할 때 사용하고, JSON은 데이터를 저장하거나 다른 시스템과 교환할 때 주로 사용합니다. 따라서 상황에 따라 적절한 도구를 선택하는 것이 중요합니다.

 

 

느낀점

어떻게 동작하는지 어디에 사용되는지 개념 이해 후 필요시 찾아서 사용할 수 있도록 하기.