jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다.

each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다.

 

 

each() 메서드는 다음과 같은 두 가지 타입이 있습니다.

javascript
// jQuery 유틸리티 메서드
$.each(object, function(index, item){

});

// jQuery 일반 메서드
$(selector).each(function(index, item){

})

 

위의 메서드를 차례로 알아보도록 하겠습니다.

 

 

$.each()

$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다.

다시 말해, 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다.

첫 번째 매개변수로 배열이나 객체를 받습니다.

그리고 두번째 매개변수로 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖습니다.

다음의 예제를 통해 살펴보도록 합니다.

javascript
// 객체을 선언
var arr= [
    {title : '다음', url : 'http://daum.net'},
    {title : '네이버', url : 'http://naver.com'}
];

// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 배열은 전달
$.each(arr, function (index, item) {
    // 두 번째 매개변수로는 콜백함수인데 콜백함수의 매개변수 중
    // 첫 번째 index는 배열의 인덱스 또는 객체의 키를 의미하고
    // 두 번째 매개 변수 item은 해당 인덱스나 키가 가진 값을 의미합니다.

    var result = '';

    result += index +' : ' + item.title + ', ' + item.url;

    console.log(result);

    // 0 : 다음, http://daum.net
    // 1 : 네이버, http://naver.com

})

위에서 첫 번째 매개변수에 배열을 전달했습니다. 배열을 받게 되면 콜백함수의 index, item 은 배열의 인덱스와 값을 가리키게 됩니다.

 

다음의 예제는 배열대신 객체를 전달하는 경우입니다.

javascript
// 객체를 선언
var obj = {
    daum: 'http://daum.net',
    naver: 'http://naver.com'
};

// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 객체를 전달
$.each(obj, function (index, item) {

    // 객체를 전달받으면 index는 객체의 key(property)를 가리키고
    // item은 키의 값을 가져옵니다.

    var result = '';

    result += index + ' : ' + item;

    console.log(result);

    // daum : http://daum.net
    // naver : http://naver.com

})

 

 

 

$().each()

다음과 같은 마크업이 있다고 가정해 봅니다.

html
<ul class="list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ior sit amet.</li>
    <li>Lorem ipsum </li>
</ul>

 

$().each() 도 반복문과 비슷합니다.

javascript
$('.list li').each(function (index, item) {
    // 인덱스는 말 그대로 인덱스
    // item 은 해당 선택자인 객체를 나타냅니다.
    $(item).addClass('li_0' + index);

    // item 과 this는 같아서 일반적으로 this를 많이 사용합니다.
    // $(this).addClass('li_0' + index);
});

위 코드를 실행하면 li 의 클래스에 li_00, li_01, li_02 가 추가되어 있을 것입니다.

제이쿼리에 선택자를 넘기면 해당 선택자를 자바스크립트의 반복문과 같이 사용된다고 보면 됩니다.

출처: https://webclub.tistory.com/455 [Web Club:티스토리]

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

들어가며

안녕하세요. 오랜만에 글을 올립니다. 작년에 Promise 글을 작성할 때까지만 해도 Async 편을 작성하는 데까지 이렇게 오랜 시간이 걸릴 거라고는 생각 못 했네요 :)

기존 글에 많은 응원과 댓글 남겨주셔서 감사하게 받아보고 있습니다. 계속 글 구성만 고민하다가 이제서야 글을 작성합니다.

이번 글에서 살펴볼 내용은 자바스크립트의 비동기 처리 시리즈의 마지막 연재물 async & await 문법입니다. 처음 접하시는 분들이 최대한 이해하기 쉽게 코드와 글을 풀어서 작성했으니 재밌게 읽으셨으면 좋겠습니다 :)

그리고, 이번 글을 읽으시려면 꼭 비동기 처리 및 콜백 함수 Promise에 대해 이해하고 계셔야 합니다. 만약 아직 개념을 이해하지 못하셨다면 글을 꼭 읽어보시고 오시는 걸 추천드립니다.

그럼 재밌게 읽으세요! :)

async & await는 뭔가요?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠.

개발자에게 읽기 좋은 코드란?

처음 프로그래밍을 배웠을 때 아래와 같이 변수와 조건문을 사용하셨던 기억이 있으시죠?

var user = {
  id: 1,
  name: 'Josh'
};
if (user.id === 1) {
  console.log(user.name); // Josh
}
Js

