Mo's Develog

▲ 자바와 JS의 배열은 다르다. JS의 배열은 여려 타입의 값을 저장할 수 있다. 또한 배열의 크기가 고정되어 있지않고 사용자가 값을 넣는만큼 계속 커진다. 배열 선언 방법1 - 배열 크기 미지정 ▲ 배열을 new Array()로 만들던, [ ]로 만들던지 모두 타입은 Object이다. 기존에 arr1 배열의 크기는 0이였다. arr1[3]=100을 함으로써 인덱스3에 100을 넣으므로써 arr1의 길이는 4가된다. arr1[5]=200을 함으로써 인덱스 5번방에 200을 넣었다. arr1[4]은 원래 존재하지 않았지만 JS에서 배열의 크기는 가변적이기 때문에 자동으로 4번방이 생기며 총 배열의 길이는 6이된다. 또한 배열에 참조하는 객체가 없는 방 즉 arr1[0], arr1[1],arr1[2],ar..

▲ JS에서는 new 연산자 혹은 생성자함수 등을 사용하지 않고 객체를 표현하면 그 형식을 리터럴이라고 한다. 1. 산술연산자 2. 비교 연산자 ▲ JS에서는 조건식에서는 0이나 null이나 false면 false로 처리되고, 그 이외의 오든 값은 true로 변환 및 판단되는 특징이 있다. 또한 기타 산술식등에서 true는 1로, false는 0으로 변환되어 실행되는 특징이 있다. ▲ 자바에서는 안되는 연산들이 JS에서는 가능하다. ▲ JS에는 자바에는 없는 === ,!==연산자가 있다. ▲ NaN끼리는 등가비교하면 무조건 false이기 때문에 비교하는 의미가 없다. NaN은 '숫자가 아니다'라고 하는 것이므로. new Number('HELLO')도 NaN이고 new Number('안녕')도 NaN이다...

JS는 Java와 비교했을 때 자유도가 높은 언어이다. 또한 Java와 비슷하면서도 다른 언어이다. ▲ JS의 특징(?) 이번 포스팅에서는 JS에서의 변수에 대해 알아보자. 참고로 console.log는 브라우저에서 F12 또는 마우스 오른쪽에서 검사 부분에서 console창에 출력되는 출력코드이다. 브라우저창 위에 바로 출력되는 코드가 아니다. ▲ 위 코드에서 우리는 num이라는 변수를 선언만 하였다. 그리고 출력을 해봤더니 변수 num의 값과 타입 모두 undefined라고 나온 것을 볼 수 있다. 여기서 undefined는 Java에서처럼 정의가 되지 않았다라는 의미가 아닌, num이라는 변수에 참조하는 메모리(객체)가 아직 정의가 되지 않았다는 의미이다. 또한 JS에서 undefined는 하나의 ..

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원한다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있다. JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다. JS를 구동하는 기능은 브라우저에 내장되어 있다. JS는 Client-Side Script Language이다. 대표적으로 HTML, CSS3, JS, jQuery등이 있는데 이런 Client-Side Script Language언어들은 웹 브라우저에 의해..

표준 내장 객체(Standard Built-in Object)는 JS가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 우리는 이 내장 객체들을 이용하여서 새로운 객체를 만들고 이를 통해서 새로운 소프트웨어를 만들어 내기 때문에 더욱이 중요하다고 할 수 있다. JavaScript는 그렇게 많지 않은 내장 객체들을 가지고 있는데 다음과 같다. Object Function Array String Boolean Number Math Date RegExp 우리는 이 객체들의 기능을 확장해볼 수도 있다. 배열(Array)의 기능을 확장시켜보자. ▲ new생성자를 이용해 Array라는 새로운 객체를 만들고 우리는 그 객체안의 데이..

