반응형
자바스크립트를 처음 접하게 됬을 때 함수 표현식(밑에 설명)으로 선언된 함수를 보며 이건 뭐지? 하는 생각을 했었습니다. 자바스크립트는 함수를 정의하는 세 가지 방법이 있는데 이를 모르고 있다면 처음 접하셨을 때 많이 당황할 수 있습니다. 오늘은 자바스크립트에서 함수를 정의하는 방법과 함수를 호출하는 패턴 그리고 익명 함수에 대해 알아보도록 하겠습니다. 1. 먼저 자바스크립트에서 함수란??? 자바스크립트에서 함수는 문장을 실행할 수 있는 고유한 스코프(scope)다. (scope에 대한 설명은 ver2 참고) 자바스크립트에서 함수를 설명 할 때 "자바스크립트에서 함수는 first-class object(또는 citizen, value)다"는 정의를 알고 갈 필요가 있다. 대부분이 first-class object라는 단어에 대해 생소하실 텐데 여기서 말하는 first-class object는 다음과 같은 의미들을 포함합니다. 1) first-class object는 변수에 저장할 수 있어야 한다. 2) first-class object는 함수의 파라미터로 전달할 수 있어야 한다. 3) first-class object는 함수의 반환값으로 사용할 수 있어야 한다. 4) first-class object는 자료 구조에 저장할 수 있어야 한다. 위와 같은 조건들을 충족시키는 객체를 first-class object라 하고 자바스크립트 함수를 의미합니다. 한 마디로 "자바스크립트에서 함수는 first-class object다"라고 생각하시면 될 것 같습니다. 이와 같이 자바스크립트에서 함수는 객체를 의미하고 함수는 변수, 배열, 객체에 저장될 수 있다는 뜻을 내포하고 있습니다. 또한 함수에 전달될 수도 함수에서 반환될 수도 있습니다.
2. 함수를 정의하는 세 가지 방법 1 ) 함수 생성자 방식
함수 생성자 방식은 함수 선언과 더불어 new 키워드를 통해 함수 객체를 생성하는 방법으로 마지막 매개변수는 함수의 로직(몸체 코드)부분을 의미하며, 그 외의 매개 변수는 인수가 됩니다. 2 ) 함수 선언문 방식 함수 선언문 방식은 우리가 주로 함수를 사용할 때 쓰는 방법으로 많이들 익숙하리라 생각 됩니다. 3 ) 함수 표현식 방식 함수 표현식 방식은 변수를 선언하고 그 변수에 함수를 할당하고 있는 모습을 볼 수 있습니다. c나 c++, java와 같은 언어에서는 차마 볼 수 없는 광경입니다. 따라서 위의 함수를 선언하는 위의 세 가지 방법을 다 모르고 있을 경우 많이 당황하실 우려가 있습니다. 저 코드를 실행하면 console.log를 통해 4, 4, 4가 찍히게 됩니다. 어떤 방식을 사용하든 문제는 없지만 함수 생성자 방식은 함수이 몸체 부분을 문자열로 작성해 주어야 되기 때문에 많이 불편하여 자주 사용되지 않는 편입니다. 3. 함수를 호출하는 네 가지 패턴 함수는 다음과 같은 네 가지 시나리오나 패턴을 사용해 호출할 수 있습니다. 1 ) 함수 패턴
함수를 객체의 속성이 아닌 함수(fucntion)로서 호출할 때를 일컫는다. 2 ) 메소드 패턴
함수를 객체의 속성(Property)에 저장하는 경우 이 함수를 메소드라고 부르고 이를 통해 함수를 호출하는 것을 메소드 패턴이라 한다. 3 ) 생성자 호출 패턴 함수를 new라는 전치연산자와 함께 호출하는 것을 말한다. 생성자 호출 패턴을 사용하는 경우 호출한 함수의 prototype (자바스크립트에서 Function() 인스턴스를 만들 때 자바스크립트가 인스턴스에 부여하는, 이름이 "prototype"이고 기본값이 객체인 속성일 뿐이다. )속성의 값에 연결되는 (숨겨진)링크를 갖는 객체가 생성되고, 이 새로운 객체는 this에 바인딩된다.(자바스크립트의 prototype은 중요하므로 이에 대해서는 ver.4에서 포스팅하도록 하겠다) console.log를 통해 찍히는 내용을 보자. 4 ) apply()와 call() 패턴 call()과 apply()의 차이점은 호출할 함수에 매개변수를 전달하는 방식이다. apply()는 배열방식으로 매개변수를 전달한다. 4. 익명 함수 익명 함수(anonymous function)란 이름이 없는 함수를 뜻한다. 익명 함수는 대부분 다른 함수에 매개변수로서 전달되는 경우가 많다. #다른 프로그래밍 언어와 달리 자바스크립트에서는 매개변수를 생략햐도 아무런 문제가 없다. 심지어 함수 선언 시 매개변수를 정의한 경우에도 문제가 없다. 전달하지 않은 인수에는 undefined 값이 저장된다. 물론, 인수를 전달하지 않으면 함수 내의 코드가 올바르게 동작하지 않을 수 있다. # 반대로 추가 매개변수(함수 선언 시 정의하지 않은 매개변수)를 함수에 전달해도 에러가 발생하지 않는다. 추가로 전달한 매개변수는 함수에 자동으로 추가되는 arguments 객체(함수로 전달된 매개변수를 저장하고 있는 배열 비슷한 객체)를 통해 접근할 수 있다.
참조 자바스크립트를 깨우치다 - 코디 린들리 |
반응형
'Programming > JavaScript' 카테고리의 다른 글
vue js inside v-for pass data to modal component (0) | 2020.09.16 |
---|---|
[ Javascript ] 자바스크립트 ajax 크로스도메인 이슈(CORS) (0) | 2018.07.26 |
[ jQquery ] jQuery플러그인으로 쿠키 다루기 (0) | 2018.07.23 |
[JavaScript] 자바스크립트 이것만은 알고가자 Part.2 (0) | 2017.07.22 |
[JavaScript] 자바스크립트 이것만은 알고가자 Part.1 (0) | 2017.07.22 |