이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간단한 코드입니다.

우리는 이렇게 위에서부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 것이 편합니다. 그렇게 프로그래밍을 배웠으니까요.

그래서 읽기 좋은 코드와 async & await가 무슨 상관이죠?

조금 전에 읽고 이해한 방식대로 코드를 구성하는 것이 async, await 문법의 목적입니다. 다음 코드를 한번 볼까요?

var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}
Js

fetchUser()라는 메서드를 호출하면 앞에서 봤던 코드처럼 사용자 객체를 반환한다고 해보겠습니다. 그리고 여기서 fetchUser() 메서드가 서버에서 사용자 정보를 가져오는 HTTP 통신 코드라고 가정한다면 위 코드는 async & await 문법이 적용된 형태라고 보셔도 됩니다.

이게 대체 무슨 말인지 아래에서 함께 알아보겠습니다 :)

async & await 맛보기

먼저 앞에서 살펴본 코드를 logName()이라는 간단한 함수로 감싸보겠습니다.

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}
Js

이제 위 함수를 실행하면 아까와 동일하게 코드가 동작할 겁니다. 자 그리고 여기서 아래와 같이 async와 await를 추가해주면

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}
Js

짜잔. 이게 바로 async await 코드입니다. 혹시 아직 이해가 정확히 안 가더라도 걱정 마세요. 지금부터 차근히 살펴볼게요! :)

async & await 적용된 코드와 그렇지 않은 코드

자 저희가 조금 전에 본 코드가 대체 어떤 의미인지 한번 알아보겠습니다. 먼저 아까 살펴봤던 logName() 함수 코드를 다시 보겠습니다.

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}
Js

여기서 fetchUser()라고 하는 코드는 서버에서 데이터를 받아오는 HTTP 통신 코드라고 가정했습니다. 일반적으로 자바스크립트의 비동기 처리 코드는 아래와 같이 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있죠.

function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}
Js

이미 위와 같이 콜백으로 비동기 처리 코드를 작성하는 게 익숙하신 분들이라면 문제가 없겠지만, 이 사고방식에 익숙하지 않은 분들은 고개가 갸우뚱할 겁니다.

그래서 저희가 처음 프로그래밍을 배웠던 그때 그 사고로 돌아가는 것이죠. 아래와 같이 간단하게 생각하자구요.

// 비동기 처리를 콜백으로 안해도 된다면..
function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}
Js

서버에서 사용자 데이터를 불러와서 변수에 담고, 사용자 아이디가 1이면 사용자 이름을 출력한다.

이렇게 하려면 async await만 붙이시면 됩니다 :)

// async & await 적용 후
async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}
Js

※참고: 만약 위의 콜백 함수 코드가 와닿지 않는 분들은 비동기 처리와 콜백 함수 글을 꼭 다시 읽어보시고 오세요.

async & await 기본 문법

이제 async await의 기본 문법을 알아보겠습니다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}
Js

먼저 함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다.

async & await 간단한 예제

그럼 문법을 좀 더 정확하게 이해하기 위해서 간단한 async await 코드를 보겠습니다.

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}
Js

먼저 fetchItems() 함수는 프로미스 객체를 반환하는 함수입니다. 프로미스는 “자바스크립트 비동기 처리를 위한 객체“라고 배웠었죠. fetchItems() 함수를 실행하면 프로미스가 이행(Resolved)되며 결과 값은 items 배열이 됩니다.

그리고 이제 logItems() 함수를 보겠습니다. logItems() 함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담깁니다. 따라서, 콘솔에는 [1,2,3]이 출력되죠.

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 했을 겁니다. 하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 되는 것이죠.

※참고: 만약 위 코드가 왜 비동기 처리 코드인지 잘 이해가 안 가신다면 fetchItems()를 아래의 함수들로 바꿔서 실행해보셔도 괜찮습니다 :)

// HTTP 통신 동작을 모방한 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var items = [1,2,3];
      resolve(items)
    }, 3000);
  });
}

// jQuery ajax 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    $.ajax('domain.com/items', function(response) {
      resolve(response);
    });
  });
}
Js

async & await 실용 예제

async & await 문법이 가장 빛을 발하는 순간은 여러 개의 비동기 처리 코드를 다룰 때입니다. 아래와 같이 각각 사용자와 할 일 목록을 받아오는 HTTP 통신 코드가 있다고 하겠습니다.

