[Javascript] 함수(function), 호이스팅(hoisting) 기술, 생성자

[Javascript] 함수(function), 호이스팅(hoisting) 기술,
 생성자

 자바스크립트에서의 함수 정의와 사용방법에 대해 글을 써내려가 보겠습니다.

function 함수명(){
    코드 정의부
}

 위와 같이 function키워드를 사용해서 함수를 정의해 주시면되겠습니다. 또는 변수에 그냥 함수명이 없는 함수를 바로 대입할 수 있습니다. 이 것을 익명함수라고 합니다.

호이스팅(hoisting) 기술

 호이스팅기술이란 함수의 선언부가 있지만, 정의부는 아래에 있는경우 정의문을 찾아서 함수를 실행해주는 기술입니다. 그러나 익명함수의 경우에는 호이스팅기술이 적용되지 않습니다. hoist 뜻은 밧줄로 들어올리다 라는 의미를 가지고 있습니다. 즉 아래에 있는 정의 부를 찾아와서 끌어와서 실행하는 것이라고 생각하면됩니다.

이 코드는 버튼을 누를 때 마다 배경을 바꿔주는 함수를 정의한 예제입니다. (현재 포스팅에 사용하고 있는 모든 예제소스는 이지스퍼블리싱의 자바스크립트 도서를 사용합니다.)

 코드를 살펴보게되면 color는 색을 가진 배열이며 changeClolor()는 색을 바꿔주는 함수로 아이디로 부터 개체를 가져와서 해당 바디태그.스타일.배경색을 현재 배열이 가리키고 있는 인덱스로 바꿔줍니다.

 버튼의 onclick에서 어떤 매서드가 실행될지 정해주는 모습이있는데, 이때는 함수명(); 을 대입한다는 특이한 사실을 알 수 있었습니다. 함수명뿐만이아니라 괄호와 세미클론까지 붙여주는 것 기억하세요.

 해당 코드의 실행결과입니다. 위 결과는 제가 버튼은 몇 번 눌러주었고 그에따라서 색이 변해있습니다. 

위 코드는 미리 아이디와 비밀번호를 지정해둔 뒤에 사용자로부터 prompt로 입력을 받고서 올바른 아이디와 비번을 입력했다면, 환영한다는 메세지를 보여주는 html코드입니다. 위에서 보여주고자한 것은 매개변수를 활용할 수 있다는 것이고, 알게된 것은 함수 정의시 자바스크립트는 인자의 형을 정하지 않는 다는 것입니다.

인자가 없는 함수(function)에 매개변수를 전달할 수 있다?

 특이하지만 자바스크립트는 이러한 기능을 지원합니다. 인자가없는 함수에 매개변수를 전달하게되면 arguments 라는 이름의 배열에 저장이됩니다. 즉 fnc(1,2,3) 이라고 호출을 하면 arguments[0~2] 에 각각 해당 전달된 데이터가 저장됩니다. 어쩌면 이건 아주 강력한 기능이라고 볼 수 있겠네요.

반환(return)을 통한 종료 및 결과전달

 위 코드는 다음이나 이전버튼을 누를 때마다 사진을 바꿔보여줍니다. 매개변수로는 다음을 누르면 1이 전달되는데 이때 14라인의 if문은 참이되서 실행이되며 만약 num이 8이라면 더 이상 증가되지 않고 return을 통해서 함수가 종료됩니다. (사진이 8개이기 때문에 더 이상 안 넘어가게 한 것이죠.) 이런식으로 리턴을 통한 함수의 종료가 가능합니다.

setAttribute() 사용방법

 (23번줄) setAttribute 매서드는 선택한 태그의 속성을 바꿀 수 있습니다. 위와 같이 첫 번째에는 속성이름 그리고 그 다음에는 넣어줄 값을 입력하면 해당 속성값이 설정됩니다.

생성자

 생성자는 암묵적으로 대문자로 시작을 하는 것으로 약속되어있습니다. 여기서는 7번라인 부터가 생성자입니다. 이때 3개의 인자를 전달받아서 this키워드를 사용하여, 전달된 매개변수로 저장합니다. 36~37라인에서와 같이 객체선언시 new를 사용하고 생성자를 호출하므로 매개변수를 전달하고 있는것을 확인하세요.

prototype 사용하기

 방금 전과 같이 사용하게 되면 동일한 기능을하는 함수가 여럿 생성됩니다. 메모리낭비가 되겠죠. 그래서 자바스크립트에서는 위와같이 프로토타입이란 것을 지원합니다. 함수의 원형을 두고 그 동일한 함수를 여러 객체가 쓰게되면서 메모리 효율이 좋아지게됩니다.

 42번째 줄에서 2객체가 같은 함수를 사용하고 있으니 true를 반환하게됩니다.

 여기까지 함수에 대한 대략적인 내용이었습니다! 글 읽어주셔서 감사합니다.

Screen, location, history, navigator 예시

브라우저 객체 모델 (BOM, Browser Object Model) 함수들

prompt, confirm 그리고 객체 기본