1. Repeat

const data = ['1', '2', '3'];
for (let i = 0; i < data.length; ++i) {
	console.log(data[i]);
}

for … of

const data = ['1', '2', '3'];
for (let item of data) { // for 반복 시 가져올 아이템을 넣을 변수 of 배열변수
	console.log(item);
}

Object.entries(), Object.keys(), Object.values()

• Object.entries(): 프로퍼티 키와 값으로 이루어진 각 프로퍼티 셋의 리스트, 즉 [[키,값], [키,값], [키,값]] 등으로 이루어진 배열 반환
• Object.keys(): 프로퍼티 키 리스트, 즉 [키, 키, 키] 등으로 이루어진 배열 반환
• Object.values(): 프로퍼티 값 리스트, 즉 [값, 값, 값] 등으로 이루어진 배열 반환

const data = {
	name: "sshin",
	age: 20,
	brand: "fun-coding";
}

console.log(Object.entries(data));
console.log(Object.keys(data));
console.log(Object.values(data));

for … in

const data = {
	name: "sshin",
	age: 20,
	brand: "fun-coding"
}

for (let key in data) {
	// 객체의 키를 반복할 때마다 반환
	console.log(key);
}

2. Array

객체와 마찬가지로 새로운 배열로 배열 변수의 배열을 덮어씌우는 경우는 많지 않으므로, 배열 변수 선언 시 const를 많이 사용함

객체처럼 생성

const myArray = new Array();

// 빈 배열을 객체처럼 선언 후, 직접 데이터를 넣어줄 수도 있음
myArray[0] = 1;
myArray[1] = 2;
myArray[2] = "sshin";
console.log(myArray);

splice

배열변수.splice(삭제를 시작할 인덱스 번호, 삭제를 시작할 인덱스 번호로부터 몇개를 삭제할지의 개수)

const myArray = [1, 2, 'sshin', 100];
myArray.spice(1, 2);
console.log(myArray);

특별한 형태의 javascript 배열

// 중활고는 객체 리터럴을 통한 객체로 인식하며, 객체도 아이템으로 선언 가능
const data = [
	{ name: 'sshin', age: 20 },
	{ name: 'marvin', age: 40}
];

// 개별 아이템이 객체인 경우, 인덱스 번호로 객체의 프로퍼티 접근 가능
console.log(data);
console.log(data[0].name);

2.2. 다양한 배열 관련 함수

push

배열의 끝에 아이템 추가

pop

배열의 끝에 있는 아이템을 리턴하고, 해당 아이템은 배열에서 삭제

shift

배열의 첫번째 아이템을 삭제하고, 이어져 나오는 아이템들을 앞으로 당김

concat

두 배열 합치기

const myArray1 = [1, 2];
const myArray2 = ['sshin', 100];
let myArray = myArray1.concat(myArray2);
console.log(myArray);

join

아이템 사이에 특정 문자열을 넣어서, 모든 아템을 합쳐 하나의 문자열로 만들어줌

let myArray = [1, 2, 'sshin', 100]; // const 불가
myArray = myArray.join('|');
console.log(myArray, typeof myArray);

reverse

배열을 역순으로 배치

함수 호출 시 역순으로 배치한 배열을 리턴하는 것이 아니라, 현재 배열을 변경함

let myArray = [1, 2, 'sshin']; // const 가능
myArray.reverse();
console.log(myArray);

slice

배열의 일부분 반환

slice(a, b): a 아이템 인덱스부터 시작해서 b - 1 아이템 인덱스까지 추출

let myArray = [1, 2, 'sshin', 100];
myArray.slice(0, 1);
console.log(myArray.slice(0, 2));

forEach

for문을 대체하여 간단히 배열의 각 아이테미을 가져올 수 있는 함수

let myArray = [1, 2, 'sshin', 100];
myArray.forEach(item => {
	console.log(item);
})

map

배열의 각 이에템에 정의한 함수를 일괄적으로 적용해서 새로운 배열을 리턴하는 함수

const myArray1 = [1, 2, 5, 10];
const myArray2 = myArray1.map(item => item * 2);

console.log(myArray2);

indexOf

배열에서 지정한 데이터가 위치한 인덱스 번호를 리턴

let myArray = [1, 2, 'sshin', 100];
let idx = myArray.indexOf('sshin');

findIndex

배열의 아이템이 객체일 경우 해당 객체에서 지정한 데이터 위치를 찾을 수 있는 방법을 제공함

const myArray = [
	{
		id: 1,
		name: 'sshin'
	},
	{
		id: 2,
		name: 'marvin'
	}
];

console.log(myArray.indexOf('marvin')); // -1
console.log(myArray.findIndex(item => item.name === 'marvin')); // 1

find

지정한 데이터의 위치를 리턴하는 것이 아니라, 지정한 데이터가 들어있는 객체 자체를 리턴함

const myArray = [
	{
		id: 1,
		name: 'sshin'
	},
	{
		id: 2,
		name: 'marvin'
	}
];

