Leeyanggoo
[JS] 자바스크립트 데이터 불러오기 : 배열 객체 펼침연산자 구조분해할당 본문
01. 변수 : 데이터 불러오기
변수 안에 저장된 테이터를 불러오는 방법입니다.
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
변수 선언자 'let'을 이용해 x, y, z에 데이터를 저장한다.
console.log(변수명)로 변수를 불러온다.
100200javascript
02. 상수 : 데이터 불러오기
상수 안에 저장된 데이터를 불러오는 방법입니다.
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
'const'를 이용해 변수 x, y, z에 상수 데이터를 저장한다.
상수는 데이터 변경이 불가능하기 때문에 만약 변경한 경우 'undefined'가 출력된다.
100200javascript
03. 배열 : 데이터 불러오기 : 기본
배열 안에 저장된 데이터를 불러오는 방법입니다.
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
배열은 대괄호([ ])로 선언하며 그 안에 순차적으로 데이터를 저장한다.
배열의 데이터는 0부터 시작하며 [ ]안에 넣어서 불러온다.
100200javascript
04. 배열 : 데이터 불러오기 : 2차 배열
배열 안에 배열이 저장된 데이터를 불러오는 방법입니다.
const arr = [100, 200, ["javascript", "react"]];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2][0]);
console.log(arr[2][1]);05. 배열 : 데이터 불러오기 : 개수 구하기
배열 안에 저장된 데이터의 개수를 불러오는 방법입니다.
const arr = [100, 200, "javascript"];
console.log(arr.length)
06. 배열 : 데이터 불러오기 : for()문
배열 안에 저장된 데이터를 for()문을 이용해 불러오는 방법입니다.
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]); ...
for(let i = 0; i<9; i++){
console.log(arr[i]);
}
for(let i = 8; i>=0; i--){
console.log(arr[i]);
}
배열 안에 저장된 데이터의 수가 많다면 일일히 불러오기란 불가능하다.
for()문은 for(초깃값; 조건식; 증감식)으로 표현하며 조건에 따라 데이터를 불러올 수 있다.
for()문의 순서는 다음과 같다.
i=0; --> 0<9; --> true --> console.log(arr[0]); --> i++(데이터 변경) // 결과: 100
i=1; --> 1<9; --> true --> console.log(arr[1]); --> i++(데이터 변경) ... // 결과: 200 ...
i=9; 9<9; --> false --> END // 조건문에 의해 i가 9가 되는 순간 false이기 때문에 계산은 끝난다.
두 번째 for()문은 증감식의 증감 연산자를 '--'로 바꾼 것으로 결괏값은 역순이다.
100200300400500600700800900
900800700600500400300200100
07. 배열 : 데이터 불러오기 : 중첩 for()문
for()문이 중첩된 코드를 불러오는 방법입니다.
for(let i=1; i<=10; i++){
console.log("i : " + i)
for( let j=1; j<=10; j++ ){
console.log("j : " + j)
//console.log(i+"+"+j+"="+(i+j))
}
}
for문이 중첩된 경우 위의 코드처럼 각각의 for문을 불러올 수 있다.
중첩 for문은 "첫 번째 i 값 도출 - 모든 j 값 도출 - 두 번째 i 값 도출 - 모든 j 값 도출" 식으로 이뤄진다.
i : 1j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 2j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 3j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 4j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 5j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 6j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 7j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 8j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 9j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
i : 10j : 1j : 2j : 3j : 4j : 5j : 6j : 7j : 8j : 9j : 10
08. 배열 : 데이터 불러오기 : forEach()
배열의 길이가 너무 길어져 배열의 크기를 알 수 없거나, 배열의 요소를 가져와 함수를 실행해야 할 때 사용합니다.
const members = ["Lee","Kim","Kang","Jang"];
members.forEach(function(member) {
document.write(member+"<br>"); //배열 하나의 값(for문의 진행에 따라 순차적으로 도출)
document.write(index+"<br>"); //배열 인덱스
document.write(array+"<br>"); //배열 전체 값
});
//화살표 함수
members.forEach((member) => {
document.write(member);
});
//화살표 함수 (괄호 생략)
members.forEach(member => {
document.write(member);
});
//화살표 함수 (괄호+중괄호 생략)
members.forEach(member => document.write(member));
배열명.forEach(콜백 함수(element, index, array)){ }
여기서 콜백 함수란 인자처럼 사용하는 함수를 말한다.
콜백 함수 다음에 오는 매개변수에 따라 나오는 값이 다르다.
첫 번째는 배열 하나의 값(처음부터), 두 번째는 인덱스, 세 번째는 배열 전체 값을 불러온다.
위의 코드는 forEach문에서 'members' 배열에 있는 각 요소를 'member'라고 정해 놓고 member를 화면에 표시하는 예제다.
이때 이름은 member 대신 다른 이름을 써도 되지만, 보통 배열 변수 이름은 복수형으로 각 요소는 단수형으로 사용한다.
Lee
0
Lee,Kim,Kang,Jang
Kim
1
Lee,Kim,Kang,Jang
Kang
2
Lee,Kim,Kang,Jang
Jang
3
Lee,Kim,Kang,Jang
09. 배열 : 데이터 불러오기 : for of
for of문은 문자열이나 배열 같은 반복 가능한 자료에서 사용합니다. 앞에서 설명한 forEach문도 for of문으로 작성할 수 있습니다.
const members = ["Lee","Kim","Kang","Jang"];
// members에 member가 있는 동안 반복합니다.
for(member of members){
document.write(member);
}
for of 문은 배열의 요소 값을 반환하기 때문에, 배열의 인덱스를 반환하는 for..in 문보다 직관적이고 간결합니다.
우리는 어떤 변수의 값을 도출하고자 하는지에 따라 그에 적절한 반복문을 쓴다면 편리하게 작업할 수 있습니다. :)
LeeKimKangJang
10. 배열 : 데이터 불러오기 : for in
for in문은 반복해서 객체의 값을 가져와 처리할 수 있게 합니다.
const person = {
name: "Lee",
age: 30,
city: "Seoul"
};
for(let key in person){
document.write(key + " : " + person[key] + "<br>");
}
//변수 key는 배열의 인덱스를 의미한다.
for(변수 in 객체){ ... }
for in문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하기 위해 대괄호([])를 사용합니다.
여기서 변수 key는 객체의 속성이 할당될 변수이고, person은 반복할 객체를 의미합니다.
객체의 속성 이름은 문자열로 반환되며, 변수에 할당됩니다.
for in문은 객체의 속성을 반복하며, 객체의 모든 열거 가능한 속성을 반복할 수 있도록 합니다.
for in 문은 주로 객체를 반복하며, 배열에는 사용하지 않는 것이 좋습니다.
name : Lee
age : 30
city : Seoul
11. 배열 : 데이터 불러오기 : map()
map() 함수는 배열을 순회하면서 각 요소를 새로운 값으로 변환하여 새로운 배열을 생성하는 메서드입니다.
const arr = [100,200,300,400,[500,600]];
arr.map(function(el){
console.log(el)
}); //forEach 처럼 쓴다 생각
// arr.map(el => console.log(el)); //map 화살표
const originalArray = [1, 2, 3];
const newArray = originalArray.map((currentValue) => {
return currentValue ** 2;
});
console.log(newArray);
const newArray = originalArray.map((currentValue, index, array) => {
// 변환 로직
});
map() 함수는 매개변수로 콜백 함수를 받습니다. 콜백 함수는 3개의 매개변수를 갖습니다.
1. currentValue: 배열의 현재 요소입니다.
2. index: 현재 요소의 인덱스입니다.
3. array: map() 함수를 호출한 배열 자체입니다.
map() 함수는 기존의 배열을 변경하지 않고 새로운 배열을 반환하기 때문에, 함수형 프로그래밍에서 많이 사용됩니다.
위의 첫 번째 코드는 map()을 이용해 배열의 값을 불러온 것이며, 두 번째는 배열의 값을 제곱하여 다시 배열로 만든 것입니다.
100200300400500,600
1,4,9
12. 배열 : 데이터 불러오기 : 배열 펼침 연산자
펼침 연산자(Spread Operator)는 자바스크립트에서 배열, 객체, 문자열 등의 내용을 전개하여 개별 요소로 분리할 수 있습니다.
이를 통해 새로운 배열이나 객체를 생성하거나, 함수 호출 시 인수를 전달하는 등 다양한 용도로 활용할 수 있습니다.
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];
console.log(arr1);
console.log(...arr1); //펼침 연산자 문법
console.log(...arr1, ...arr2); //배열 합침
//만약 펼침연산자를 안 쓴다면 for문을 이용해 값을 뽑고 다시 배열로 합쳐야 한다.
배열 펼침 연산자는 기존 배열의 내용을 새 배열에 전개할 때 사용됩니다.
이를 통해 배열을 병합하거나 배열 요소를 추가하거나 제거할 수 있습니다.
100,200,300,400,500
100,200,300,400,500
100200300400500600,700
13. 배열 : 데이터 불러오기 : 배열 구조분해할당
배열 구조 분해 할당(array Destructuring Assignment)은 자바스크립트에서 배열의 요소를 추출하여 변수에 할당하는 방법입니다.
이를 통해 배열의 각 요소를 변수로 분리하여 사용할 수 있습니다.
let a, b, c;
[a, b, c] = [100, 200, "javascript"]; //프로퍼티(키와 값)처럼 기능한다. 구조분해할당의 대표적인 기능이다.
console.log(a);
console.log(b);
console.log(c);
배열 a, b, c에 각각 100, 200, "javascript"라는 값을 할당한 예시입니다.
100200javascript
14. 객체 : 데이터 불러오기 : 기본
객체는 "키:값"의 속성을 가지고 있으며, "변수명.키"로 값을 불러옵니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
객체의 속성인 키:값으로 a, b, c에 100, 200, "javascript"라는 값을 할당한 예시입니다.
100200javascript
15. 객체 : 데이터 불러오기 : Object
Object.는 객체의 데이터를 여러 형식으로 불러오는 명령어입니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(Object.keys(obj)); //키를 배열로 추출해줌
console.log(Object.values(obj)); //값을 배열로 추출해줌
console.log(Object.entries(obj)); //[키, 값]이 쌍으로 이루어진 배열로 추출해줌
"Object."은 객체의 키(keys), 값(values), 속성(entries)을 배열로 반환한다.
a,b,c
100,200,javascript
a,100,b,200,c,javascript
16. 객체 : 데이터 불러오기 : 변수
객체의 데이터를 변수에 할당하고 불러올 수 있습니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c; //변수 name1~3에 객체 obj.a~c 할당
console.log(name1);
console.log(name2);
console.log(name3);
17. 객체 : 데이터 불러오기 : for in
for in문을 이용해 객체의 키를 불러올 수 있습니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let key in obj){
console.log(key+"<br>"); //for in문으로 객체의 키(key)를 가져온다.
console.log(obj[key]+"<br>"); //가져온 키를 이용해 데이터를 가져올 수 있다.
} //Object 는 배열로 불러옴 for in은 그냥 키만 가져옴
객체에 저장된 키를 for in 문으로 불러올 수 있습니다.
또한 가져온 키를 이용해 객체에 저장된 데이터 값을 배열 호출 방식으로 불러올 수 있습니다.
a
100
b
200
c
javascript
18. 객체 : 데이터 불러오기 : map()
배열 안에 들어있는 객체의 데이터를 불러올 때 map()을 이용할 수 있습니다.
const obj = [
{a: 100, b: 200, c: "javascript"}
]
obj.map(function(el){ //obj.map(el => {clg()})
console.log(el.a+"<br>");
console.log(el.b+"<br>");
console.log(el.c+"<br>");
}) //map은 배열에 쓰이기 때문에 배열 안에 들어간 객체를 뽑을 때 쓴다.
let users = [
{firstName : "Susan", lastName: "Steward"},
{firstName : "Daniel", lastName: "Longbottom"},
{firstName : "Jacob", lastName: "Black"}
];
let userFullnames = users.map(function(element){
return `${element.firstName} ${element.lastName}`;
})
console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
map()은 배열을 순회하면서 각 요소를 새로운 값으로 변환하여 새로운 배열을 생성하는 메서드입니다.
배열 안에 객체가 들어간 경우도 같은 방법을 이용해 값을 불러올 수 있습니다.
두 번째 코드는 사람들의 성과 이름이 저장된 객체를 합쳐서 새로운 배열로 만든 것입니다.
100
200
javascript
Susan Steward,Daniel Longbottom,Jacob Black
19. 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()는 객체 안에 데이터가 있는지 없는지 확인할 때 사용합니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.hasOwnProperty("a")); //데이터가 있으면 true 없으면 false
console.log(obj.hasOwnProperty("d")); //데이터가 있으면 true 없으면 false
console.log("a" in obj);
console.log("d" in obj); //약식으로 표현
hasOwnProperty()는 데이터의 존재 유무를 boolean 값으로 표현해줍니다.
약식으로 "키" in 객체명으로 나타낼 수 있습니다.
true
false
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
펼침 연산자(Spread Operator)는 자바스크립트에서 배열, 객체, 문자열 등의 내용을 전개하여 개별 요소로 분리할 수 있습니다.
이를 통해 새로운 배열이나 객체를 생성하거나, 함수 호출 시 인수를 전달하는 등 다양한 용도로 활용할 수 있습니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj, d:"react"}; //d:"react" 객체 추가
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
// const obj1 = {
// a: 100,
// b: 200,
// }
// const obj2 = {
// c: "javascript",
// d: "react"
// }
// const spread = {...obj1, ...obj2}; //객체 합치기
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
구조 분해 할당(destructuring assignment)은 자바스크립트에서 객체나 배열의 요소를 추출하여 변수에 할당하는 방법입니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a, b, c} = obj;
const {x, y, z} = obj;
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
console.log(obj.x); //키 이름을 다르게 하면 'undefined'
const {a:name1, b:name2, c:name3} = obj; //키에 할당된 값을 지정하고 불러올 수 있다.
console.log(name1);
console.log(name2);
console.log(name3);
구조분해할당을 사용하면 코드를 더 간결하게 작성할 수 있고, 객체나 배열에서 필요한 값만 추출할 수 있습니다.
객체의 구조분해할당은 변수의 이름이 프로퍼티나 메서드의 이름과 똑같아야 합니다.
왜냐하면 객체에는 순서가 없기 때문에 키 이름과 변수 이름이 같아야 해당 키를 찾아서 값을 가져올 수 있기 때문입니다.
100
200
javascript
undefined
100
200
javascript