function fetchUser() {
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}
Js

위 함수들을 실행하면 각각 사용자 정보와 할 일 정보가 담긴 프로미스 객체가 반환됩니다.

자 이제 이 두 함수를 이용하여 할 일 제목을 출력해보겠습니다. 살펴볼 예제 코드의 로직은 아래와 같습니다.

  1. fetchUser()를 이용하여 사용자 정보 호출
  2. 받아온 사용자 아이디가 1이면 할 일 정보 호출
  3. 받아온 할 일 정보의 제목을 콘솔에 출력

그럼 코드를 보겠습니다.

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}
Js

logTodoTitle()를 실행하면 콘솔에 delectus aut autem가 출력될 것입니다. 위 비동기 처리 코드를 만약 콜백이나 프로미스로 했다면 훨씬 더 코드가 길어졌을 것이고 인덴팅 뿐만 아니라 가독성도 좋지 않았을 겁니다. 이처럼 async await 문법을 이용하면 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생깁니다.

※참고: 위 함수에서 사용한 fetch() API는 크롬과 같은 최신 브라우저에서만 동작합니다. 브라우저 지원 여부는 다음 링크로 확인해보세요. fetch API 브라우저 지원표

async & await 예외 처리

async & await에서 예외를 처리하는 방법은 바로 try catch입니다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch {} 를 사용하시면 됩니다.

조금 전 코드에 바로 try catch 문법을 적용해보겠습니다.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}
Js

위의 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 오류까지도 catch로 잡아낼 수 있습니다. 발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주시면 됩니다.

마무리

여태까지 살펴본 내용으로 감을 좀 잡으셨나요? 늘 처음 보는 문법은 완전하게 이해하는데 시간이 필요합니다. 실제로 서비스를 만드실 때 위 내용을 적용해보시면 더 쉽게 체득하실 수 있을거에요.

앞으로 더 프런트엔드의 이벤트와 데이터 처리가 많아질 것이기 때문에 async await에 대해서 정확히 알아놓으시면 도움이 많이 되실 겁니다. 그럼 재밌게 코딩하세요! 감사합니다 😄

다른 시리즈물 확인하기

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

delete operator

WEB/JavaScript 2021. 8. 14. 20:28

The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

Syntax

delete expression Copy to Clipboard

Where expression should evaluate to a property reference, e.g.:

delete object.property delete object['property'] Copy to Clipboard

Parameters

object

The name of an object, or an expression evaluating to an object.

property

The property to delete.

Return value

true for all cases except when the property is an own non-configurable property, in which case, false is returned in non-strict mode.

Exceptions

Throws TypeError in strict mode if the property is an own non-configurable property.

Description

Unlike what common belief suggests (perhaps due to other programming languages like delete in C++), the delete operator has nothing to do with directly freeing memory. Memory management is done indirectly via breaking references. See the memory management page for more details.

The delete operator removes a given property from an object. On successful deletion, it will return true, else false will be returned.

However, it is important to consider the following scenarios:

  • If the property which you are trying to delete does not exist, delete will not have any effect and will return true.
  • If a property with the same name exists on the object's prototype chain, then, after deletion, the object will use the property from the prototype chain (in other words, delete only has an effect on own properties).
  • Any property declared with var cannot be deleted from the global scope or from a function's scope.
    • As such, delete cannot delete any functions in the global scope (whether this is part from a function definition or a function expression).
    • Functions which are part of an object (apart from the global scope) can be deleted with delete.
  • Any property declared with let or const cannot be deleted from the scope within which they were defined.
  • Non-configurable properties cannot be removed. This includes properties of built-in objects like Math, Array, Object and properties that are created as non-configurable with methods like Object.defineProperty().

The following snippet gives a simple example:

var Employee = { age: 28, name: 'abc', designation: 'developer' } console.log(delete Employee.name); // returns true console.log(delete Employee.age); // returns true // When trying to delete a property that does // not exist, true is returned console.log(delete Employee.salary); // returns true Copy to Clipboard

Non-configurable properties

When a property is marked as non-configurable, delete won't have any effect, and will return false. In strict mode this will raise a TypeError.

var Employee = {}; Object.defineProperty(Employee, 'name', {configurable: false}); console.log(delete Employee.name); // returns false Copy to Clipboard

