2022-03-03 js

오늘도 Javascipt에 대한 내용을 공부했다.
바로 여러가지 함수들부터 정리해보자.

여러가지 함수

push, pop

• push : 배열 가장 뒤에 값 추가

testArr.push("몰?루") -> testArr배열의 가장 뒤에 "몰?루"값 추가

• pop : 배열 가장 뒤에 값 제거

testArr.pop() -> testArr배열의 가장뒤에있는 값을 제거

unshift, shift

• unshift : 배열 가장 앞에 값 추가

testArr.unshift("빠잉"); -> testArr배열의 가장 앞에 "빠잉"값이 추가

• shift : 배열 가장 앞에 값 제거

testArr.shift(); -> testArr배열의 가장 앞에있는 값을 제거

slice, splice

• slice : 배열을 복사해서 리턴하는 함수. 복사하기 때문에 원본 배열에 영향 X

const testArr5 = testArr4.slice(1,3); 

-> testArr4 배열의 1번인덱스부터 3번인덱스 전까지 복사해서 배열로 리턴

const testArr6 = testArr4.slice(1); 

-> testArr4 배열의 1번인덱스부터 끝까지 복사해서 배열로 리턴

• splice : 배열을 잘라내서 리턴해주는 함수. // 원본 배열에서 잘라내서 리턴하기 때문에 원본 배열에 영향이 있다. 리턴해준 값이 원본 배열에서 사라진다.

const testArr7 = testArr4.splice(2,2); 

-> testArr4배열의 2번인덱스로부터 2개 잘라내어 리턴
splice의 매개변수가 3개인 경우 앞에 2개는 잘라내는 조건 동일 3번째 매개변수가 그자리로 삽입

const testArr8 = testArr4.splice(1,1,"test");

-> testArr4배열의 1번인덱스로부터 1개를 잘라내고 잘라낸 위치에 "test"값을 삽입

const testArr8 = testArr4.splice(1,2,"test");

-> 여러개를 잘라내는 조건을 설정했을 때에는 매개변수를 잘라낸 수만큼 넣지 않고 하나만 삽입
위의 경유에는 1번인덱스부터 2개를 잘라내고 1~2번 인덱스를 삭제 후 "test"값 하나만 삽입

testArr4.splice(2,0,"삽입");

-> 삽입만 하고싶을 경우는 몇개의 값을 잘라내는지 정하는 2번째 매개변수를 0으로 설정

forEach, map, filter, reduce

• forEach : 배열 순회 / 자바에서 사용하던 forEach문과 같음 / 배열의 값을 리턴해서 넣어주는 함수
• map : forEach와 마찬가지로 배열 순회 + 리턴하는값을 다시 배열로 생성
• filter : 배열에서 특정 조건에 만족하는 데이터만 필터링해서 리턴
• reduce : 배열의 값을 이용해서 연산하여 특정값을 토출할때 사용

forEach, map의 경우에

const arr1 = ["hi","hello",100,true,[1,2,3,4,]];

배열을 사용하여 예시를 들겠슴다.

forEach

arr1.forEach(function(item,index){
    console.log(index, item);
})

->
item = arr1(배열) / idex = for문의 i
item : 반복허면서 접근하는 배열의 각 요소
index : 인덱스 번호
매개변수 순서만 유지하면 변수명 상관없음 / 필요없는 경우 index는 선언하지 않아도 무관하다.
이것이 위의 함수들의 기본개념

map

const arr2 = arr1.map(function(item, index){
    const str = `${index}번째 아이템은 ${item}`;
    console.log(str);
    return str;
})

-> 모든 값을 str로 내보내서 arr2배열의 값으로 만들었다.

filter

const arr3 = [6,3,4,2,1,5];
const arr4 = arr3.filter(function(item, index){
    return item>3;
});
console.log(arr4);

-> filter의 기능을 이용해서 값이 3보다 큰 값들만 넣어준다.

reduce

const sum = arr3.reduce(function(acc,curr,index){
    //최초 1회차 acc,curr에는 첫번째 수, 두번째 수
    //return값이 acc에 대입
    //마지막 return값이 최종 리턴값
    console.log(acc,curr,index);
    return acc+curr;
});
console.log(sum);

-> return한 값이 acc에 들어가고 다시 함수 반복;

함수

이번에 볼 것은 함수이다.
이미 만들어져있는 함수가 아닌 직접 선언하는 함수에대해 알아보자.