이번 포스팅은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 prototype에 대해서 구체적으로 알아보자. prototype이란? 한국어로는 '원형', '개발중인 시제품' 등의 뜻이 있는데 여기서는 원형이 조금 더 가깝다고 생각한다. 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 객체는 속성(property)를 가질 수 있는데 prototype이라는 property는 그 용도가 약속되어 있는 특수한 property이다. prototype을 이용하여 저장된 속성들은 생성자를 통해서 객체가 생성될 때 그 객체와 연결된다. ▲ 결과는 true가 된다. 어떻게 true가 되는 것이냐? 생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 property ultraProp에 접근 가능한 것은..

상속은 '자식이 부모로부터 상속받는다' 라고 할 때의 그 상속이다. A라는 객체가 a라는 기능을 가지고 있는데 그것을 B라는 객체도 사용할 수 있도록 a라는 기능을 상속해준다는 개념이다. 또한 단순히 물려받는 것 뿐만이 아니라 새로운 기능을 추가도 할 수 있따. 예제를 보자. ▲ 위의 코드를 상속을 위한 코드로 아래처럼 바꿔보자. ▲ 12행과 13행에서 Person.prototype이라는 객체를 만들고 객체 안에 name과 introduce라는 property를 생성하고 각각의 메소드도 생성한 것이다. 20행의 코드가 상속을 시키는 코드이다. 상속하는 부모인 person앞에 new를 붙여 생성자를 만들고, 상속을 받은 programmer.prototype을 통해 person.prototype의 기능을 사..

this는 함수 내에서 함수 호출 맥락(context)을 의미한다. 우리가 흔히 말하는 '맥락에 따라서~'라고 할 때 그 맥락이다. 즉, 상황에 따라서 달라진다는 의미인데 함수를 어떤방식으로 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. ▲ 위 예제에서 기본적인 함수를 만들었다. 그 안에서 this가 가르키는 것은 window이므로 조건이 true가 된다. ( => 기본함수에서 this가 가르키는 것은 func앞에 생략되어 있는 window를 가리킨다. ) ▲ o라는 객체를 생성했고 객체의 메소드로 함수를 지정했다. 예제처럼 객체 안에있는 메소드의 this는 그 객체를 가리킨다. 즉 여기서 this가 가리키는 것은 객체 o 이다. ▲ 15행에서 함수를 호출했을 때의 this는 wind..

객체(Object)란 서로 연관된 변수와 함수를 그룹핑한 서랍 또는 상자라고 할 수 있다. 객체 내의 변수를 속성(property), 함수를 메소드(method)라고 부른다. 객체를 만들어보자. ▲ 객체를 만들긴 했지만 분산되어 있다. 객체를 정의할 때 값을 셋팅하도록 코드를 바꿔보면 아래와 같다. ▲ 하지만 여전히 문제가 있다. 만약 다른사람의 이름을 추가할 때는 다시 객체의 정의를 반복해야 한다. 우리는 재활용할 수 있는 방법이 필요하다. 이럴 때 우리가 이용하는 것이 바로 '생성자'이다. 생성자(Constructor)는 객체를 만드는 역할을 하는 함수이다. JS에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다. ▲ 10행에서 person은 단순 함수였지만, 11행..

우리가 알고 있는 기본적인 함수의 호출 방법은 아래와 같다. 하지만 JS는 함수를 호출하는 또다른 특별한 방법을 제공한다. 함수는 기본적으로 객체이다. 때문에 위의 예제에서 함수 func는 Function이라는 객체의 인스턴트이다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있는 것이다. 지금부터 알아볼 함수를 호출하는 다른 방법은 함수의 메소드를 이용한 방법이다. Function.apply에서 Function바로 뒤에 찍히는 점 뒤에는 수많은 기능들이 올 수 있는데 이러한 기능들을 메소드라고 한다. 그중에서도 apply 메소드에 대해서 알아보자. ▲ 기본적인 합계 함수를 생성하고 사용하면 다음과 같이 결과값이 나온다. 같은 결과값을 얻을 수 있는 방법은 apply를 사용하..