JavaScript/객체12

• 

  [JavaScript]객체의 값으로 키를 가져오는 방법 객체의 값으로 키를 가져오는 방법 JavaScript에서 객체의 프로퍼티는 Key-Value 쌍 구조로 이루어진 데이터 집합입니다. 예를 들어, Person이라는 객체의 name 프로퍼티의 Key는 name이고 Value는 'Hong Gil Dong'입니다. const Person = { name: 'Hong Gil Dong', // Key: name, Value: '홍길동' age: 20, // Key: age, Value: 20 gender: 'male' // Key: gender, Value: 'male' }; 객체의 키에 해당하는 값은 점(.) 표기법 또는 대괄호([]) 표기법을 사용하여 가져올 수 있지만, 값에 해당하는 키를 가져오는 방법은 쉽지 않습니다. 값에 해당하는 키를 가져오려면, Obj.. JavaScript/객체 2022. 10. 12.

• 

  [JavaScript]객체의 프로퍼티를 제거하는 방법 객체의 프로퍼티를 제거하는 방법 JavaScript에서 더 이상 사용되지 않는 객체의 프로퍼티를 제거해야 하는 상황이 발생할 수 있습니다. 일반적으로 객체에 존재하지 않는 프로퍼티를 접근하면, undefined를 반환합니다. const Person = { name: '홍길동', age: 20, address: '서울' }; console.log(Person.email); // undefined 하지만, undefined로 설정된 프로퍼티도 undefined를 반환하므로 점(.) 표기법 또는 대괄호([]) 표기법으로 프로퍼티가 존재하는지 체크하는 방법은 좋은 방법이 아닙니다. const Person = { name: '홍길동', age: 20, address: '서울', home: undefined }; .. JavaScript/객체 2022. 10. 6.

• 

  [JavaScript]객체의 키 이름 변경하는 방법 객체의 키 이름 변경하는 방법 이번 포스팅은 JavaScript에서 객체의 키 이름을 변경하는 몇 가지 방법을 소개합니다. 방법 1. 새로운 키 추가 후 기존 키 제거 객체의 키 이름을 변경하는 기본적인 방법은 기존 키를 새로운 키에 할당하고 기존 키를 제거하는 것입니다. 다음 예제는 Person 객체의 Money 프로퍼티를 salary 프로퍼티에 할당 후 delete 연산자를 사용하여 money 프로퍼티를 제거합니다. const Person = { name: '둘리', age: 20, money: 20000 }; // 이름 변경 전 console.log(Person); // {name: '둘리', age: 20, money: 20000} // money 프로퍼티를 salary 프로퍼티에 할당 Perso.. JavaScript/객체 2022. 10. 6.

• 

  [JavaScript]객체의 길이를 구하는 방법 객체의 길이를 구하는 방법 JavaScript에서 객체는 배열과 달리 연속적인 데이터의 집합이 아니므로 길이를 구할 수 없습니다. 일반적으로 객체의 길이를 필요한 상황이 없으며, 객체의 프로퍼티로 함수가 할당될 수 있기 때문입니다. 이러한 이유로 객체는 length 프로퍼티를 가지고 있지 않습니다. 다음 예제는 문자열, 배열, 객체에서 length 프로퍼티를 호출합니다. const strValue = 'Hello'; const numArray = [0, 1, 2, 3]; const obj = {one: 1, two: 2, three: 3}; console.log(strValue.length); // 5 console.log(numArray.length); // 4 console.log(obj.length.. JavaScript/객체 2022. 10. 2.

• 

  [JavaScript]객체 구조 분해(Object Destructuring) 객체 구조 분해(Object Destructuring) Destructuring이라는 단어는 무언가를 파괴 또는 축소하는 것을 의미합니다. JavaScript의 구조 분해는 배열이나 객체에 할당된 데이터에서 특정 값 또는 여러 값을 추출하는 방법입니다. 객체의 프로퍼티를 가져오는 일반적인 방법은 점 표기법 또는 대괄호 표기법을 사용하여 동일한 프로퍼티 이름을 작성하는 것입니다. const person = { name: '둘리', age: 20 }; // 점 표기법 const name1 = person.name; const age1 = person.age; // 대괄호 표기법 const name2 = person['name']; const age2 = person['age']; 구조 분해를 사용하면, 다음.. JavaScript/객체 2022. 9. 22.

• 

  [JavaScript]유사 배열 객체(Array-like Objects) 배열의 length 프로퍼티 유사 배열 객체를 설명하기 전에 배열의 length 프로퍼티에 대해 살펴봅시다. length 프로퍼티는 배열의 길이를 제공하지만, 몇 가지 트릭이 존재합니다. 다음 예제를 통해 length 프로퍼티가 어떻게 계산되는지 살펴봅시다. let arr = []; console.log('arr.length: ' + arr.length); arr[0] = 0; arr[1] = 1; console.log('arr.length: ' + arr.length); arr[10] = 10; console.log('arr.length: ' + arr.length); 실행 결과 배열의 length 프로퍼티는 배열 요소의 개수가 아닌 맨 마지막 인덱스에 1을 더한 값을 반환합니다. 2~9번째 인덱스를 .. JavaScript/객체 2022. 6. 29.

• 

  [JavaScript]동적으로 프로퍼티 추가 이번 포스팅은 JavaScript에서 객체의 프로퍼티를 동적으로 추가하는 방법을 소개합니다. Computed Property Names 계산된 프로퍼티 이름(Computed Property Names)은 자바스크립트 객체 프로퍼티 이름을 동적으로 설정할 수 있도록 해주는 ES6의 기능입니다. 유효한 값을 반환하는 변수 또는 함수를 대괄호 안에 작성하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다. 다음 예제는 age라는 변수를 정의 및 선언하고 객체의 대괄호에 설정합니다. const age = 'age'; const personObject = { name: 'Bob', [age]: 30 } console.log(personObject); console.log(personObject.age); conso.. JavaScript/객체 2022. 6. 24.

• 

  [JavaScript]Map 객체 정렬하는 방법 Map이란? Map은 Key-Value 형식의 컬렉션입니다. let mapObj = new Map([['key', 'Value1'], [2, 2], [new Date(), 'Value3']]); for(let key of mapObj.keys()) { console.log(key); // key, 2, 3 } 객체와 다르게 모든 타입을 키로 사용할 수 있으며, 객체에서 사용할 수 없는 유용한 기능들이 많습니다. 이번 포스팅에서는 Map 컬렉션 정렬 방법을 소개합니다. 목차 Map 객체와 일반 객체(Object) 차이점 Map 객체 정렬하는 방법 Map 객체와 일반 객체(Object) 비교 Map 객체는 일반 객체와 몇 가지 차이점을 제외하고는 일반 객체와 유사한 데이터 구조를 갖습니다. 1. get(),.. JavaScript/객체 2022. 1. 3.

• 

  [JavaScript]프로토타입(Prototype)이란? 객체(Object) JavaScript의 프로토타입을 설명하기 전에 객체에 대해 살펴봅시다. JavaScript는 배열, 문자열 심지어 함수도 객체로 간주합니다. 다음 예제는 배열 생성 후 요소 추가, 삭제 그리고 요소의 개수를 출력합니다. const array = [1, 2, 3]; array.push(4); console.log(array); console.log(array.length); array.pop(); console.log(array); 실행 결과 array라는 변수를 대괄호로 초기화했으므로 array는 배열로 정의됩니다. 따라서 push()와 pop() 함수 그리고 length 프로퍼티를 사용할 수 있습니다. 그렇다면, 변수를 빈 객체로 초기화 후 push() 함수를 사용하면 어떻게 동작.. JavaScript/객체 2021. 12. 27.

• 

  [JavaScript]Date 객체 유효성 체크 이번 포스팅에서는 JavaScript에서 Date 객체가 유효한 값을 가지는지 체크하는 방법을 소개합니다. 목차 isNaN() 함수와 instanceof 연산자 isFinite() 함수와 instanceof 연산자 isNaN() 함수와 instanceof 연산자 instanceof 연산자와 isNaN() 함수를 같이 사용하여 Date 객체의 유효성을 체크할 수 있습니다. instanceof 연산자는 객체의 타입을 확인할 수 있는 연산자로 boolean 값을 반환합니다. 다음은 JavaScript의 객체의 타입을 instanceof 연산자로 확인하는 예제입니다. new Date() instanceof Date // true new Array() instanceof Array // true new Strin.. JavaScript/객체 2021. 12. 23.

• 

  [JavaScript]Date와 new Date 차이점 이번 포스팅에서는 Date, Date(), new Date()의 차이점을 소개합니다. 목차 Date Date() new Date() Date ECMAScript의 타입에는 Date 타입이 존재하지 않으며, 아래 8개의 타입이 존재합니다. undefined null boolean string symbol number bigint object 값의 타입을 반환하는 typeof 연산자는 값의 정확한 타입을 반환하지 않는 문제가 있습니다. typeof 연산자로 null의 타입을 확인하면 'object'가 반환되지만, instanceof 연산자로 null 타입이 Object인지 확인하면 false가 반환됩니다. typeof null // 'object' null instanceof Object // false E.. JavaScript/객체 2021. 12. 22.

• 

  [JavaScript]객체 속성(writable, enumerable, configurable) 속성의 본질적인 속성 설명자 JavaScript의 객체는 다음과 같이 : 쌍으로 이루어진 존재입니다. const userInfo = { name: 'Kang JaeSeong', age: 30, address: 'Busan' } name이라는 key는 'Kang JaeSeong' value와 매핑되며, age라는 key는 30이라는 value와 매핑됩니다. Object.getOwnPropertyDescriptor() 함수를 사용하면, 객체의 속성에 대한 모든 설명을 확인할 수 있습니다. 다음은 userInfo 객체의 name 속성에 대한 설명자입니다. console.log(Object.getOwnPropertyDescriptor(userInfo, 'name')); 실행 결과 속성 설명자에 value, wr.. JavaScript/객체 2021. 12. 7.