[JavaScript] 자바스크립트 배열,객체 돌리기

[JavaScript] 자바스크립트 배열 돌리기 (기초)

- js에서 배열을 돌릴 때 자꾸 틀려서 정리해 봅니다.  일반적으로 배열을 순회할 때  객체(Object)를 돌릴 것인가 , 배열(Array)을 돌릴 것인가 로 구분합니다.  사실 순회의 목적은 대부분 원하는 데이터만 관리하기 위해 사용됩니다.  기초적인 예시들로 자주 사용하는 Loop들을 숙지해 봅니다.

 

1. 배열 (Array) 순회하기

- 배열을 만드는 방법은 매우 단순합니다. 키워드 var, let, const를 통해 선언 ➞ 초기화를 진행합니다.

// 배열 생성

//var 키워드로 선언 : 수정 O, 재선언 O
var Arr = ['11번가','쿠팡','스마트스토어'];

//const 키워드로 선언 : 일정한 상수 값 유지 수정X, 재선언 X , 블록{}안에서만 사용가능
const Arr = ['11번가','쿠팡','스마트스토어'];

//let 키워드로 선언 : 수정 O, 재선언X, 블록{}안에서만 사용가능
let Arr = ['11번가','쿠팡','스마트스토어'];

- for Loop로 배열(Array) 순회

// 방법 1 : for Loop 활용
var Arr = ['11번가','쿠팡','스마트스토어'];

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

// '11번가'
// '쿠팡'
// '스마트스토어'

- for of Loop 로 배열(Array) 순회

// 방법 2 : for of Loop 활용
var Arr = ['11번가','쿠팡','스마트스토어'];

for(let idx of Arr){
	console.log(Arr[i]);
}

// '11번가'
// '쿠팡'
// '스마트스토어'

- forEach() Loop 로 배열(Array) 순회

//방법 3 : forEach Loop 활용
var Arr = ['11번가','쿠팡','스마트스토어'];

// forEach EX 01 : 배열에 값만 원할때
Arr.forEach(function(row,index,array){
	console.log(row);
});

// '11번가'
// '쿠팡'
// '스마트스토어'

// forEach EX 02 : 배열의 값과 해당 배열의 인자index 도 원할때
Arr.forEach(function(row,index,array){
	console.log(row,index);
});

// '11번가 0'
// '쿠팡 1'
// '스마트스토어 2'

// forEach EX 03 : 배열의 값, 배열의 인자, 배열도 원할때
Arr.forEach(function(row,index,array){
	console.log(row,index,array);
});

// '11번가 0 ['11번가','쿠팡','스마트스토어']'
// '쿠팡 1 ['11번가','쿠팡','스마트스토어']'
// '스마트스토어 2 ['11번가','쿠팡','스마트스토어']'

- forEach() Loop 제일 간단한 방법

//방법 4 : forEach() Loop 간단하게 활용
var Arr = ['11번가','쿠팡','스마트스토어'];

//제일 라인 수 적게 순회 하는 방식
Arr.forEach((idx) => console.log(idx)); 

// 11번가, 쿠팡, 스마트스토어

2. 객체(Object) 순회하기

-  일단 객체란 모든 것을 표현하기 위해 활용하는 데이터로 이름(key : 키), 값(value: 값)으로 구성된 프로퍼티(property : 속성)이고 객체의 기능을 정의한 게 메서드(method)이다. 여기서 프로퍼티는  객체의 내부 속성이다.

- 속성은 키 : 값 관계로 이루어지며 프로퍼티는, 로 구분합니다.

 

이번에 다룰 주제는 배열 객체를 돌리는 것이기에 이를 중점적으로 봅니다.

// 객체 생성 

// person object에는 3개의 프로퍼티가 있다.
const person = {
    name : ['철수','영희'],
    gender : 'man',
    age : 25
}

 

- 참고로 이렇게 만들어보니 우리가 평소에 사용하는 JSON형태가 비슷하다! 하지만 JSON과 Object는 엄연히 다르다!

 JSON : Javascript Object Notion(객체 표기법)의 약자로 클라이언트 ⇌ 서버와 데이터를 주고받을 때 자료를 표현하는 데이터

Object : 자바스크립트는 객체기낭의 스크립트 언어로 객체는 Key : Value 구조의 데이터이다.

솔직히 비슷하게 생겼으나 Json은 모든 키 를 따옴표("key")로 묶어야 하지만  object는 그런 제약이 없다는 것으로 구분함.

- for in Loop 활용

// 방법 1 : for-in Loop 활용

const person = {
    name : ['철수','영희'],
    gender : 'man',
    age : 25
}

for(var key in person){
    console.log("key : " + key);
    console.log("value : " + person[key]);
}

/*
    "key : name"
    "value : 철수,영희"
    "key : gender"
    "value : man"
    "key : age"
    "value : 25"

*/

- for of Loop 활용

// 방법 2 : for-of Loop 활용

const person = {
    name : ['철수','영희'],
    gender : 'man',
    age : 25
}

for(var [key,value] of Object.entries(person)){
    console.log("key : " + key);
    console.log("value : " + person[key]);
}

/*
    "key : name"
    "value : 철수,영희"
    "key : gender"
    "value : man"
    "key : age"
    "value : 25"
*/

- forEach() Loop 활용

// 방법 3 : forEach() 활용 

const person = {
    name : ['철수','영희'],
    gender : 'man',
    age : 25
}
  Object.keys(person).forEach(function(key){
    console.log("key : " + key)
    console.log("values : "+ person[key]);
})

/*
    "key : name"
    "values : 철수,영희"
    "key : gender"
    "values : man"
    "key : age"
    "values : 25"
*/

 

정리하기 

- 자바스크립트에서 배열(Array),  객체(Object)를 각각 순회하는 방식을 정리해 봤습니다. 결국은 원하는 데이터를 순회의 과정 속에서 관리할 수 있도록 Loop의 활용에 익숙해지면 좋겠습니다.