앜스토리 | 호기심 많은 개발자의 보물창고

자바스크립트의 객체를 만들 때는 중괄호를 이용한다고 했다. 그런데 자바스크립트 객체는 함수를 이용해서 만들수도 있다. 그 이유는 함수도 객체이기 때문이다. 함수에 여러가지 기능과 속성이 추가되면서 객체 지향(Object oriented) 언어에서 객체의 원형(Prototype)인 클래스를 만들고, 그 클래스에서 새로운 인스턴스 객체를 여러 개 만들어 내듯이 자바스크립트에서도 객체의 원형을 정의한 후 그 원형에서 새로운 인스턴스 객체를 만들어 낼 수 있다. ▲ 프로토타입 객체를 정의한 후 프로토타입에서 인스턴스 객체 만들기 Person 프로토타입 객체는 데이터를 넣어 두려는 목적보다는 하나의 틀로 사용하기 위해 만든다. 붕어빵 틀에서 실제 붕어빵을 만들어 내듯이 실제 사람을 여러 명 찍어 내기 위한 틀을 ..

지금까지 함수를 호출했을 때 또 다른 함수를 파라미터로 전달하는 방법에 대해 포스팅한다. 그러면 함수 안에서 값을 반환할 때 새로운 함수를 만들어 반환하는 방법도 살펴보자. ▲ 함수에서 반환하는 값이 함수 객체인 경우 어떤 함수를 실행했을 때 또 다른 함수를 반환받으면 반환받은 함수를 그대로 실행할 수 있다. 이렇게 만들면 하나의 함수를 실행했을 때 추가적인 결과를 얻거나 또는 추가 작업을 할 수 있다. 그러면 더하기 함수를 실행했을 때 그 기록을 남겨 두었다가 출력하는 기능을 가상으로 만들어보자. ch03_test16.js 파일을 만든 후 다음과 같이 입력한다. function add(a, b, callback) { var result = a + b; callback(result); var histor..

함수를 파라미터로 전달하는 경우는 대부분 비동기 프로그래밍(Non-Blocking Programming) 방식으로 코드를 만들 때이다. 예를 들어, 더하기 함수를 실행한 후 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실해앟려면 비동기 방식으로 코드를 만들어야 한다. 즉, 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그리고 연산이 끝났을 때 파라미터로 전달한 함수가 실행될 수 있다면 그 시점에 결과를 처리할 수 있으므로 효율적인 프로그램을 만들 수 있다. 이 때 파라미터로 전달되는 함수를 콜백 함수(Callback function)이라고 한다. 콜백 함수는 함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리하는 데 사용된다. ch0..

자바스크립트의 변수에는 숫자나 문자열 같은 데이터, 그리고 중괄호를 이용해 만든 객체뿐 아니라 함수도 할당할 수 있다고 했다. 이렇게 변수에 함수를 할당할 수 있다는 특징은 함수를 호출할 때 다른 함수를 파라미터로 전달하거나 함수 안에서 또 다른 함수를 만들어 반환할 수 있다. ▲ 함수를 파라미터로 전달하기

slice() 메소드는 배열의 일부 요소들을 복사하여 새로운 배열을 만들어준다. ▲ slice() 메소드를 이용해 배열의 일부 요소를 복사하여 새로운 배열을 만들기 slice() 메소드에 전달하는 파라미터는 두 개이다. 첫 번째는 복사할 요소의 시작 위치이며 두 번째는 끝 위치이다. ch03_test14.js 파일을 새로 만들고 다음 코드를 입력하자. var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}, {name:'티아라', age:23}, {name:'애프터스쿨', age:25}]; console.log('배열 요소의 수 : %d', Users.length);console.log('원본 Users');console.dir(Users); var Use..

