for 문과 배열의 사용방법
<script>
// for 사용방법
//자바스크립트 배열은
//자바의 배열과 arraylist의 혼합 느낌이다. 길이가 가변적이고 메소드가 있다.
const intArray = [10,20,30];
for(let i=0; i<intArray.length; i++){
const element = intArray[i];
console.log(element);
}
</script>for 문 안에서도 for in이나 for of, for each등의 여러개의 사용법이 있다.
<script>
//for in - 배열이나 객체의 key값을 사용
for(const i in intArray){
console.log(intArray[i]);
}
const obj = {
name: "홍길동",
age: 12
}
for(const key in obj){
console.log(key);
}
for(const key in obj){
console.log(key);
console.log(obj[key]);
}
// for of - 배열의 value를 사용한다.
for(const value of intArray){
console.log(value);
}
// foreach - 매개변수로 함수를 받는다
// 사실 괄호는 그 자체가 매개변수다. 여기에 매개변수로 여기에 값이나 객체가 아니라 함수가 들어간다.
intArray.forEach(function(value){
console.log(value);})
// 포 이치는 또 무엇이지?:
// 포이치의 매개변수를 마우스를 올려보면 콜백fn이 있다.
// 이 함수를 매개변수로 받기에 매개변수를 넣는다.
intArray.forEach((value) => console.log(value))
// 거기에 자세히보면.. value, index, array를 받을 수 있다고도 적혀있다.
// 배열의 메소드, 리턴값이 없는게 특징
intArray.forEach((value, index, array) => {
console.log(value);
console.log(index);
console.log(array);
});
</script>배열과 객체의 구조분해 할당
<script>
//구조분해 할당을 연습하기 위해 배열 생성
const intArray = [10,20,30];
// const first = intArray[0];
// const second = intArray[1];
// 배열의 구조분해를 할때는 구조를 아는것이 중요하다. 배열의 크기가 다르면 안되니까.
const [first, second, asdf] = intArray;
console.log(first);
console.log(second);
console.log(asdf);
// 객체를 구조 분해 할때에는 이름이 중요하다.
const obj = {
name: '홍길동',
age: 12,
};
const {age,name} = obj;
console.log(age);
console.log(name);
</script>전개연산자
전개 연산자는 일종의 배열을 이미 만들었는데 다른것을 더 집어넣고 싶을때, 작동하는 것.
<script>
//전개연산자
//배열이나 객체의 요소를 뿌린다
// 배열을 이미 만들었는데 40을 더 집어넣고 싶을때.
const intArray = [10,20,30];
const secondArray = [...intArray, 40];
console.log(secondArray);
const obj = {
name : "홍길동",
age : 12
}
const secondObj = {...obj, hobby:"야구"}
// 덮어 씌우기 역시작동한다.
const thirdObj = {...obj, age:30}
console.log(secondObj);
console.log(thirdObj);
</script>배열 안의 객체, foreach와 비슷한 역할을 한다.
<script>
//배열 안의 객체
const objArray = [
{name:"홍길동", age:12},
{name:"임꺽정", age:13}
]
for (let i=0; i<objArray.length; i++){
const el = objArray[i];
console.log(el);
console.log(el.name);
}
</script>배열의 map, filter, check 검사법
<script>
const array = [
{name:"홍길동", age:12},
{name:"임꺽정", age:13}
]
//map, filter, check를 배워보자.
//foreach 배열의 데이터를 반복하는데 결과값이 필요없을경우?
array.forEach((value, index, array) => {
console.log(value);
});
// fillt 배열의 데이터를 반복하는데 조건에 맞는 요소만 걸러낼 때 사용;
// 함수를 매개변수로 받는데 (콜백함수) return값이 true나 false여야한다.
// 리턴값이 트루면 리스트에 남고 false면 필터링된다.
const check = (value, index, array) => { // 다시말하자면 이게 콜백함수다.
//나이가 13살 이상인 사람만 필터링 하는 함수
return value.age > 12;
}
const result1 = array.filter(check);
console.log(result1);
//map 배열의 데이터를 반복하는데
//기본의 데이터 형식을 다른 형식으로 변경할 때 사용
//함수 매개변수를 받는데 (콜백함수) reuturn 값이 어느 것이든 될 수 있다.
// 기존 객체 배열 -> 이름만 있는 문자열 배열로 변환
// map은 객체 Map 하고 전혀 상관이 없음.
const result2 = array.map((value,index, array) =>{
return value.name;
});
console.log("result2");
console.log(result2);
</script>위의 모든것을 연습해보자.
<script>
//연습
//foreach - name님 안녕하세요 반복출력
//filter - 이름에 '길'자가 들어간 사람만 남기기
//map - 나이만 뽑아서 숫자 배열 만들기
// 1) 벨류값은 바꿔도 된다. value가 기본이지만 obj로 한다.
array.forEach((obj) => {
console.log(obj.name + "님 안녕하세요");
});
// 2) include는 포함되면.
const result3 = array.filter((value) =>{
return value.name.includes("길");
});
console.log(result3);
// 3)
const result4 = array.map((value)=>{
return value.age;
});
//or 한줄이면 리턴 값 생략가능. // 다시말하자면 500원 넣으면 자판기 자체가 콜라로 바뀌는거랑 비슷하다.
const result5 = array.map((value)=>value.age);
console.log(result4);
</script>