본문 바로가기

Javascript

Javascript 기초(함수2) <완결>

안녕하세요 19살 IT 개발자 포돌이입니다.

 

지난번에 Javascript 기초(함수 1)를 배웠습니다. 오늘은 Javascript 기초(함수 2)를 배우면서 함수를 마치려고 합니다.

완결인 만큼 마지막까지 최선을 다해주세요~ 그럼 시작하도록 하겠습니다.

 

함수 스코프 개념 이해

함수 스코프란 스코프(scope)의 사전적 의미는 "범위"이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킵니다.

스코프를 이해하기 위해 지역 변수(Local Variables)와 전역 변수(Global Variables)의 개념과 차이를 먼저 살펴보겠습니다.

 

전역 변수와 지역 변수의 개념과 차이

전역 변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고 지역 변수는 함수 스코프에서만 사용할 수 있는 변수입니다.  다음은 전역 변수와 지역 변수를 선언하는 기본형입니다.

 

 

예제)

함수 스코프에서 선언한 변수는 지역 변수이며 함수 안에서만 사용할 수 있습니다.  따라서 함수 스코프에서 score 값은 10을 출력하세요.

 

 

전역 변수와 지역 변수의 차이

전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고, 지역 함수는 함수 스코프에서만 사용할 수 있는 함수입니다. 다음은 전역 함수와 지역 함수를 선언하는 기본형입니다.

 

 

 

 

예제)

함수 스코프에서 선언된 함수는 지역 함수가 되어 함수 스코프에서만 호출할 수 있습니다. 따라서 스코프 밖에서 myFnc() 함수를 호출하면 함수 스코프에서 선언한 지역 함수가 아닌 전역 함수가 실행되어 "전역 함수"라는 경고 창이 나타납니다.

 

 

전역과 지역을 나누는 이유

프로그램을 개발할 때 전역과 지역을 나누면 충돌을 피할 수 있습니다. 방송국에 비유하면 전국 방송과 지역 방송으로 나눈 것을 생각해 볼 수 있습니다. 전국 방송 송출 신호는 전국에서 시청할 수 있습니다.  예를 들어 지역 방송의 경우 같은 KBS2 채널이라도 강원도에서는 강원 뉴스가 나오고 경기도에서는 경기 뉴스가 나옵니다. 만약에 이렇게 나누지 않으면 전국 방송과 지역 방송이 충돌하게 될 것입니다. 

 

예제)

한 프로젝트에 2명의 개발자가 투입되어 1명은 GNB 메뉴, 다른 1명은 TAB 메뉴를 제작했다고 가정해보자.

이때 개발자 간의 의견 조율이 이루어지지 않아 같은 이름의 함수를 만들면 어떻게 해야 하는가?

 

 

 

 

 

250이 출력될 것이라 생각했지만 150이 출력된 것을 볼 수 있습니다.

즉시 실행 함수

기본형

 

예제)

 개발자 A와 B가 즉시 실행 함수에 지역 변수와 지역 함수를 선언하여 충돌을 방지한 예제입니다.

 

 

 

 

 

 

다음과 같이 개발자 A가 예상한 값(200)이 정상적으로 출력되는 것을 확인할 수 있습니다.

 

객체 생성자 함수

내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성합니다.

다음은 객체 생성자 함수를 선언하고 객체를 생성하는 기본형입니다.

기본형

 

 

 

네 여기까지 Javascript 객체(함수 2)를 모두 배웠습니다. 추가적으로 내장 함수가 있긴 하지만 배제했습니다^^.

 

드디어.. Javascript 기초를 모두 완료했습니다!! 크흑... 제가 눈물이 다 나는군요.. 수고하셨습니다. 무려 9편의 대장정 끝에 완료했네요.. 제 글을 보시면서 공부하신 분들 고생 많으셨습니다. 앞으로 더 좋은 퀄리티로 찾아뵐 거고 새로운 언어를 준비해서 다시 찾아뵙겠습니다. 

 

지금까지 19살 IT 개발자 포돌이였습니다. 감사합니다!!

 

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-

 

책 광고 리뷰 주실 분들은 clonelee74@gmail.com 으로 메시지를 보내주시면 감사하겠습니다.

 

 

'Javascript' 카테고리의 다른 글

Javascript 기초(함수1)  (0) 2021.09.19
Javascript 기초(객체2)  (0) 2021.09.18
Javascript 기초(객체1)  (1) 2021.09.18
Javascript 기초(제어문2)  (0) 2021.09.17
Javascript 기초(제어문 1)  (0) 2021.09.17