splice() 메소드를 호출할 때 전달하는 첫 번째 파라미터는 인덱스 값으로 배열의 몇 번째 요소부터 처리할 것인지를 지정한다.두 번째 파라미터는 삭제할 요소의 개수를 지정한다. 만약 다섯 개의 객체가 들어 있는 Users 배열에서 세 번째와 네 번째 요소를 삭제하고 싶다면 다음과 같이 호출한다. ▲ splice() 메소드를 이용해 배열 요소를 추가하거나 삭제하기 세 번째 요소의 인덱스 값이 2이므로 첫 번째 파라미터의 값은 2가 되고 두 개의 요소를 삭제할 것이므로 두 번째 파라미터의 값도 2가 된다.만약 값을 추가하고 싶다면 두 번째 파라미터의 값을 0으로 입력한 후 추가하려는 객체들을 파라미터로 전달한다. splice() 메소드를 이용해 배열에 요소들을 추가했다가 삭제하는 기능을 만들기 위해 ch..

배열에 값을 추가하거나 삭제하는 방법을 알아보자.배열에는 다음과 같은 메소드가 포함되어 있어 그 요소 값을 확인하거나 추가 또는 삭제할 수 있다. 속성/메소드 이름 설명 push(object) 배열의 끝에 요소를 추가한다. pop() 배열의 끝에 있는 요소를 삭제한다. unshift() 배열의 앞에 요소를 추가한다. shift() 배열의 앞에 있는 요소를 삭제한다. splice(index, removeCount, [Object]) 여러 개의 객체를 요소로 추가하거나 삭제한다. slice(index, copyCount) 여러 개의 요소를 잘라내어 새로운 배열 객체로 만든다. 먼저 배열의 끝에 요소를 추가하거나 삭제할 때는 push()와 pop() 메소드를 사용한다. 배열에 객체를 추가하는 경우가 많기 때문..

배열 안의 모든 요소를 확인하는 가장 간단한 방법은 for문을 사용하는 것이다. 파일 ch03_test10.js를 만들고 다음과 같이 입력하자. var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}, {name:'티아라', age:23}]; console.log('배열 요소의 수 : %d', Users.length);for(var i=0; i

배열은 여러 개의 데이터를 하나의 변수에 담아 둘 수 있어서 자주 사용되며, 배열 안에 들어 있는 요소(또는 원소, Item)들은 대괄호 []를 이용해서 접근할 수 있다. 배열이 만들어지는 모양은 다음과 같다. ▲ 배열이 만들어지는 모양 만약 다섯 명의 사용자 정보를 관리하기 위해 다섯 개의 객체를 만들고 각각 다른 이름의 변수에 할당했다면 매번 다섯 개의 변수에 접근하고 관리해야 한다. 그런데 Users 변수를 하나만 만들고 그 안에 다섯 개의 사용자 객체를 넣어 한꺼번에 관리할 숭 ㅣㅆ다면 각각을 따로 관리하는 것보다 훨씬 편리해진다. 이렇게 여러 개의 데이터를 편리하게 다룰 수 있기 때문에 배열을 자주 사용한다. 배열에 추가되는 요소들은 0부터 시작하는 인덱스(Index) 번호로 접근할 수 있다. ..

그러면 함수를 사용할 때는 어떨까? 자바스크립트가 자료형을 표시하지 않기 때문에 함수를 선언하고 호출하는 형태로 약간 달라진다. ▲ 자바와 자바스크립트의 함수 비교 자바에서 더하기 함수를 만드는 경우, 먼저 함수 상자의 이름을 add라고 붙일 수 있다. 함수 상자는 입력 값과 출력 값을 갖는데, 이 입력 값을 a와 b라는 변수로 받아 함수 상자에 넣어 준다면 add라는 함수 이름 뒤에 소괄호를 붙인 후 파라미터(매개변수) 이름과 타입을 적어야 한다. 또한 함수의 출력 값이 정수라면 함수 이름 앞에도 int와 같은 타입을 표시해야 한다. 그러나 자바스크립트에서는 타입을 표시하지 않으므로 타입이 표시되었던 부분은 모두 사라진다. 심지어 파라미터로 전달되는 변수에는 var 키워드도 붙일 필요가 없다. 이 때문..