함수의 종류를 3가지 정도로 나눠보았다.

1. 선언적 함수
2. 익명함수 (변수에 저장)
3. 익명함수 (스스로 실행되는 함수)

1. 선언적 함수

function 함수이름(){
    logic
    [return 되돌려줄 값]
}

선언적 함수는 위의 방법과 같이 사용한다.
함수가 필요한 곳에서 함수명([매개변수]);를 통해서 함수 호출

2. 익명함수 (변수에 저장)

const test3 = function (){
    logic
    [return 되돌려줄 값]
}

함수의 이름을 지정해주지않고 변수에 함수를 집어넣는 방법

3. 익명함수 (스스로 실행되는 함수)

(function(){
    console.log("스스로 동작하는 익명함수");
})();

호출없이 바로 실행하는 함수다.
호출을 안하니 매개변수도 없고 따로 뭘 하지 않아도 스스로 실행된다.
이름을 지을 수 없기 때문에 다시 실행시키는 것은 불가능하다.

함수의 매개변수

function func3(num1, num2){
    console.log(num1, typeof num1);
    console.log(num2, typeof num2);
}

이런식으로 매개변수를 넣어줄 수 있는데

func3(100,"안녕");

값을 넣을때 위와 같이 사용한다.
특이한점은

//선언한 매개변수보다 부족한경우 전달하지 않은 매개변수는 undefined로 처리
func3(200);
//선언한 매개변수보다 많은경우 선언된 매개변수만 사용하고 나머지는 사용하지 않음 / 앞에서부터 매개변수 사용
func3(100,200,300,500);

이렇다는 것 이다.
매개변수를 선언한거보다 적게 넣으면 남은 값은 undefined로 처리하고,
더 많이 넣으면 다 넣고 남은 매개변수는 버린다.

클로저 함수 : 함수를 리턴하는 형태의 함수

function increment(){
    let cnt=0;
    const returnFunc = function(){
        cnt++;
        return cnt;
    }
    return returnFunc;
}
const incFunc = increment();
function incEvent(){
    console.log(incFunc());
}

리턴값을 함수로주고, let형 변수 cnt를 함수의 밖에 선언해서 값만 받아와주는 원리이다.
함수 내부에서 사용했던 지역변수를 외부에서 사용하기 위해 사용하는 함수이다.

isFinite / isNaN : 숫자인지 확인해주는 함수

const num1 = 10;
console.log(isFinite(num1));
const num1 = 10;
console.log(isNaN(num1));

isFinite는 num1이 숫자이기 때문에 true를 리턴한다.
반대로 isNaN은 num1이 숫자라서 false를 리턴한다.

eval : 문자열을 자바스크립트코드로 실행하는 함수

const num3 = 100;
const num4 = 200;
const msg = `${num3}+${num4}`;
console.log(msg);
console.log(eval(msg)); // 문자열을 자바스크립트 코드로 바꿔서 실행해줌

console.log(msg)는 그냥 num3+num4를 리턴하지만,
console.log(eval(msg));는 자바스크립트 코드로 바꿔주기때문에 300을 리턴한다.

객체

객체는 키값과 값으로 구성해서 선언한다.

const obj1 = {
    key : value
    a:100,
    b:"hoo",
    c:true,
    d:[1,2,3,4]    
}

위와 같은 방식으로 객체를 선언한다.

객체 호출 방법

console.log(obj1.a); // .value로 호출
console.log(obj1["b"]); //[""]로 호출

.value로 호출하는 방법과 [""]로 호출하는 방법이있다.

객체 값 수정

obj1.a="안녕";

변수 변경하듯 객체.키값 = 값 으로 수정
없는 키값을 넣으면 수정 대신 추가

obj2.e = "안녕"

함수를 이용한 객체 생성

function Student(param1, param2, param3){
    this.name=param1;
    this.age=param2;
    this.addr=param3;
}
const student1 = new Student("이름1",13,"경기");

객체를 생성하고 매개변수를 가진 함수를 생성.
this.키값 을 사용해 값을 설정

DOM

Document Object Model
HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것
모든 노드객체에 접근할 수 있는 요소와 메소드를 제공

HTML에 접근

1. document.getElementById(“아이디”)
2. document.getElementsByClassName(“클래스이름”)
3. document.getElementsByName(“이름”)
4. document.getElementsByTagName(“태그이름”)
5. document.querySelector(“선택자”)
6. document.querySelectorAll(“선택자”)

정리 끝!