[국비 코딩 수업 15일차!] 6. 자바스크립트 hoisting

Function

---

1) 호이스팅(hoisting)

함수가 선언되어 있는 코드를 유효한 범위 내에서 제일 상위로 끌어올려서 동작하게 하는 개념.

 

*언어 - 컴파 - 컴퓨터가 알아들을 수 있게 2진수로 바꿔나가는 일

인터프리터 : (빠르게, 한 줄씩! 해석하고 실행함.) 

예)  alert('안녕');

즉시 번역해줌.

 

배치(컴파일) : 내가 필요한 만큼 어느정도 범위내에서 코드를 완성하고 한 번에 번역 후 실행.

 

 

함수가 지정된 위치가 변동이 되도 함수실행이 가능함. (hello)

 

hoisting의 경우에는 선언한 것과는 달리 표현하는 경우에는 실행이 되지 않음.

 

인터프리터의 경우에는 순서대로 작성해야하기 때문.

 

2) 자바스크립트는 함수를 자료형으로 처리한다.

 

3) 매개변수

매개변수가 3개이면 실인자도 3개.  /  매개변수=실인자 (순서와 갯수 위치)

 

 

-default value

'기본 값' 혹은 '디폴트 값'이라는 것은 어떤 시스템, 프로그램, 함수 등이 처음 실행될 때 자동으로 설정되는 값.

 

 

 

 

값이 함수에 값을 넣어주면 실인자에 적지 않아도 함수가 자동으로 계산됨.

 

디폴트 값은 항상 뒤에서 부터 줌.

 

-객체의 구조 분해 할당(destructureing assignment) 

 

쉽게 매개변수에 값을 지정하고, 실인자로 바로 뽑아 쓸 수 있겠금 함.

 

-rest 매개변수

 

함수 선언할 때 매개변수에

...rest 를 사용하여 일일이 숫자를 기입할 필요 없이

...rest 설정만으로도 출력이 가능해짐.

 

 

4) 화살표 함수 ★ ★ ★ ★ ★

 

- function 함수명() {코드}

- function () {코드}

- () => {코드}

 

 

const a = () => { };    매개변수가 없을 때에는 ()는 생략 불가.

const a = x => { };    매개변수가 1개일때 ( ) 생략 가능.

const a = (x, y) => { };    매개변수가 2개 이상일 경우 ( ) 생략 불가.

 

const a =  x => { return x*x }

const a =  x => x*x           retrun을 생략할 때에는 { }도 생략해야 한다.

const a =  x => {

        console.log(x*x)

        retrun x*x;  }              여러 줄일경우 { }와 return 생략 불가.

 

- 객체 사용 시.

 

const a = () => { return {x:1} }

const a = () => { x:1 }      오류. (충돌이 남)

const a = () => ({x:1})

 

- 배열 사용시

 

const a = () => { return [1, 2,3,] }

const a = () => [1,2,3]      가능

 

*중괄호는 객체 사용시 쓰고 / 대괄호는 배열 선언. / 괄호는 함수호출

 

5) 콜백함수

언어 코드를 실행하는 시스템.

함수가 실행될 때 인자로 들어가는 또 다른 함수.

 

 

 

 

- settimeout(함수, 지연시간);

 

6) 재귀 함수 

 

function a() {

a();

}

 

a()

 

반복문을 사용하는 것과 재귀 함수를 사용하는 차이는

반복문이 처리하는 시간이 훨씬 더 빠름.

그러나 재귀 함수를 쓰는 이유는 반복을 돌리는데에 있어서

문제해결을 하기 위함을 목적으로 함.

(알고리즘에서 많이 사용하는 함수 중 하나)

자바스크립트에서는 자주 사용되지는 않음.

 

 

 

클래스

---

변수와 함수를 묶어주는 것.

 

1) 객체 생성 방법.

객체명 = { 키: 값, ... }

 

obj = new Object();

obj.title = "노인과 바다";

obj.author = "해밍웨이";

obj setValue = function(t, a) {

      this.title = t;

      this.author = a;

}

 

객체명 = function(파라미터) {

            this.변수 = 파라미터;

            ...

}

 

객체명.prototype.함수명 = function(피라미터) {

        this. 변수 = 파라미터;

}

 

 

---

 

 

UserDefineObject

 

 

2) 표준 내장 객체 ★ ★ ★ ★ ★

 

- Array

length

concat(), join(), reverse(), sort(), slice(), ....

 

- Date

getfullyear(), getmonth(), getday(),gethour(), ...

 

- math

pow(), ceil(), round(), floor(), random(), abs(), ...

 

-string

tolowercase(), touppercase(), charat(), concat(), indexof(), split(), substr(), ...

 

-window(브라우저 내장 객체)

location : href , 

history

navigator

document  [link, anchor, image, layer, (form = text, textarea, password, radio, checkbox, button, select, reset, reset, submit)] 

 

 

 

 

---

 

Array : 배열을 생성하고, 배열에 대한 다양한 연산을 돕는 메서드를 가지고 있습니다.
length: 배열의 요소 수를 반환합니다.
concat(): 두 개 이상의 배열을 연결하여 새 배열을 만듭니다.
join(): 배열의 모든 요소를 문자열로 만들어 반환합니다.
reverse(): 배열의 요소 순서를 반전시킵니다.
sort(): 배열의 요소를 정렬합니다.
slice(): 배열의 일부분을 새 배열로 반환합니다.
Date : 날짜와 시간을 위한 메서드를 제공합니다.
getFullYear(): 연도를 반환합니다.
getMonth(): 월을 반환합니다.
getDay(): 요일을 반환합니다.
getHour(): 시간을 반환합니다.
Math : 수학적 연산을 돕는 메서드를 제공합니다.
pow(): 거듭제곱 값을 반환합니다.
ceil(): 올림한 값을 반환합니다.
round(): 반올림한 값을 반환합니다.
floor(): 버림한 값을 반환합니다.
random(): 0과 1 사이의 난수를 반환합니다.
abs(): 절대값을 반환합니다.
String : 문자열에 대한 다양한 연산을 돕는 메서드를 제공합니다.
toLowerCase(): 모든 문자를 소문자로 변환합니다.
toUpperCase(): 모든 문자를 대문자로 변환합니다.
charAt(): 특정 위치의 문자를 반환합니다.
concat(): 두 개 이상의 문자열을 연결하여 새 문자열을 만듭니다.
indexOf(): 특정 문자열이 처음으로 나타나는 위치를 반환합니다.
split(): 문자열을 배열로 나눕니다.
substr(): 문자열의 일부분을 반환합니다.
Window : 브라우저 창에 대한 정보와 조작을 위한 메서드와 속성을 제공합니다.
location: 현재 페이지의 URL 정보를 담고 있습니다.
history: 사용자의 브라우저 방문 기록을 다룹니다.
navigator: 브라우저와 운영 체제에 대한 정보를 담고 있습니다.
document: 현재 웹 페이지를 나타내며, 페이지의 내용을 변경하거나 조작할 수 있습니다.

 

[국비 코딩 수업 16일차!] 7. 자바스크립트 클래스 실습. / event