[React] JavaScript 기초_2 (객체/배열/반복문/배열내장함수)

[React] JavaScript 기초_2 (객체/배열/반복문/배열내장함수)

2023. 4. 2. 14:31ㆍ개발공부 기강잡자/React | JavaScript | NodeJS

<Udemy 리액트 챌린지 1주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 1주차 미션으로 '섹션 2 JavaScript 기초'를 수강한 내용을 마저 정리해보도록 하겠습니다~!👍

객체 Object

Non-Primitive Type (비원시 타입 자료형)
→ 여러개의 데이터를 한번에 저장가능!

객체 생성 방법 1

let person = new Object();

객체 생성 방법 2 : 객체 리터럴 방식

let person = {};

`객체의 format 👉 Key:Value`

let person = {
	key1 : "value1",  // 객체 프로퍼티
	key2 : "value2",
	key3 : true,
	key4 : function () {}
};

Key로 객체의 프로퍼티 값에 접근할 수 있다.
모든 자료형을 Value로 사용 가능하다

프로퍼티에 접근하는 방법

점표기법
객체이름.프로퍼티이름 으로 접근
console.log(person.key1);
괄호표기법
객체이름[”프로퍼티명”] → * 프로퍼티명을 쌍따옴표를 사용해서 문자열로 넣어줘야함console.log(person[”key1”]);
```
function getPropertyValue(key){  // key이름을 파라미터로 받아 value를 리턴하는 함수
  return person[key];
}

getPropertyValue("name");  // "name"의 값을 리턴
```
→ 괄호표기법의 경우, 위의 예제처럼 Key값을 파라미터를 받아 동적으로 프로퍼티의 값을 가져오도록 활용하기 좋음

⭐️ 존재하지 않는 프로퍼티 접근 시에는 undefined가 반환된다. 오류는 발생하지 않지만 접근하지 않는게 가장 좋다. 따라서 in연산자를 사용하여 프로퍼티가 존재하는지 확인한 뒤 프로퍼티에 접근하는 것이 좋다.

console.log(name : ${”name” in person});
→ 프로퍼티가 존재하면 true / 존재하지 않으면 false 값이 반환된다.

프로퍼티 추가/수정하는 법

점 표기법
person.location = “한국”;
괄호표기법
person[”gender”] = “남성”;

👀 객체는 const(상수)로 선언되어 있어도 프로퍼티 값을 수정할 수 있다.
→ 왜냐하면 객체가 상수여도 프로퍼티는 상수가 아니기 때문이다.
하지만‼️ 객체를 상수로 선언한 다음에 새로운 객체를 대입하는 경우는 오류가 발생한다.
👇

const person = {  // 객체를 상수로 선언
    age : 26,
    gender : female
};

person.location = "한국";
person["age"] = 27;   //- 오류 발생하지 않음

person = {
    age : 27,
    location : "한국"
};  //- (객체가 상수이기 때문) 오류 발생함

👉 상수로 선언된 객체 person의 프로퍼티 값을 수정해도 오류는 발생하지 않지만, person이 가리키는 객체 자체를 변경하려고 하면 오류가 발생한다.

프로퍼티 삭제

delete 객체명.프로퍼티명 OR delete 객체명[”프로퍼티명”]
→ 객체와 프로퍼티의 연결관계를 끊을 뿐, 메모리 내에서 지워지진 않는 방식이다. 🫥
person.name = null;
→ 메모리에서 값을 삭제. (이걸 좀더 추천합니다.)

함수 프로퍼티 = 메서드

예제1 : person 객체의 함수인 프로퍼티 say()를 호출

const person = {  
    age : 26,        // 멤버
    gender : female, // 멤버
    say : function() {
        console.log("안녕ㅋ");
    } // 함수인 프로퍼티 = 메서드
};

// 객체의 함수 호출 : "안녕ㅋ" 출력
person.say();  		// 점표기법으로 호출
person["say"]();	// 괄호표기법으로 호출

예제2: 객체 내의 메서드가 자기자신의 프로퍼티 값 중 하나를 사용하는 예제

const person = {  
  name : "윰인",
    age : 26,        // 멤버
    gender : female, // 멤버
    say : function() {
        console.log(`안녕 나는 ${this["name"]}`);
    } 
};

// 객체의 함수 호출 : "안녕 나는 윰인" 출력
person.say();		// 점표기법 호출
person["say"]();	// 괄호표기법 호출

템플릿 리터럴 사용해서 출력 : 자기 자신을 가리키는 this를 사용해서 프로퍼티에 접근한다.
`이름은 ${this[”name”]}`

배열 Array

: 순서가 있는 자료들의 집합

배열 생성하는 법

// 생성자를 사용하는 법
let arr = new Array();

// 배열 리터럴 사용
let arr = [];

