JavaScript (60) 썸네일형 리스트형 프로퍼티 순서 프로퍼티가 어떤 순서를 따라야 하는지 예시 코드와 함께 정리해 보록 하겠습니다. const person = { "first name": "Lee", age: 30, hobbies: ["Sports", "Cooking"], }; console.log(person); person 이라는 객체를 콘솔 로그로 확인해보겠습니다. 콘솔을 확장하지 않고 보면 코드의 순서대로 확인을 할 수 있습니다. 여기서 콘솔을 확장하여 보면 자동으로 프로퍼티, 즉 key-value 쌍이 정렬된 것을 할 수 있습니다. 정렬되는 순서를 아래 예시 코드와 함께 조금 더 살펴보겠습니다. const numbers = { 5: "true", 1: "hello" }; console.log(numbers); // {1: 'hello', 5: '.. key 이름 / 프로퍼티 접근 / 대괄호표기법 객체의 key의 이름을 정할 때 변수의 이름을 정할 때처럼 이름을 지어줄 수 있습니다. 변수의 이름으로 지정할 수 있는 단어라면 key의 이름으로 사용할 수 있는 것입니다. 하지만 key는 변수보다 유연한 특성을 가지기 때문에 변수에 사용할 수 있는 이름을 key의 이름으로 사용할 수 있으나, key의 이름을 모두 변수에 사용할 수는 없습니다. 예시 코드와 함께 살펴보겠습니다. 아래 예시 코드는 key의 이름으로 2개의 단어를 주었을 때 오류가 발생한 상황입니다. key의 이름을 2개의 단어로 지정하면 JavaScript에서는 인식을 할 수 없게 됩니다. 2개의 단어가 어떻게 결합되는지 파악하려 하지만 처음 나와있는 first가 연산자도 아니고 키워드도 아니기 때문에 first가 name에 대해 어떤 작.. 프로퍼티 추가 / 삭제 객체의 프로퍼티를 추가와 삭제하는 방법에 대해 예시 코드와 함께 정리해보도록 하겠습니다. 아래 예시 코드는 isAdmin 프로퍼티를 추가하는 상황입니다. const person = { name: "SH", age: 28, hobbies: ["Sports", "Cooking"], }; person.isAdmin = true; console.log(person); // {name: 'SH', age: 28, hobbies: Array(2), isAdmin: true} 출력 점 표기법을 이용해 추가할 프로퍼티에 값만 할당해주게 되면 해당 객체에 추가가 됩니다. 아래의 예시 코드들은 age 프로퍼티를 삭제하고 싶은 상황입니다. const person = { name: "SH", age: 28, hobbies: .. Map Map의 사용법을 예시 코드와 함께 정리해보도록 하겠습니다. JavaScript의 주요 이터러블(배열, Set, Map) JavaScript에는 배열, Set, Map라는 3개의 주요 이터러블 데이터 구조가 있습니다. 하나씩 정리해보도록 하겠습니다. 배열 JavScript의 주요 이터러블 중 가장 중요한 것은 가장 자주 작업하게 되는 구조 nicehyun12.tistory.com Map 객체가 다른 곳에서 사용이 되거나 복사되어 쓰이는 경우 객체 자체에 추가적인 정보를 담고 싶지 않을 수 있습니다. 객체에 몇 가지 정보를 추가하고 싶지만 정보를 객체에 병합하고 싶지 않은 경우 Map을 사용하면 유용합니다. const personData = new Map(); Map은 항상 new를 사용하여 생성해주며 위.. Set Set의 사용법을 예시 코드와 함께 정리해보도록 하겠습니다. JavaScript의 주요 이터러블(배열, Set, Map) JavaScript에는 배열, Set, Map라는 3개의 주요 이터러블 데이터 구조가 있습니다. 하나씩 정리해보도록 하겠습니다. 배열 JavScript의 주요 이터러블 중 가장 중요한 것은 가장 자주 작업하게 되는 구조 nicehyun12.tistory.com Set const ids = new Set(); Set은 항상 new를 사용하여 생성해주며 위와 같이 사용할 경우 빈 Set이 생성되게 됩니다. const ids = new Set([1, 2, 3]); 위와 같이 기존의 이터러블을 전달하여 Set을 초기화시킬 수도 있습니다. 어떠한 이터러블이던지 전달이 가능합니다. (배열, 또 .. JavaScript의 주요 이터러블(배열, Set, Map) JavaScript에는 배열, Set, Map라는 3개의 주요 이터러블 데이터 구조가 있습니다. 하나씩 정리해보도록 하겠습니다. 배열 JavScript의 주요 이터러블 중 가장 중요한 것은 가장 자주 작업하게 되는 구조인 배열입니다. 데이터의 목록 또는 연결된 데이터를 저장할 때 주로 배열에 저장합니다. 배열은 중첩 데이터를 가질 수 있는데 어떤 타입, 길이든 저장이 가능합니다. 주요 특징으로는 많은 특수한 메서드들이 사용 가능하며 요소의 순서가 보장된다는 것입니다. 즉 순서가 갑자기 바뀌지 않고 중복도 허용됩니다. (예를 들어, 배열에 같은 숫자가 2개가 들어갈 수 있습니다.) 또한 0부터 시작하는 인덱스를 사용하여 요소에 접근도 가능합니다. Set Set은 데이터 구조로 어떤 길이의 중첩 데이터도 저.. 배열 구조 분해(비구조화할당) 배열을 사용하기를 원하지 않고 배열 안의 각 요소를 개별 값으로 사용하고 싶은 경우가 있을 수 있습니다. 예시 코드와 함께 배열 안 요소를 분리하여 사용하는 방법을 정리해보도록 하겠습니다. const nameData = ["Lee", "SH"]; const firstName = nameData[0]; const lastName = nameData[1]; 인덱스로 배열의 각 요소에 접근하여 상수에 값을 할당할 수도 있지만 아래의 방법을 사용하시면 보다 간편하게 값을 분리하여 할당할 수 있습니다. const nameData = ["Lee", "SH"]; const [firstName, lastName] = nameData; console.log(firstName, lastName); // Lee SH 출력 .. Spread Operator - 전개 연산자 전개 연산자(Spread Operator)를 사용하면 배열의 모든 요소를 꺼내 개별 요소의 리스트로 변환해 줍니다. 예시 코드와 함께 다양한 사용법을 정리해보도록 하겠습니다. const fruits = ["apple", "banana", "melon", "cherry"]; const copiedFruits = [fruits]; console.log(fruits); console.log(copiedFruits); 원본 배열을 복사한 배열을 담을 배열 안에 넣어주게 되면 위와 같은 결과가 나오게 됩니다. 즉 배열 안에 배열이 들어가 중첩 배열이 되는 것입니다. const fruits = ["apple", "banana", "melon", "cherry"]; const copiedFruits = [...fru.. 이전 1 2 3 4 5 6 7 8 다음