console.log(myArray.indexOf('marvin')); // -1
console.log(myArray.findIndex(item => item.name === 'marvin')); // 1
console.log(muArray.find(item => item.name === 'sshin'));

filter

배열에서 특정 조건에 맞는 아이템만 추출

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let even = myArray.filter(item => item % 2 === 0);
console.log(even);

3. 특이 문법

구조 분해 할당 (비구조화 할당)

• 배열이나 객체의 속성을 해체해서 값을 개별 변수에 대입할 수 있게 하는 문법
• JS에서는 객체 리터럴 기반 객체와 배열이 가장 많이 사용되는 데이터 구조이며, 구조 분해 할당은 객체와 배열을 좀더 쉽게 다루는 문법으로 이해할 수 있다.

let data = {
	name: 'sshin',
	age: 20
};

let { age, name } = data; 
// 동일한 프로퍼티 명을 사용해야 해당 프로퍼티에 맞는 값이 대입됨
console.log(name, age);

// 프로퍼티명과 다른 변수명을 사용하고자 하는 경우, 대입할 프로퍼티명: 다른 변수명 의 형태로 사용해야 함
let { name: myName, age: myAge } = data;
console.log(myName, myAge);

// 꼭 객체의 모든 프로퍼티를 가져올 필요는 없고, 객체의 프로퍼티중 가져오고 싶은 데이터만 선택적으로 가져올 수 있음
let { name: myName2 } = data;
console.log(myName2);

// 가져올 프로퍼티가 정의되어 있지 않을 경우에는 디폴트 값으로 대입하게 할 수 있음
let data = {
	name: 'sshin',
	age: 20
};

let { name, hobby = 'coidng' } = data;
console.log(name, hobby);

// 가져올 프로퍼티명을 다른 변수에 저장하되, 해당 프로퍼티명이 객체 안에 없을 경우, 다른 변수에 디폴트 값을 대입하기
let data = {
  	name: 'sshin',
  	age: 20
};

let { name, age: myAge=25, hobby='coding'} = data;
console.log(name, myAge, hobby);

배열 분해 할당

• 배열의 각 아이템을 별도 변수에 할당하는 문법
• 배열의 일부만 추출 가능, 첫번째 아이템부터 대입, 대입할 변수가 없을 경우는 대입하지 않음
• 대입할 아이템이 없을 경우, undefined로 대입
• 컴마를 통해, 필요하지 않은 아이템을 건너 뛸 수 있음!!

let myArray = [1, 2, 3, 4];
let [first, second, third, fourth] = myArray;

let myArray3 = ['sshin', 'sshin', 'marvin'];
let [value1, , value3] = myArray3;
console.log(value1, value3);

• …을 통해 나머지 요소를 한번에 가져올 수도 있음

let myArray = ['sshin', 'sshin', 'marvin', 'arthur'];

let [item1, item2, ...item3] = myArray;
console.log(item1);
console.log(item2);
console.log(item3);

• 객체와 마찬가지로 기본값을 설정할 수도 있음

let myArray1 = [10, 20];
let [item1, item2=10, item3=20] = myArray1;
console.log(item1, item2, item3);

변수값 교환하기

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

함수 리턴 시 여러 데이터 넘겨주기

function getData() {
	return [10, 20];
}

let [a, b] = getData();
console.log(a, b);

문자열을 분리해서 각각의 변수에 대입하기 split()

구분할 인자를 반드시 명시적으로 넣어주여함

let data = 'sungwoo shin,sshin'
console.log(data.split(' '));
console.log(data.split(','));

let data = 'sungwoo shin';
let [givenName, lastName] = data.split(' ');
console.log(givenName, lastName);

Rest 파라미터

• 함수 인자 선언 앞에 …을 붙여서 정의하는 문법
• 해당 함수에 전달된 인자 리스트는 하나의 배열로 해당 변수에 넣어짐
• typeof rest 실행 시는 object로 취급
• 인자의 수 만큼 순차적으로 대입되고 나머지만 배열로 대입

function getData(a, ...rest) {
	console.log(a);
  console.log(rest);
	console.log(Array.isArray(rest));
}

getData(10, 20, 30, 40, 50, 60);

• …변수는 파라미터의 마지막에 위치해야 함

function getData(...rest, a, b); // error

Spread 파라미터

• 함수 인자 선언 앞에 …을 붙여서 정의하는 문법
• iterable한 변수 앞에 붙여서 해당 변수의 데이터를 개별 아이템으로 분리함

iterable

반복 가능한 객체; 배열, 문자열 등

let myArray = [1, 2, 3];
console.log(...myArray);

• 함수 인자에 맞추어 배열의 각 아이템을 대입하는 경우

function func(a, b, c) {
	console.log(a);
	console.log(b);
	console.log(c);
}

const data = [1, 2, 3];
func(...data);

• 기본 배열로 새로운 배열 구성

const myArray1 = [1, 2, 3];
const myArray2 = [...myArray1, 4, 5, 6];
console.log(myArray2);