각 원소의 자료형은 서로 다를 수 있다! 👉 각 요소는 정수/bool/문자열 일수도, 배열/객체/함수 등 다양한 자료형일 수 있어요

let arr1 = [1, 2, 3, 4];
let arr2 = [1, true, "3", null, undefined, {}, [], function(){}]; // 오류 안남!

배열의 각 요소 접근하기

배열[인덱스] : 인덱스 사용, 0부터 시작

arr1[0] = 1
arr1[1] = 2
arr1[2] = 3
arr1[3] = 4

배열에 요소 추가

배열.push()

arr1.push(5); 	// arr 배열에 5 추가 -> arr[4] = 5 가 됨

배열의 길이

배열.length

console.log(arr1.length); // 배열의 길이 5 출력

반복문

: 특정 명령을 반복해서 수행하도록 할 때 사용!

for 문 : for (초기식; 조건식; 연산부)

for (let i = 1; i <= 100; i++){  // 100번 반복수행
    // 반복 수행할 명령
}

배열 순회

const arr = ["a", "b", "c"];

for (let i = 0; i < arr.length; i++){  
    console.log(arr[i]);
}

객체 순회 : Key값과 Value 값을 순회하는 법
- key 배열 추출 : Object.keys(객체)
- value 배열 추출 : Object.values(객체)

let person = {
    name: "김유민",
    age: 26,
    tall: 160
};
const personKeys = Object.keys(person); // 객체의 key들을 배열로 반환 

// Key 순회
for (let i = 0; i < personKeys.length; i++){  
    console.log(personKeys[i]);  // 객체의 키 값을 반환
}

// Value 순회 방법1
for (let i = 0; i < personKeys.length; i++){  
  const curKey = personKeys[i];    // 객체의 키 값
  const curValue = person[curKey]; // 객체의 Value
    console.log(`${curKey} : ${curValue}`);  // Key:Value 출력
}
// 방법2
const personValues = Object.values(person); 
for (let i = 0; i < personValues.length; i++){  
    console.log(personValues[i]);  // 객체의 value 값을 반환
}

배열 내장 함수

forEach() 배열 순회 함수 : for문이 불필요하다.

 // 연습 : arr의 요소에 *2 한 요소들로 새로운 배열 만들기
 const arr1 = [1, 2, 3, 4];
 const arr2 = [];
 arr1.forEach((elm) => arr2.push(elm * 2));
 console.log(arr2);

문법 : arr.forEach((elm) => console.log(elm)); : 배열 arr의 모든 요소(elm)에 각각 접근하여 콘솔에 출력

map() 함수 : 모든 요소에 콜백함수 수행, return을 할 수 있다!
- 리턴값 : 배열 (Array)

// 연습 : arr의 요소에 *2 한 요소들로 새로운 배열 만들기 
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map((elm) => return elm * 2);	// 리턴된 값을 배열로 만들 수 있다.
console.log(arr2); // [2, 4, 6, 8]

includes() : 배열에 해당 인자값이 있는지 확인

// 각 요소가 3인지 확인
const arr1 = [1, 2, 3, 4];
let number = 3;

// forEach 사용
arr1.forEach((elm) => {
  if (elm === number) console.log(true);
});

// includes 사용 (=== 연산을 통해 찾음 : 자료형도 동일해야한다.)
console.log(arr1.includes(number));

indexOf() : 배열에 요소가 존재하면 몇 번째에 있는지 인덱스 리턴
→ 배열에 없는 경우 -1 리턴
```
arr1.indexOf(3);	// → 2 return
arr1.indexOf(5);	// → -1 return
```

findIndex() : 객체 배열에서 조건을 만족하는 첫번째 요소의 인덱스 리턴

const arr = [
	{ color: "red" },
	{ color: "black" },
	{ color: "blue" },
	{ color: "green" }
];

//- color 값이 "green"인 첫번째 요소의 인덱스 리턴
console.log(arr.findIndex((elm) => elm.color === "green"));  //

find() : 객체 배열에서 조건에 만족하는 첫번째객체를 리턴

// green 인 요소에 접근
// 방법 1
console.log(arr[arr.findIndex((elm) => elm.color === "green")]);

// 방법 2 : 인덱스를 변수에 저장하여 접근
let index = arr.findIndex((elm) => elm.color === "green");
console.log(arr[index]);

// 방법 3 : find() 사용 - element 리턴
console.log(arr.find((elm) => elm.color === "green"));

filter() : 배열 필터링 - 조건에 맞는 객체들 리턴

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

// 배열 필터링 : blue 인 객체 리턴
console.log(arr.filter((elm) => elm.color === "blue"));

slicing(start, end) : 배열 슬라이싱
→ start 인덱스 부터 end - 1 인덱스 까지의 요소 반환 (배열로 리턴)

