본문 바로가기

전체 글

(31)
[JavaScript] this 바인딩 자바스크립트의 this는 함수가 호출되는 방식에 따라 this 바인딩이 동적으로 결정된다. 함수 호출방식에따라 this가 어떻게 바인딩 되는 지 살펴보자. 1.일반함수 호출 1 2 3 4 5 6 function func() { console.log(this); } func(); //window cs 전역함수, 중첩함수, 콜백함수이든 일반함수로 호출하면 this에는 전역 객체가 바인딩된다. 중첩함수, 콜백함수의 경우 this가 해당객체가 아닌 전역객체를 바인딩함으로써 동작에 어려움이 발생할 수 있다. 이 경우에는 this를 명시적으로 바인딩할 수 있는 메서드들을 활용하기도 한다. this 바인딩의 일치를 위한 메서드들은 여기서 자세히 다루지는 않겠다. 2.메서드 호출 메서드 호출방식은 객체이름.메서드();..
[Java Script] 래퍼객체와 전역객체 표준 빌트인 객체 자바스크립트는 다양한 표준 빌트인 객체를 제공한다. ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 예를 들어 생성자 함수에 의해 Number 객체를 생성했다고 가정해보자. 표준빌트인 객체인 Number.prototype은 프로토타입 메서드를 제공한다. 이 프로토타입 메서드는 모든 Number 인스턴스가 상속을 통해 사용 할 수있다. 객체는 인스턴스 없이 정적으로 호출할 수 있는 정적 메소드를 갖는다. 1 2 3 4 5 const num = new Number(1.5); //toFixed는 Number.prototype의 프로토타입 메서드다. console.log(num.toFixed()); //소수점 자리를 반올림하여 문자열로 반환 Colo..
[JavaScript] 프로퍼티 어트리뷰트 : 프로퍼티의 세부설정 프로퍼티 어트리뷰트란? 자바스크립트 엔진은 우리가 프로퍼티를 생성하면 자동적으로 프로퍼티 어트리뷰트를 정의한다. 프로퍼티 어트리뷰트란 프로퍼티의 내부의 상태를 나타내는 로직들이다. 프로퍼티 값[Value], 값의 갱신 여부 [Writable], 열거 가능 여부[Enumerable], 재정의가능여부[Configurable]이 있다. 어트리튜브를 확인하는 방법은 Object.getOwnPropertyDescripter 메서드를 사용하면 된다. 참고로 ES8에서 도입된 getOwnPropertyDescripters 메서드는 모든 프로퍼티의 프로퍼티 디스크립터 객체를 반환한다. 1 2 3 4 5 6 let person = { name: 'Lee' } //프로퍼티 디스크립터 객체 반환 console.log(Obj..
[JavaScript]함수표현식과 함수선언문 함수표현식 자바스크립트에서 변수에 함수를 할당하는 방식을 함수표현식이라한다. 그렇다면 표현식이란 무엇인가? 간단히 말해서 값으로 평가되는 식이다. 또한 함수는 객체이므로 값의 성질을 갖는 일급객체이다. 함수표현식에서 함수의 이름은 객체의 내부에서만 동작한다. 함수를 외부에서 호출하려면 함수 이름이 아니라 함수 객체를 가리키는 식별자를 호출해야한다. 때문에 함수 표현식에서 함수의 이름을 생략하여 정의하여도 함수를 호출하는 데에는 아무 문제가 없다. 아래의 코드에서 변수 'data'는 함수 객체를 가리키는 식별자가 되고 'name'은 함수 내에서만 참조되는 함수 이름이다. 1 2 3 var data = function name() {console.log("data"); } data(); //"data" na..
[Java Script]원시타입과 객체타입 변경불가능한 값(=원시값) 원시값은 변경 불가능한 값이다. 변수와는 개별적인 개념으로 생각하면 이해하기 쉽다. 한 번 할당한 원시 값은 값 자체를 변경할 수 없고 어떤 일이 있어도 불변한다. 하지만 변수는 const(상수)로 선언하지 않는 이상 다른 값을 가질 수 있다. 변수는 재할당이 가능하기 때문이다. 아래에서 선언한 'num' 변수에 할당된 '50'이라는 값은 원시값이다. 변수에 '80'이라는 값을 재할당하면 메모리에 새로운 원시 값이 저장되고 변수가 참조하던 메모리의 주소가 바뀐다. var num = 50; num = 80; 그렇다면, 변수에 다른 변수를 할당했을 때는 어떻게 저장될까? 변수가 가리키는 주소값에 저장된 원시값은 변수끼리 간섭할 수 없다. 따라서 num변수에 할당되어있는 원시값을 다..
자바스크립트로 숫자야구게임 만들기(2) 숫자야구게임의 규칙 컴퓨터가 랜덤한 숫자 세개를 뽑는다. (범위는 1~9) 사용자가 랜덤한 숫자 세개를 입력한다.(범위 1~9) 사용자가 입력한 숫자 중에서 컴퓨터가 입력한 숫자와 인덱스, 값이 같은 숫자가 있으면 스트라이크이다. 사용자가 입력한 숫자 중에서 컴퓨터가 입력한 숫자와 값은 같지만 인덱스는 다른 숫자가 있으면 볼이다. 입력한 숫자 세개가 컴퓨터가 뽑은 숫자의 값과 인덱스 모두 동일하면 홈런이다.(게임 다시 시작) 실제 코드 var head = document.createElement('h1'); head.textContent = "숫자야구게임"; document.body.append(head); var form = document.createElement('form'); document.bo..
자바스크립트로 숫자야구게임 만들기(1) 전체 코드를 살펴보기에 앞서, 알아야 할 메서드들이 있다. push 메서드 var 배열 = [1,2,3]; 배열.push(4); console.log(배열); //배열 = [1,2,3,4] 배열.push(숫자)로 실행하며, 해당 배열의 마지막에 숫자(요소)를 추가하게된다. splice 메서드 var 배열 = [1,2,3,4,5,6]; var 새배열 = 배열.splice(5,1); //새배열 = [6] console.log(배열) //배열 = [1,2,3,4,5] var 다른배열 = 배열.splice(3,0,7,8); //다른배열 = [] console.log(배열) // 배열 = [1,2,3,7,8,4,5] 배열.splice(인덱스, 삭제할 요소의 갯수 , 배열에 추가할 요소)로 실행하며, 배열안의 요소..
EventListener가 반복문 역할을 하게 만들기 자바스크립트에서는 EventListener가 반복문 역할을 하도록 만들 수 있다. 다음은 버튼을 클릭하면 1~9까지의 랜덤한 숫자를 생성하여 화면에 보여주는 코드이다. EventListener가 submit을 파라미터로 받도록 설정하기위해 form 안에 button을 넣어주었다. 결과는 html파일을 브라우저로 실행하여 확인하였다. var num = Math.ceil(Math.random()*9); document.body.append(num); num.textContent = String(num); var form = document.createElement('form'); document.body.append(form); var button = document.createElement('button'..