067_자바스크립트 객체 수정 제한하기 [적용] 객체의 깊은 계층까지 수정을 제한하고 싶을 때 [문법] 메소드 의미 반환 Object.freeze(객체) 객체의 수정을 제한 객체 Object.isFrozen(객체) 객체의 수정 제한 확인 진리값 [내용] 객체는 const도 속성의 추가, 삭제, 변경이 가능하다. const object1 = { id: 10, name: '사자' }; object1.id = 12; // 속성 변경 가능 object1.address = '서울'; // 속성 추가 가능 속성의 추가, 삭제, 변경의 제한은 Object.freeze()를 사용한다. 오류 검사 설정은 'use strict'*를 사용한다. *ESS에서 추가된 기능으로 이전 버전에서는 무시했던 에러 부분의 관리를 도와주..

066_자바스크립트 객체 요소 분할 대입(비구조화 할당)하기 [적용] 객체의 데이터를 정리하여 대입하고 싶을 때 객체의 일부 데이터를 추출하여 사용하고 싶을 때 [문법] 메소드 의미 { 변수1, 변수2, ... } = 객체 객체의 데이터를 각 변수에 대입 [내용] 객체에서 변수, 변수2와 같은 이름의 키 데이터를 추출하여 변수에 대입하는 분할 대입에 대해 알아봅시다. const userData1 = { id: 1, name: '사자', age: 26 }; const { id, name, age } = userData1; console.log(id); // 결과: 1 (userData1.id값) console.log(name); // 결과: 사자 (userData1.name값) console.log(age..

065_자바스크립트 객체 요소 값 확인하기 [적용] API response의 데이터를 확인하고 싶을 때 [문법] 메소드 의미 반환 Object.keys(객체) 객체 각 키의 배열 배열 Object.values(객체) 객체 각 데이터의 베열 배열 Object.entries(객체) 객체 각 속성(Key, Value)의 배열 배열 [내용] 객체 각 속성(Perperty)의 루프 처리 방법을 확인해 보자. 해당 메소드를 통해 키, 데이터, 속성을 나열하는 배열을 만들 수 있다. // 개인의 정보 데이터 객체 const userData = { id: 1, name: '사자', age: 26 } // 키를 기준으로 루프 처리 console.log(Object.keys(userData); // 결과: ['id', '..

064_자바스크립트 객체 속성(Property) 확인하기 [적용] API response의 특정 데이터를 확인하고 싶을 때 지정한 데이터가 객체에 존재하지 않아서 처리 작업을 취소하고 싶을 때 [문법] 메소드 의미 반환 객체.hasOwnProperty(키) 데이터 유무 확인 진리값 [문법] 구문 의미 키 in 객체 데이터의 유무 여부 반환 [내용] 해당 메소드는 객체 내부에서 지정한 데이터의 존재 여부를 확인한다. 샘플을 확인해 보자. // 개인의 정보 데이터 객체 const userData = { id: 1, name: '사자', age: 26 }; console.log(userData.hasOwnProperty('id')); // 결과: true console.log(userData.hasOwnPro..

063_자바스크립트 객체 복사하기 [적용] 데이터를 복사하고 싶을 때 [문법] 구문 의미 [...복사대상객체] 대상 객체의 각 요소를 분할 대입(복사) [문법] 메소드 의미 반환 Object.assign({}, 복사대상객체) 객체를 복사 객체 const object1 = { result: true, members: [ { id: 1, name: '여우' }, { id: 2, name: '호랑이' }, { id: 3, name: '사자' } ] }; // 객체를 복사 const copiedObject1 = Object.assign({}, object1); console.log(copiedObject1); // 객체가 복사됨 // { // result:true, // members: [ // { id: 1,..

