분류 전체보기 (104) 썸네일형 리스트형 <자바스크립트 Javascript> const 키워드 - const 키워드 const는 변하지 않는 값인 상수를 위해 사용되나, 반드시 상수의 경우에만 사용하는 것은 아니다. const 키워드는 let 키워드와 그 특징이 대부분 동일하다. - 선언과 초기화 const이 let과 동일한 점으로는 블록 레벨 스코프를 갖는다는 것이다. let과 다른 점은, let이 재할당이 자유로운 데 비해, const는 상수라는 특성으로 인해 재할당이 불가하다는 것이다. 또한, const는 반드시 선언과 동시에 할당이 이루어져야 한다. - 상수의 사용 const 키워드로 선언한 상수는 가독성과 유지보수의 편의성 때문에 적극적으로 그 사용이 권장된다. 또한 const는 객체에도 사용이 가능하며, 이 때에도 재할당은 불가하다. - const와 객체 앞서 언급한 것처럼 const는.. <자바스크립트 Javascript> let 키워드 (2) (+ 클로저) - 클로저의 사용 for 반복문의 초기화 식에 사용된 변수에 var 키워드를 적용하면, 이것이 전역 스코프가 되어 의도와 다른 결과를 출력하게 된다. 이를 해결하기 위해 클로저를 사용할 수 있다. 하지만 var 키워드 대신 let 키워드를 사용하면, 클로저를 사용하지 않고도 의도한 결과 출력이 가능하다. for 반복문의 초기화 식에서 let 키워드로 선언한 변수는 지역 변수로서 작용하게 되기 때문이다. *클로저(closure)란? 클로저는 자바스크립트 고유의 개념은 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 중요하게 다뤄지는 특징이다. 예로, 외부함수 내에 내부함수를 선언하였을 때에 내부함수는 외부함수에 포함되는 관계를 갖는다. 따라서 보통의 경우 외부함수가 종료되면 내부함수 역시 .. <자바스크립트 Javascript> let 키워드 (1) - 함수 레벨 스코프 v.s. 블록 레벨 스코프 함수 레벨 스코프는 함수를 기준으로, 블록 레벨 스코프는 블록을 기준으로 변수의 유형이 결정된다. 즉, 함수 레벨 스코프는 함수 내에서 선언되면 지역 변수로 함수 외부에서 선언되면 전역 변수로 취급하고, 블록 레벨 스코프는 모든 코드 블록 내부에서 선언된 변수를 지역 변수로 취급한다. 자바스크립트는 이 중 함수 레벨 스코프를 따른다. - 블록 레벨 스코프를 따르는 let 기존의 var 키워드로 선언된 변수는 함수 레벨 스코프를 따른다. 그러나 ES6부터는 let 키워드가 추가되면서, let 키워드로 선언된 변수는 블록 레벨 스코프를 따르게 되었다. - let 키워드의 특징 1) 변수 중복 선언 불가능 기존의 var 키워드에서 변수 이름을 중복으로 선언이 가.. <자바스크립트 Javascript> var 키워드의 단점 - var 키워드 특징 1) 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정하기 때문에, 전역 함수 외부에서 생성된 변수는 모두 전역 변수가 되어 전역 변수가 남발될 위험성이 있다. 또한, for 문의 변수 선언문에서 선언한 변수는 for 문의 코드 블록 외부에서 참조가 가능하다. 2) var 키워드의 생략 암묵적 전역 변수를 양산할 수 있다. 3) 변수 중복의 허용 의도하지 않은 변수값의 변경이 일어날 수 있다. 4) 변수 호이스팅 변수 선언 이전에 참조가 가능하다. 위와 같은 특징들이 있지만 가장 큰 위험성은 전역 변수의 사용에 존재한다. 전역 변수는 유효 범위가 넓어 사용 위치와 사용된 이유의 파악이 어렵고, 의도치 않게 변경될 가능성이 있어 복잡성을 증가시키기 때문이다. ECMA Script.. <자바스크립트 Javascript> 프로토타입(Prototype) - 프로토타입이란? 자바스크립트는 객체지향 프로그래밍 언어지만, 다른 객체지향 프로그래밍 언어들이 클래스 기반인 것과 달리 프로토타입을 기반으로 한 객체지향 프로그래밍 언어이다. 프로토타입이라 함은, 부모 객체를 가리킨다. 즉, 모든 객체는 부모 객체를 가지고 있으며, 따라서 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있는데 이런 부모 객체를 가리켜 프로토타입 객체 혹은 프로토타입이라 칭한다. 참고 : poiemaweb 웹사이트 <자바스크립트 Javascript> 안정적인 개발환경을 위한 Strict mode - Strict mode란? 선언하지 않은 변수에 값을 할당하고 실행하면, 자바스크립트 엔진은 스코프 체인을 통해 이를 찾아본 후 에러를 발생시키는 것이 아니라 전역 변수를 생성한다. 이를 암묵적 전역 변수(implicit global)이라 한다. 다만, 이러한 암묵적 전역 변수는 추후 오류를 발생시키는 원인이 될 수 있으므로 반드시 변수 키워드를 사용하여 변수를 선언한 다음에 변수를 사용하는 것이 좋다. 하지만 그럼에도 오타나 문법 지식의 미비 등의 이유로 실수는 언제나 일어날 수 있다. 따라서 이러한 잠재적인 오류 자체를 일어나기 어렵도록 개발 환경을 만들고 그 환경에서 개발을 하는 것을 근본적인 해결책이라 할 수 있겠다. 이러한 맥락에서 ES5부터 strict mode가 추가되었다. 즉, stric.. <자바스크립트 Javascript> 객체의 변경불가성(Immutability) - 변경불가성이란? 함수형 프로그래밍의 핵심 원리로, 객체가 만들어진 이후에 상태를 변경할 수 없는 디자인 패턴을 뜻한다. 객체는 기본적으로 참조 형태로 운용되기 때문에, 그 상태가 언제든지 변할 수 있다는 위험성을 가지게 된다. 따라서 상태가 변경될 경우 객체가 존재하고 있는 장소에 변경 사실을 통지하고 대처할 수 있는 대응이 필요하다. 이 대응 방법으로는 객체를 불변객체로 만들어 변경이 필요한 경우에는 객체의 방어적 복사(defensive copy)를 통해 새로운 객체를 생성하여 변경하는 방법이 있고, Observer 패턴으로 객체의 변경에 대처하는 방법이 있다. 다만 불변 객체가 많아지면 이는 또 다시 프로그래밍에 있어 부적절한 방법이 될 수 있다. 이에 ES6에서는 불변 데이터 패턴(immutab.. <자바스크립트 Javascript> 실행 컨텍스트 - 실행 컨텍스트(Execution Context) 실행 컨텍스트는 쉽게 말해 자바스크립트에서 실행 가능한 코드가 실행되기 위해 필요한 환경을 말한다. 실행 가능한 코드란, 전역 코드와 Eval 코드(eval 함수로 실행되는 코드), 함수 코드(함수 내에 존재하는 코드)를 말한다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있어 자바스크립트의 핵심원리라 할 수 있다. 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보를 알고 있어야 하는데, 그 정보라 함은 변수, 함수 선언, 변수의 유효범위, this와 같은 것들이다. - 실행 컨텍스트의 3가지 객체 실행 컨텍스트는 일반적으로 실행 가능한 코드를 형상화하고 구분하는 추.. <자바스크립트 Javascript> 빌트인객체(Built-in Object) - 자바스크립트의 객체 자바스크립트의 객체는 네이티브 객체(Native object), 호스트 객체(Host object), 사용자 정의 객체(User-defined object)로 총 3가지가 있다. 1) 네이티브 객체 애플리케이션 전역의 공통된 기능을 제공한다. 환경에 관계없이 언제나 사용이 가능하다. Object, String, Number, Function, Array, RegExp, Date, Math 등의 객체 생성과 관련있는 함수 객체와 메서드로 구성되어있다. 또한 네이티브 객체를 Global objects라 부르기도 하는데, 전역 객체가 Global object이므로 혼동에 주의해야 한다. *Object() - 객체를 생성하는 생성자 함수. 다만 객체를 생성할 때에는 특수한 상황이 아니면 .. <자바스크립트 Javascript> DOM (3) - 요소를 조작하기(DOM Manipulation) 1) 텍스트 노드에 접근/수정하기 텍스트 노드에 접근하는 방법은 아래와 같다. : 요소 노드의 자식인 텍스트 노드의 부모 노드를 선택 -> firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색 -> 텍스트 노드의 프로퍼티(nodeValue)를 이용하여 텍스트를 취득 -> nodeValue를 이용하여 텍스트를 수정. *nodeValue - 노드의 값을 반환함. 리턴값은 텍스트 노드이면 문자열, 요소 노드이면 null. IE6 이상의 브라우저에서만 사용가능. *nodeName, nodeType으로 노드의 정보 취득 가능. 2) 어트리뷰트 노드에 접근/수정하기 어트리뷰트 노드에 접근/수정할 때는 다음의 프로퍼티나 메서드를 사용한다. *className .. 이전 1 2 3 4 5 6 ··· 11 다음