var, let, and const create non-configurable properties that cannot be deleted with the delete operator:

var nameOther = 'XYZ'; // We can access this global property using: Object.getOwnPropertyDescriptor(window, 'nameOther'); // output: Object {value: "XYZ", // writable: true, // enumerable: true, // configurable: false} // Since "nameOther" is added using with the // var keyword, it is marked as "non-configurable" delete nameOther; // return false Copy to Clipboard

In strict mode, this would have raised an exception.

Strict vs. non-strict mode

When in strict mode, if delete is used on a direct reference to a variable, a function argument or a function name, it will throw a SyntaxError. Therefore, to avoid syntax errors in strict mode, you must use the delete operator in the form of delete object.property or delete object['property'].

Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, }); Object.defineProperty(globalThis, 'variable2', { value: 10, configurable: false, }); // SyntaxError in strict mode. console.log(delete variable1); // true // SyntaxError in strict mode. console.log(delete variable2); // false Copy to Clipboard

function func(param) { // SyntaxError in strict mode. console.log(delete param); // false } // SyntaxError in strict mode. console.log(delete func); // false Copy to Clipboard

Cross-browser notes

Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses delete on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property value is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.

If you want to use an ordered associative array in a cross-browser environment, use a Map object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

Examples

// Creates the property adminName on the global scope. adminName = 'xyz'; // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. The same is true of let and const. var empCount = 43; EmployeeDetails = { name: 'xyz', age: 5, designation: 'Developer' }; // adminName is a property of the global scope. // It can be deleted since it is created without var, // and is therefore configurable. delete adminName; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // delete does not affect built-in static properties. delete Math.PI; // returns false // EmployeeDetails is a property of the global scope. // Since it was defined without "var", it is marked configurable. delete EmployeeDetails; // returns true function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } Copy to Clipboard

delete and the prototype chain

In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:

function Foo() { this.bar = 10; } Foo.prototype.bar = 42; var foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined Copy to Clipboard

Deleting array elements

When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.

When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete.

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; delete trees[3]; if (3 in trees) { // this is not executed } Copy to Clipboard

If you want an array element to exist but have an undefined value, use the undefined value instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; trees[3] = undefined; if (3 in trees) { // this is executed } Copy to Clipboard

If instead, you want to remove an array element by changing the contents of the array, use the splice() method. In the following example, trees[3] is removed from the array completely using splice():

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; trees.splice(3,1); console.log(trees); // ["redwood", "bay", "cedar", "maple"] Copy to Clipboard

Specifications

Specification

ECMAScript Language Specification (ECMAScript)
# sec-delete-operator

Browser compatibility

Report problems with this compatibility data on GitHub

desktopmobileserverChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung InternetNode.jsdelete

 
 
Full support1
Full support12
Full support1
Full support4
Full support9
Full support1
Full support1
Full support18
Full support4
Full support10.1
Full support1
Full support1.0
Full support0.10.0

Legend

Full supportFull support

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

homes.sort(
   function(a, b) {          
      if (a.city === b.city) {
         // Price is only important when cities are the same
         return b.price - a.price;
      }
      return a.city > b.city ? 1 : -1;
   });

 

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

This was a small issue I came across recently and the solution I found was so brilliant I thought it was worth sharing on here.

So the problem was that I had an array like this:

 

var obj = [
    {
        "one": 1,
        "two": 9
    }, {
        "one": 3,
        "two": 5
    }, {
        "one": 1,
        "two": 2
    }
];

 

 

and I wanted to sort it by "one" and then by "two" to get a result like this:

var obj = [
    {
        "one": 1,
        "two": 2,
    }, {
        "one": 1,
        "two": 9
    }, {
        "one": 3,
        "two": 5
    }
];

 

sounds simple enough right? I thought so too, but the sorting algorithm that the browser is using limits your options when it comes to sorting by multiple fields. After a bit of researching I stumbled upon this wonderful solution: http://stackoverflow.com/questions/13211709/javascript-sort-array-by-multiple-number-fields

 

JavaScript sort array by multiple (number) fields

How can I implement a ORDER BY sort1 DESC, sort2 DESC logic in an JSON array like such: var items = '[ { "sort1": 1, "sort2": 3, "name" : "a", ...

stackoverflow.com

obj.sort(function(a, b) {
    return a["one"] - b["one"] || a["two"] - b["two"];
});

This will sort your array by "one" and if they are the same (ie. 0) then it will sort by "two". It's simple, concise, readable, and best of all - works perfectly.

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

자바스크립트의 2차원 배열이란?

  • 자바스크립트는 진정한 2차원 배열은 없다
  • var arr = [][]; 이와 같은 한 번에 2차원 배열 선언이 불가능하다
  • 약간의 트릭을 통하여 2차원 배열과 비슷한 배열을 만들 수 있다

아래의 예제 중 상황에 맞는 방법을 사용하면 된다

 

초기값을 할당하여 배열 생성

// arr[5][2]
var arr = [['a','b'], ['c', 'd'], ['e', 'f'], ['g', 'h'], ['i', 'j']]; 

 

반복문을 사용하여 빈 배열 생성

// arr[5][2]
var arr = new Array(5);

for (var i = 0; i < arr.length; i++) {
    arr[i] = new Array(2);
}

 

2차원 배열 생성 함수를 만들어서 사용

function create2DArray(rows, columns) {
    var arr = new Array(rows);
    for (var i = 0; i < rows; i++) {
        arr[i] = new Array(columns);
    }
    return arr;
}

// arr[5][2]
var arr = create2DArray(5, 2);

 

Array 객체에 배열 생성 함수를 추가하여 사용

Array.matrix = function (m, n, initial) {
    var a, i, j, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for (j = 0; j < n; j += 1) {
            a[j] = initial;
        }
        mat[i] = a;
    }
    return mat;
};

// matrix('행', '열', '기본값')
var arr = Array.matrix(5, 2, 0);

- 자바스크립트 핵심 가이드 (더글라스 크락포드) p109

 

ES6를 지원하는 최신 브라우저라면 사용 가능한 방법

// arr[5][2] (빈 배열 생성)
const arr1 = Array.from(Array(5), () => new Array(2)

// arr[5][2] (null로 초기화하여 생성)
const arr2 = Array.from(Array(5), () => Array(2).fill(null))

 

자바스크립트의 2차원 배열은 1차원 배열에 또 다른 배열 객체를 추가하여 2차원 배열 만드는 방법을 사용한다. 자바스크립트 배열의 특성을 잘 모른다면 조금 이상한 방법으로 보일 수도 있다.

자바스크립트의 배열은 동적으로 배열의 크기를 조절할 수 있으며, 배열에는 모든 유형의 변수 그리고 함수, 객체도 담을 수 있어서 유연하게 사용할 수 있지만 그만큼 충분히 이해를 하고 사용해야 한다.

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

In this article, we cover breakdown Bubble Sort and then also share its implementation in Javascript.

Firstly, let's get it out of the way. When we say "sort", the idea is to re-arrange the elements such that they are in ascending order.

If you are new to the concept of sorting, each section of the article would be useful - concept of bubble sort, its algorithms, efficiency, etc. However, If you are here to refresh your knowledge, jump straight to the javascript implementation of the sort. Go to code

Table of Contents

 

Explanation of Bubble Sort

If you are a newbie to sorting, Bubble sort is a great place to start! It is one of the more intuitive sorting methods as its algorithm mirrors how our brain generally thinks about sorting - by comparing.

Let's remove the vagueness and delve deeper into it.

A. What Bubble Sort Does?

To achieve sorting in Bubble Sort, the adjacent elements in the array are compared and the positions are swapped if the first element is greater than the second. In this fashion, the largest value "bubbles" to the top.

Usually, after each iteration the elements furthest to the right are in correct order. The process is repeated until all the elements are in their right position.

B. What Bubble Sort Does?

1. Starting with the first element, compare the current element with the next element of the array.

2. If the current element is greater than the next element of the array, swap them.

3. If the current element is less than the next element, just move to the next element.

4. Start again from Step 1.

C. Illustrating the Bubble sort method

Iteration 1: [6,4,2,5,7] → [4,6,2,5,7] → [4,2,6,5,7] → [4,2,5,6,7] → [4,2,5,6,7]

Iteration 2:[4,2,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7]

Iteration 3: [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7]

Other Alternatives

As you might have noticed, Bubble Sort only considers one element at a time. Thus, it is highly time consuming and inefficient. Due to its inefficiency, bubble sort is almost never used in production code.

You can use a built in function Array.prototype.sort() for sorting. This is an inplace algorithm just like bubble sort which converts the elements of the input array into strings and compares them based on their UTF-16 code unit values. Also, if you are interested, you can read about index sort which is another simple comparison based sort method that has a better performance than Bubble sort.

Implementing Bubble Sort using Javascript

Now as we have seen the logic behind bubble sort, we can write the code for it in a straightforward manner, using two nested loops.

 

 

let bubbleSort = (inputArr) => {
    let len = inputArr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            if (inputArr[j] > inputArr[j + 1]) {
                let tmp = inputArr[j];
                inputArr[j] = inputArr[j + 1];
                inputArr[j + 1] = tmp;
            }
        }
    }
    return inputArr;
};

As you can see here, the sorting function will run until the variable "i" is equal to the length of the array. This might not be the most efficient solution as it means the function will run on an already sorted array more than once.

A slightly better solution involves tracking a variable called "checked" which is initially set to FALSE and becomes true when there is a swap during the iteration. Running this code on a do while loop to run the sorting function only when "checked" is true ensures that the function will not run on a sorted array more than once.

 

 

let bubbleSort = (inputArr) => {
    let len = inputArr.length;
    let checked;
    do {
        checked = false;
        for (let i = 0; i < len; i++) {
            if (inputArr[i] > inputArr[i + 1]) {
                let tmp = inputArr[i];
                inputArr[i] = inputArr[i + 1];
                inputArr[i + 1] = tmp;
                checked = true;
            }
        }
    } while (checked);
    return inputArr;
 };

 

Visualization

If you are finding it hard to visualize Bubble Sort, you can check this website https://visualgo.net/bn/sorting?slide=1.

You can play around with the code and see the specific function of each part of the code and how they play together to get the final sorted array.

Complexity of Bubble Sort

The worst case scenario: quadratic O(n²): this is the case when every element of the input array is exactly opposite of the sorted order.

Best case scenario: linear O(n): when the input array is already sorted. Even in this case, we have to iterate through each set of numbers once.

The space complexity of Bubble Sort is O(1).

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

 

 

charAt()

charAt 은 문자열에서 인자로 주어진 값에 해당하는 문자를 리턴합니다.

 

문법

JAVASCRIPT

charAt(index)

Copy

 

인자

  • index - 필수
  • 0보다 큰 정수

 

 

설명(description)

문자열에 속하는 문자는 왼쪽부터 오른쪽까지 0부터 인덱싱되어 있습니다. 

charAt은 index로 주어진 값에 해당하는 문자를 리턴합니다. 

인덱스는 0부터 시작하기 때문에 index로 들어갈 수 있는 가장 큰 수는 (문자열.legnth-1)이다. 존재하지 않는 index를 인자로 전달하면 공백이 출력됩니다.

charAt 는 index에 해당하는 문자를 리턴하고, chartCodeAt은 유니코드 값을 리턴하는 차이가 있다.

 

예제 코드

JAVASCRIPT

charAt(index)

 

 

 

charCodeAt()

charCodeAt 메서드는 index에 해당하는 문자의 unicode 값을 리턴합니다.

 

문법(Syntax)

JAVASCRIPT

string.charCodeAt(index)

Copy

 

인자

  • ndex - 필수
  • 0보다 큰 정수

 

설명(description)

유니코드는 모든 시스템에서 일관되게 문자를 표현하기 위한 산업표준입니다. 

charCodeAt은 주어진 index에 해당하는 유니코드 값을 리턴하는데 이 값은 unicode가 지원되는 모든 시스템에서 동일한 문자를 가르킵니다. 

charAt는 index에 해당하는 문자를 리턴하고, chartCodeAt은 유니코드 값을 리턴하는 차이가 있습니다.

 

예제 코드

JAVASCRIPT

var stringName = '자바스크립트'; console.log(stringName.charCodeAt(0)); // 51088 // http://www.unicode.org/charts/PDF/UAC00.pdf 에서 '자'을 찾아보면 'C790'인데 이것은 16진수다. // 이를 10진수로 변환하면 51088 된다.

Copy

 

 

참고 관련 링크

  1. 유니코드
  2. 한글에 대한 유니코드

 

 

 



출처: https://webclub.tistory.com/329 [Web Club]

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요