062_자바스크립트 객체 선언, 수정, 확인하기 [적용] 객체의 속성을 변경하고 싶을 때 [문법] 구문 의미 {} 객체를 초기화 {키: 값, 키: 값, ...} 객체를 초기화 객체[] 깂을 가져오기 객체.키 값을 가져오기 객체[키] = 값 값을 변경하기 객체.키 = 값 값을 변경하기 [내용] 넣고 싶은 데이터를 {}로 감싸서 객체를 정의하며, 데이터 타입의 제한은 없다. 키(Key)를 사용해 객체의 데이트를 불러오거나 값을 변경할 수 있다. const object = {}; // 빈 객체 // 개인의 정보 데이터 객체 const person = { id: 1, name: '거북이', age: 28 }; // 값 확인하기 console.log(person.id); // 결과: 1 console.log(pe..

061_자바스크립트 다양한 데이터 타입을 가진 객체 사용하기 [적용] 다양한 데이터를 하나의 객체로 만들고 싶을 때 연관 배열*을 사용하고 싶을때 * 연관 배열(Assocative Array)은 자료 고조의 하나로, 키 하나의 값 하나가 연괸되어 있으며 키를 통해 연관되는 값을 얻을 수 있다. 연상 배열이나 결합형 배열, 맵(Map), 사전(Dictionary)으로 부르기도 한다. [내용] 객체(Object)는 자바스크립트의 기본 데이터 타입 중 하나로 여러 가지 속성(Property)을 가질 수 있으며, 속성은 키와 값의 조합으로 만들어진다. 3개의 속성을 가지는 다음 객체의 샘플을 확인해 보자. // 개인의 정보 데이터 객체 const person = { id: 1, name: '거북이', age: ..

060_자바스크립트 배열 섞기(셔플) [적용] 게임에서 요소의 값을 섞을 때 [내용] 배열을 빠르면서도 고르게 섞기 위해서는 피셔 예이츠(Fisher Yates) 알고리즘이 사용된다. 다음의 샘플을 확인해보자. const array = [1, 2, 3, 4, 5]; const arrayLength = array.length; // 피셔 예이츠 알고리즘 for (let i = arrayLength -1; i>=0; i--) { const randomIndex = Math.floor(Math.random() * (i + 1)); [array[i], array[randomIndex]] = [array[randomIndex], array[i]]; } console.log(array); // 결과: [4, 5, ..

059_자바스크립트 배열 요소의 개별 변수에 분할 대입하기 [적용] 배열의 요소를 변경하고 싶을 때 [문법] 메소드 의미 [변수1, 변수2, 변수3] = [값1, 값2, 값3] 각 변수에 값을 대입 [내용] 좌변 배열의 각 변수에 우변 배열의 값을 대입하는 방법을 '분할 대입'이라고 한다. 다음 샘플을 확인해 보자. let a; let b; let c; [a, b, c] = [1, 2, 3] console.log(a, b, c); // 결과: 1, 2, 3 분할 대입은 다음과 같이 배열 내 값의 변경이나 요소의 위치를 변경할 수 있다. const array = ['곰', '여우']; [array[0], array[1]] = [array[1], array[0]]; console.log(array); // ..

058_자바스크립트 유사 배열 객체를 배열(Array)로 변환하기 [적용] 문자열과 유사 배열ArrayLike을 배열로 변환하고 싶을 때 반복 가능Iterable 한 객체를 배열로 변환하고 싶을 때 [문법] 구문 의미 [...변환대상] 배열로 변환 [내용] 스프레드(Spread) 연산자 (...)를 사용하면 유사 배열 객체를 배열로 변환할 수 있다. 유사 배열의 특징은 다음과 같다. length 속성으로 크기를 확인할 수 있다. 인덱스가 부여된 요소를 가진다. 샘플을 확인해보자. document.querySelectorAll(selector)는 인수 selector와 일치하는 요소 데이터를 전부 불러오지만, 반환값은 NodeListOf 객체다. length와 인덱스가 부여된 요소를 가진다. 따라서 Nod..