“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
데이터 불러오는 방법
저번 시간에 데이터를 불러올 수 있는 방법으로 for문과 forEach문 그리고 for in, for of, map()을 살펴 보았습니다. 오늘은 forEach문과 map()문을 생략하여 사용해서 짧게 만드는 방법과 또 다른 배열 실행문 그리고 객체 실행문에 대해서 더 알아보도록 하겠습니다!
forEach문 생략
let arr = [10,20,30,40,50,60,70,80,90];
arr.forEach(function(element){
document.write(element);
});
//forEach (화살표 함수)
arr.forEach((element)=>{
document.write(element);
});
forEach (변수 el 괄호 생략)
arr.forEach(el=>{ //element 줄여서 el
document.write(el);
});
//forEach (중괄호 생략)
arr.forEach(el=>document.write(el));map()생략
const arr = [100, 200, 300, 400, 500];
arr.map(function(el){
console.log(el)
});
arr.map((el) => {
console.log(el) //function삭제 후 화살표 써주기
});
arr.map (el => {
console.log(el) //el을 감싸고 있는 괄호 없애기
});
arr.map (el => console.log(el)); //중괄호 없애기생략하는 방법!
- for Each, map()문의 형식을 만들어 줍니다.
- function을 생략하고 화살표 함수를 넣어줍니다.
- el을 감싸고 있는 중괄호를 없애줍니다.
- 중괄호를 생략하고 한줄로 만들어 줍니다.
펼침 연산자 (Spread operator)
▶자바스크립트에서 배열,객체,문자열의 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
▶펼침 연산자는 단독으로 쓰일 수 없습니다.
let arr1 = [100, 200, 300, 400, 500];
console.log(arr1); //[100,200,300,400,500]배열이 같이 나온다.
console.log(...arr1); //배열을 불러올 때 쓰는 펼침 연산자 문법- 평소처럼 실행을 시킨다면 값이 [ ]배열과 함께 값 같이 나오는 값이 나오게 됩니다.
- (...arr1)을 사용해서 배열 안의 값을 출력해줍니다.
▶펼침 연산자는 배열의 값을 합쳐서 사용할 수 있습니다.
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];
console.log(...arr1, ...arr2)
//결과 값: 100,200,300,400,500,600,700- 또 다른 변수를 설정해 주고 (...arr1)옆에 (...arr1, ...arr2)로 펼쳐서 사용해 준다면 arr1과 더불어 arr2와 나란히 결과 값을 출력해줄 수 있습니다.
배열 구조분해할당(Desturcturing assignment)
▶배열 구조 분해 배열할당(Array desturcturing assignment)은 배열의 요소를 개별 변수에 할당하는 방법 중 하나입니다.이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
let a, b, c;
[a, b, c]= [100, 200, "javascript"];
console.log(a)
console.log(b)
console.log(c)
객체 : 데이터 불러오기 : 기본
▶객체에서 데이터를 불러오는 가장 기본적인 방법입니다.
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);- 객체에서는 obj를 이용해서 값을 불러올 수 있습니다.
객체 : 데이터 불러오기 : Object
▶객체에서 데이터를 불러올 때 Object key를 이용하는 방법입니다.
▶값을 가지고 있는 a,b,c를 불러올 수 있는 방법입니다.
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(Object.keys(obj)); //앞에 a,b,c값을 불러오는 방법 (배열로 불러옴)
console.log(Object.values(obj));
console.log(Object.entries(obj));- Object.key(obj)를 불러오게 된다면 ['a','b','c'] 값이 이렇게 나오게 됩니다.
- 따라서 values는 [100,200,"javascript"]라는 값을
- entries를 설정 해준다면 [Array(2),Array(2),Array(2)] 항목들이 나오게 됩니다.
객체 : 데이터 불러오기 : 변수
▶객체의 값을 변수에 저장시켜서 데이터를 불러오는 방법입니다.
const obj = {
a:100,
b:200,
c:"javascript"
}
const name1 = obj.a
const name2 = obj.b
const name3 = obj.c
console.log(name1)
console.log(name2)
console.log(name3) //변수에 저장시켜서 불러오는 것- obj객체의 값을 const [name1]에 저장시켜서 실행할 때 name이라는 변수로 데이터를 불러올 수 있습니다.
객체 : 데이터 불러오기 : for in
▶for in문을 사용해서 객체의 데이터를 불러오는 방법입니다.
const obj = {
a:100,
b:200,
c:"javascript"
}
for(let key in obj){
console.log(key); //결과 값 : a, b, c
console.log(obj[key]); //결과 값 : 100, 200, "javascript"
}- for in문을 for문에서 썼던 형식과 써주는데 변수 i라는 값 대신에 key를 넣어줍니다. 그리고 실행할 때 key값 만 넣는다면 결과 값이 a,b,c로만 실행하게 됩니다 따라서 obj를 써준 후 [ ] 안에 key를 넣어주어야 obj안에 있는 객체들이 실행할 수 있게 됩니다.
객체 : 데이터 불러오기 : map()
▶map()은 배열안에 객체가 있을 경우에 사용이 가능합니다. 그리하여 [ ]배열안에 객체가 있는 문제일 경우 실행할 수 있습니다.
const obj = [
{a:100, b:200, c:"javascript"}
]
obj.map((el) => {
console.log(el.a)
console.log(el.b)
console.log(el.c)
});
객체 : 데이터 불러오기 : hasOwnProperty()
▶hasOwnProperty라는 메소드는 데이터의 존재 여부를 알려줍니다.(true/false)
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(obj.hasOwnProperty("a")); //ture
console.log(obj.hasOwnProperty("b")); //ture
console.log(obj.hasOwnProperty("c")); //ture
console.log(obj.hasOwnProperty("d")); //flase
console.log("a" in obj); //obj안에 a가 있냐 없냐
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);- hasOwnProperty는 데이터의 존재 여부를 알려주는 메소드이기 때문에 존재하면 ture 존재하지 않으면 flase로 판단할 수 있습니다.
- 메소드의 길이가 길어서 쓰기 힘드므로 a in obj를 사용해서 obj안에 a가 있는지 없는지 짧게 사용할 수 있습니다.
객체 : 데이터 불러오기 : 객체 펼침연산자 (Spread operator)
▶객체의 속성을 펼쳐서 새로운 객체로 만드는 연산자입니다. 이를 통해 객체를 복제하거나 새로운 객체를 생성하거나 여러 객체를 결합하는 등의 작업을 보다 간편하게 수행할 수 있습니다.
▶이를 통해 객체를 복제하거나, 객체를 결합하거나, 객체의 일부 속성을 변경할 수 있습니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c); //기본문- spread를 선언해서 배열 펼침 연산자와 비슷하지만 객체를 감싸는 { }중괄호로 선언해 줍니다.
- 후에 실행문에 spread.a라고 선언합니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj, d:"react"}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d); //추가할 수 있다.- obj를 선언한 후 d에 또 다른 객체를 선언하면 추가해서 d를 실행시킬 수 있습니다.
const obj1 = {
a: 100,
b: 200,
}
const obj2 = {
c: "javascript",
d: "react"
}
const spread = {...obj1, ...obj2}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d); //결합- 또다른 객체를 선언해서 함께 결합해서 실행시킬 수 있습니다.
객체 : 데이터 불러오기 : 객체 구조분해할당
▶객체의 속성을 추출하여 변수에 할당하는 것을 말합니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a,b,c} = obj; //키 값이 들어가야한다.
console.log(a); // (obj.a)라고 써도 값이 나온다.
console.log(b);
console.log(c);
- const를 선언해 줄 때 키와 값이 들어가서 실행시켜 줍니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a:name1, b:name2, c:name3} = obj;
console.log(name1);
console.log(name2);
console.log(name3);
- 객체를 name으로 값을 설정 해주고 name으로 실행시켜줘도 객체의 값이 실행됩니다.