Stack Building
[javascript] 자바스크립트 기본 특징 본문
유용한 사이트
MDN https://developer.mozilla.org/ko/docs/Web/JavaScript
W3school http://www.w3schools.com/js
작년에 자바스크립트를 사용했지만 급하게 필요한 부분만 했더니 너무 부족하다.
자바스크립트는 이름은 자바와 유사하지만 키워드 유사성 때문이지 완전히 다른 언어다.
자바스크립트는 가볍고, 인터프리터 언어(소스코드를 바로 실행)이며, 객체지향언어다.
그러나 중요한 특성이라면 "first class function"이라는 것, "prototype-based"라고 할 수 있다.
1. First class function
뜻: 함수를 인자로 받아서 사용할 수 있다.
파이썬과 마찬가지로 다른 함수에 함수를 전달할 수 있다.
길게 풀어쓰면 'first class object로서의 함수'라고 한다.
2. Prototype-based
뜻: 클래스가 없고 원형에 기반하여 객체를 생성한다.
최신 버전에서는 class라는 키워드가 등장했지만 뒤의 운영 방식은 프로토타입 기반이다.
자바에서는 클래스가 있어서 상속을 사용하는데,
자바스크립트에서는 객체를 원형으로 해서 복제를 통해 동작 방식을 재사용한다.
여기에서 읽어보니 클래스 기반과 여러모로 다른 점이 있다고 한다.
아예 본격적으로 자바와 비교하자면,
;(semicolon)으로 문장을 구분하는 것, 기본적인 제어 구문이나 주석 표기 방법은 동일하다.
세미콜론이 없어도 오류는 나지 않지만 일반적으로 붙인다고 한다.
중요한 것은 다른점이다.
위의 두 가지 역시 주요한 다른 점이고, 그 외에도 다이나믹한 언어라는 것과 클로저 개념이 있다.
3. Dynamic한 언어
뜻: 변수 선언 없음, 실행 중 데이터 타입 결정
예전에 배웠을 때 제일 쇼킹했던 부분이다. 정확히는 변수 선언이 없이 사용할 수 있다.
예를 들어 함수 안에 선언된 변수 a가 있으면, 일반적으로는 함수 밖에서는 a를 호출할 수 없다.
그러나 자바스크립트에서는 함수 밖에서 a를 출력할 수 있다.
함수 안에서 지역 변수(local)로 사용되었더라도 암묵적으로 전역 property가 되기 때문이다.
이렇게 되면 변수가 여기저기서 불려져서 오류 확인이 어렵기 때문에
var를 사용하여 변수 선언을 해준다. 그러면 완전히 함수 내 지역 변수로 사용하게 된다.
여기에서 자세한 예제와 함께 볼 수 있다.
type checking을 나중에 하는 dynamic 언어는 유연한 특성이 있지만,
에러가 발생하여 live time에 오류가 생기거나 뻗을 수 있다는 단점이 있다.
4. Closure
뜻: 함수와 함께 저장된 환경(데이터)
처음에 이 개념을 배웠을 땐 scope와 헷갈렸는데
여기와 번역본인 여기를 보면 나와 비슷한 사람들이 많은 모양이다.
뜻이 약간 애매해서 그런 것 같은데 위 글에 따르면 보다 정확한 뜻은
함수의 생명주기가 종료된 후에도 접근할 수 있는 활성 객체라고 한다.
(ps. 자바스크립트에서는 함수 역시 객체이다)
자바스크립트의 경우, 함수 중첩이 가능하다. 즉, 함수 안에 함수를 넣을 수 있다.
이때, 외부 함수는 내부 함수의 변수나 함수를 사용하지 못한다.
일반적으로 어떤 함수의 지역변수의 scope는 선언된 함수까지만이다.
호출이 종료되면 데이터는 사라져야 한다.
그러나 함수 내의 변수를 내부 함수가 참조하고 있어 유지되어 접근할 수 있는 함수,
자기 범위scope 밖에 있는 변수들에 접근할 수 있는 함수가 클로저다.
이 경우, jarvis라는 함수에서 지역변수 데이터를 생성하고, 그 데이터를 sayHi에서 받는다.
sayHi가 클로저이고, 여기서 데이터를 받으면
jarvis가 삭제되어도 sayHi의 지역변수 데이터는 남는다.
즉 jarvis의 지역변수를 전역변수로 바꾸지 않아도 바로 sayHi에서 쓸 수 있는 것이다.
자바스크립트 뿐 아니라, 파이썬도 같은 개념을 차용한다.
'웹' 카테고리의 다른 글
쓰로틀링, 디바운싱 (0) | 2019.03.29 |
---|---|
API (Application Programming Interface) (0) | 2019.03.27 |
npx (0) | 2019.03.19 |
stateless와 stateful (0) | 2019.03.16 |
[javascript] 데이터 타입과 객체 (0) | 2019.03.14 |