Create Web App - Vanilla JavaScript (4) Function

1. 함수(Function)

반복되는 작업을 수행하거나 값을 계산하는 문장들을 분류해놓은 집합

함수를 사용하기 위해서는 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다

 

2. 함수 선언

- 함수의 이름

- 괄호 안에 쉼표로 분리되는 매개변수

- 중괄호 { } 안에서 해당 함수가 어떤 동작을 할지 정의하는 표현

기본적인 함수의 형태

name : 함수의 이름, (a, b) : 매개변수, { } : 함수의 동작을 정의할 영역

 

my_car 객체를 생성, 변수 x에 my_car 객체의 요소 중 make 요소를 할당

이후 myFunc이라는 이름을 가진 함수를 호출하면 함수 안으로 이동

함수는 car_object 매개변수를 가지며 해당 매개변수에는 my_car.make의 값을 할당

함수는 car_object.make의 값을 Honda → Toyota 변경하는 동작을 정의하고 있다

함수는 종료되고 변수 y에 my_car 객체의 make 요소의 값을 할당

my_car.make의 값이 Toyota로 변경된 것을 확인, 함수는 이같은 방법으로 사용할 수 있다

 

 

3. 지역변수

함수안에서 만들어지는 변수를 지역변수라고 한다

(함수가 아닌 Global 형태로 작성되는 함수는 전역변수라고 한다)

 

이때, 함수안에서 일어나는 모든 일은 함수 밖에서는 알 수 있는 방법이 없다

가령 아래와 같이 같은 a라는 변수를 생성하고 살펴보면 그 의미를 금방 알 수 있다

(먼저, const는 재선언, 재할당이 안된다는 것을 상기시키고 코드를 이해해야 한다)

 

test라는 변수 안에서 a = 10, 밖에서 a = 20을 할당해주었다

여기서 지역변수에 대한 정보는 밖에서는 알수 있는 방법이 없기 때문에 20을 출력한다

이같은 내용을 잘 기억하고, 변수를 구분하여 사용할 필요가 있다

참고로 매개변수, 지역변수의 이름은 자유롭게 설정해도 관계없다

설령 전역변수명과 매개변수 또는 지역변수의 이름이 같다고 하더라도 다르게 구분되어진다

 

 

4. 함수 호출

함수를 호출할 때에 확인 버튼을 함수명 뒤에 () 소괄호라고 생각하면 된다

소괄호를 붙이지 않고 test만 작성하게 되면 아래와 같이 어떤 동작도 수행하지 않음을 확인 가능

 

5. 객체 안 함수

기존의 함수의 형태와는 다른, 객체 안에서 함수를 생성하고 호출할 수 있다

예를 들면 console.log와 같은 생김새의 함수를 직접 만들어서 사용해볼 수 있는 것

 

content 객체를 생성 후 hobby의 값으로 값이 아닌, 함수를 전달해주었다

함수 안에서 content의 name요소를 가져오는 것 또한 가능하다

객체 안의 함수 또한 마지막 줄과 같은 형태로 매개변수를 전달할 수 있다