// 배열 슬라이싱 : 인덱스 기준
console.log(arr.slice());       // 배열 그대로 출력
console.log(arr.slice(0, 2));  // 0번부터 1번(2-1) 요소까지 출력
console.log(arr.slice(0, 4));  // 0번부터 3번(4-1) 요소까지 출력

배열1.concat(배열2) : 두 개의 배열 합친 하나의 배열로 리턴

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" }
];
const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

// 배열 연결 : arr1 + arr2
console.log(arr1.concat(arr2));

sort() : 배열 정렬 (사전순)

⭐️ 정렬된 배열을 반환하는게 아니라 원본 배열을 정렬한다!

  let chars = ["나", "다", "가"];

  // 배열 정렬
  chars.sort(); // 사전순 정렬 (오름차순)

⭐️주의 : 숫자도 문자열의 사전순으로 정렬한다.
```
let nums = [0, 3, 2, 1, 10, 20, 30];

// 배열 정렬
nums.sort(); // 사전순 정렬 (오름차순) -> 숫자 기준 X, 문자열 기준
console.log(nums); // [0, 1, 10, 2, 20, 3, 30]
```
nums 배열이 사전순인 [0, 1, 10, 2, 20, 3, 30] 로 정렬된 것을 확인할 수 있다.
👉 비교 함수를 만들어야 함

비교함수 만들기
1. 오름차순 함수 정의

 
  const compare = (a, b) => {
    // a와 b를 비교하여 오름차순 정렬
    if (a > b)
      // 크다 - a가 b보다 뒤에 있어야 한다는 뜻 (1 반환)
      return 1;
    else if (a < b)
      // 작다 - a가 b보다 앞에 있어야 한다는 뜻 (-1 반환)
      return -1;
    // 같다 - 0 반환
    else return 0;
  };
  nums.sort(compare); // 숫자 오름차순으로 정렬
  console.log(nums); // [0, 1, 2, 3, 10, 20, 30]

2. 내림차순 함수 정의

 
  // 내림차순 함수
  const compareDesc = (a, b) => {
    // a와 b를 비교하여 내림차순 정렬
    if (a > b)
      // 크다 - a가 b보다 앞에 있어야 함 (-1 반환)
      return -1;
    else if (a < b)
      // 작다 - a가 b보다 뒤에 있어야 함 (1 반환)
      return 1;
    // 같다 - 0 반환
    else return 0;
  };

  nums.sort(compareDesc); // 숫자 내림차순으로 정렬
  console.log(nums); // [30, 20, 10, 3, 2, 1, 0]

💡 배열 요소를 숫자로 취급하여 오름차순으로 정렬할 수 있도록 함수를 정의하여 sort에 인자로 전달해 해결한다!

join() : 배열의 모든 요소를 하나의 문자열로 합치는 함수

const arr = ["유민", "님", "안녕하세요", "반갑습니다", "호호"];
console.log(arr[0], arr[1], arr[2], arr[3], arr[4]);
console.log(arr.join()); // 쉼표로 구분하여 하나의 문자열로 반환
console.log(arr.join(" ")); // 구분자 공백 추가 
console.log(arr.join("-")); // 구분자 '-' 추가

강의를 들으면서 우선 노션으로 정리하고 정리한 내용을 티스토리에 옮겨서 적으려니까 마크다운이 다 깨져서 다시 정리하느라 골치아팠다. 😮‍💨 이미 섹션 5까지는 노션으로 정리한 상태인데,, 아무튼 블로그를 정리하는 일은 많은 정성과 시간을 필요로 한다는 것을 다시끔 느꼈다.

JavaScript는 이미 배운 적도 있고, 다른 언어와도 겹치는 부분이 있기 때문에 자세히 정리하기보다는 가볍게 짚고 넘어가는 정도로 정리했다. 오랜만에 자바스크립트를 공부하게 되어서 아주 신나고 재밌다. 리액트를 활용할 수 있는 그날까지..페이스 잃지말고 열심히 공부하자. ❤️‍🔥

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)

저작자표시

'개발공부 기강잡자 > React | JavaScript | NodeJS' 카테고리의 다른 글

[React] React 입문 (ReactApp 생성/JSX/ESM/State/Props) (1)	2023.04.07
[React] Node.js 기초 (모듈만들기/NPM/randomcolor 예제) (0)	2023.04.04
[React] JavaScript 응용_2 (Spread연산자/동기&비동기/Promise/콜백지옥/async & await/API 호출) (0)	2023.04.03
[React] JavaScript 응용_1 (Truthy&Falsy/삼항연산자/단락회로평가/조건문업그레이드/비구조화할당) (0)	2023.04.02
[React] JavaScript 기초 (변수/상수/조건문/함수/콜백함수) (1)	2023.03.25

> develop your mean____

develop your mean____

태그

최근글

댓글

공지사항

아카이브