Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원/6월

22.06.29 - [ JS ] 형 변환, 연산자, 제어문, 배열, 함수

giggs 2022. 7. 7. 10:54

 

- Index -

 

 

1. Data 형 변환
 2. 연산자 3. 제어문 4. 배열 5. 함수
연산으로인한 형 변환 == for, while, do-while 선언과 초기화 선언(익명, 화살표)
강제 형 변환 === for in , for of 메서드(sort, join) 매개변수(argument)
리턴(익명함수 리턴)

 

 

 

 

 

 

1. 데이터 형 변환

 

 

1-1. 연산으로 인한 형 변환

 

 

 

1-2. 강제 형 변환

 

 

 

 

 

 

 

 

2. 연산자

 

 

 

 

  • 2 == ‘2’ --> true
  • 2 === ‘2’ --> false

 

 

 

 

 

 

3. 제어문

  • if / switch
  • while / do while / for
  • for in
  • for of (ES6에서 추가 )

 

 

 

 

3-1 for in

  • 배열의 인덱스 값 가지고 온다.

 

i의값을 출력해보면 인덱스다 0 / 1 / 2 이것을 가지고 접근하는 것

 

 

 

 

3-2 for of

  • 배열 요소의 값 가지고 온다

 

x 값에 인덱스가 아닌 요소의 값이 들어가 있다..

 

 

 

 

 

 

 

 

 

4. 배열

 

 

4-1. 배열 선언 및 초기화

 

 

## .addEventListener() 로 출력 테스트  ##

 

 

+Tip 배열 안에 있는 함수 실행 시키는 방법

 

 

## arr5 요소들 출력해보기 ##

 

 

arr5 배열 5번째 들어있는 함수 호출하는 방법은?

배열안에 있는 함수 호출하는 방법은?

 

 

빨간색 1번 부분까지만 사용하면  - 배열안에 요소들 출력됨

노란색 2번 부분까지 사용하면  - 배열안에 함수() 호출되어서 실행됨

 

 

 

 

 

4-2 배열 메서드

  • 메서드/함수 - 구분할 필요는 없다 - 굳이 구분하자면 
  • 메서드 -> 객체에 붙어있는 애들
  • 함수 -> 독립적으로 있는 애들

 

 

 

4-2-1 sort()

  • sort() 파라미터로 function(){} 필요 
  • return 값 필요 - 양수면 내림차순 / 음수면 오름 차순
  • 배열에서 요소를 하나씩 다 가져와서 정렬을 한다고 생각

 

 

#Tip

  •  sort() 파라미터 없이 그냥 사용하면 –
  • 맨 앞 하나의 문자열을 기준으로 정렬된다. - 사전 순으로 정렬된다.

 

 

 

 

4-2-2 join()

  • arr 배열 안에 있던 모든 요소들이
  • , [콤마]로 구분되어서 하나의 문자열로 return 되었다 - 기본

 

 

 

 

 

 

 

 

 

5. 함수

 

 

5-1 함수 선언

  • #선언적 함수
  • #익명 함수
  • #자동실행 함수
  • #화살표 함수(Arrow Function)

 

 

5-1-1 선언적 함수

 

 

 

5-1-2 익명 함수

  • ( 변수에 함수를 넣어서 만드는 것 ) - 함수명을 작성하지 않고 변수에 대입
  • ## 익명 함수 방식으로 만들어진 변수(함수)를 사용할 때는 선언 밑에 쪽에서 사용 가능

 

 

 

5-1-3 자동실행 함수

  • 함수 정의와 동시에 즉시 실행되는 함수
  • 한 번만 호출 가능
  • 여러 개 실행되게 하려면 제일 밖의 ()부터 다시 사용해주어야 한다.

 

 

 

 

5-1-4 화살표 함수 ( Arrow Function )

  • 람다식

 

 

 

 

## 화살표 함수 사용하는 이유?

  • 간단한 작업에 굳이 함수 안 만들어주기 위해서 – 함수명이 굳이 필요 없어서.
  • 함수는 결국 입력 값 / 할 작업 / 리턴 값 만 있으면 된다.

 

 

 

 

 

 

 

5-2 함수의 매개변수

  • 매개변수를 1개만 써도 / 안 써도 / 더 많이 써도 / 실행해준다.

 

 

 

 

## 만약 전달 못 받으면??

  • f01(num1, num2)에서 num2 파라미터 전달 못 받으면?
  • 이 파라미터에 기본 값을 설정해 줄 수 있다.
  • num2 = 777; 이런 식으로
  • 전달받는다면 전달받은 수로 함수 진행된다.

 

 

 

 

5-2-1 arguments ( 인자 )

  • arguments에 우리가 보낸 모든 인자 값이 들어있다는 것이 포인트
  • arguments의 요소 하나하나 꺼내와서 작업하는 것~

 

 

### 노란 박스 함수 vs 빨간 박스 함수 ###

차이점 체크

 

 

 

 

# 노란색 함수로 만들어놓으면

  • 3개의 인자까지만 받아서 계산된다
  • 초과되는 파라미터 값은 arguments 에저장된다

 

# 빨간색 함수로 만들어놓으면

  • 들어오는 인자수에 맞춰서 계산을 해준다.
  • 파라미터 값 모두 저장되는 arguments의 length 활용

 

 

 

 

5-3 함수의 리턴

 

 

5-3-1 일반적인 값 리턴

  • 우리가 맨날 하던 거

 

 

 

5-3-2 익명 함수를 리턴하는 함수

  • 익명함수 : 함수의 이름이 없는 함수

 

 

 

1번 - getAnonyMousFunc() 함수 실행 

2번 - return 값인 익명함수를 return

3번 - 함수 실행 결과 return값인 익명함수를 result 변수에 대입

4번 - 익명 함수가 들어있는 reault 출력 - 익명함수가 출력된다.

 

5번 - 익명함수가 들어있는 result 실행 - result() - 익명함수 실행되어서 알람 뜸

 

 

 

 

 

 

왜 굳이 이렇게 사용하냐?

  • JS에 접근 제한자 있는지 질문이 있었다.
  • JS에서는 변수가 전부 다 java - public과 같다.
  • 함수를 리턴하게 되면- private로 처리하는 효과 가능
  • java에서 private 해놓고 getter / setter 방식.. 
  • JS에서는 getter / setter 익명 함수 리턴 방식으로 접근하도록 해주는 것

 

 

클로저 효과

  • 현재 함수에 외부에 있는 변수를 내부 함수가 참조하고 있을 경우
  • 내부함수가 살아있기 때문에 외부 변수도 살아있는 것이다. - 살아있게 해 주는 것이 클로저
  • 외부 함수가 끝나면 외부 변수가 없어지는 것이 맞지만
  • 클로저 효과로 내부 함수가 죽어야 외부 변수도 죽는다.
  • 클로저 사용하는 이유 : private처럼 효과 주기 위해서

 

 

 

저작자표시 (새창열림)