1. JavaScript - FE (1)

1) 자바스크립트 배열

배열의 선언

• 자바스크립트 배열의 선언은 간단합니다.

var a = []; //배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음. var a = [1,2,3,"hello", null, true, []];

 

• new Array() 문으로 선언할 수도 있지만, 보통은 간단히 '[]' 를 사용합니다. (new Array()는 현업에서 잘 안 씁니다. 둘 다 똑같이 동작하기 때문에 성능차이도 없습니다)
• 배열에는 length 속성이 있어 그 길이를 쉽게 알 수 있습니다.
• 배열에 원소 추가는 index번호와 함께 추가할 수 있습니다.

var a = [4]; a[1000] = 3; console.log(a.length);  //1001 console.log(a[500]);    //undefined console.log(a); //(1001) [4, empty × 999, 3]    0:4    1000:3    length:1001    __proto__:Array(0)

 

• 배열은 사실 push메서드를 통해서 뒤에 순차적으로 추가할 수 있습니다. 가장 일반적인 방법입니다.
• 배열의 앞에 추가하는 방법은 unshift() 메서드를 사용하는 것입니다.

var a = [4]; a.push(5); console.log(a.length);   //2

 

배열의 유용한 메서드들

• 배열은 순서가 있고, push 와 같은 메서드를 제공하고 있어, 추가/삭제/변경이 용이합니다.
• 그 밖에도 많은 메서드(indexOf, join, slice, concat 등)가 있습니다.
• indexOf(obj): 배열 안에 그 값(obj)이 있는지 없는지를 확인. 있으면 인덱스를 반환하고 없으면 -1을 반환합니다. 보통 -1보다 큰지를 비교하여 값이 있는지 없는지를 확인합니다.

//indexOf(obj): 배열의 원소에 특정 값이 들어 있는지 확인할 수 있다. [1,2,3,4].indexOf(3) //2 //join(): 배열의 문자열로 합칠 수 있다. [1,2,3,4].join(); //"1,2,3,4" //concat(obj): 배열을 합칠 수 있다. [1,2,3,4].concat(2,3);  //[1,2,3,4,2,3]

 

• slice(begin, end): slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 수정되지 않습니다.

var test = 'test'; var animals = ['ant', 'bison', 'camel', 'duck', 'elephant', test]; console.log(animals.slice(2)); //  output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); //  output: Array ["camel", "duck"] var tst = (animals.slice(1, 6)); console.log(tst); //  output: Array ["bison", "camel", "duck", "elephant", "test"] test = 'test222222'; console.log(tst); //  output: Array ["bison", "camel", "duck", "elephant", "test"] console.log(animals); //  output: Array ["ant", "bison", "camel", "duck", "elephant", "test"]

 

• join(): join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

var elements = ['Fire', 'Air', 'Water']; console.log(elements.join());     // "Fire,Air,Water" console.log(elements.join(''));    // "FireAirWater" console.log(elements.join('-'));   // "Fire-Air-Water"

 

• 배열의 여러 가지 메서드도 모두 함수이므로 반환 값이 존재합니다.
• 주의할 점은 어떤 메서드는 새로운 배열을 반환하고, 어떤 메서드는 원래 배열의 값을 변경시킨다는 것입니다.
• 예를 들어서 concat은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환합니다. 이점을 주의해야 합니다.

//origin과 changed는 같은 배열원소를 가지고 있지만, 두 개가 가리키는 메모리 주소는 다릅니다. 즉, reference가 다르다고 할 수 있습니다. var origin = [1,2,3,4]; var changed = origin.concat();  //[1,2,3,4] console.log(origin === changed);  //[1, 2, 3, 4] [1, 2, 3, 4] false var changed2 = […origin, 2, 3];  //스프레드 오퍼레이터. concat과 똑같이 동작함. 마찬가지로 origin은 바뀌지 않음. es2015에서 추가됨. console.log(changed2);  //[1, 2, 3, 4, 2, 3]

 

배열 탐색 - (foreach, map, filter)

• 배열의 순회는 for 문을 사용하거나, forEach와 같은 메서드를 통해서 할 수 있습니다. 자바스크립트 for문은 다른 프로그래밍 언어와 비슷합니다.
• array.forEach(function(v, i, o){}) : v는 value, i는 index, o는 object(배열)를 의미합니다.
• forEach는 함수를 동작하는 함수입니다. 자바스크립트는 1급 함수다. 그러면 함수를 변수로 취급한다고 할 수 있는데요 여기서는 아규먼트를 하나의 변수로 출력한 것입니다. 즉, forEach의 매개변수를 function으로 받아서 그 함수를 실행해주고 있습니다.

//forEach는 함수를 인자로 받고 있어요. ["apple","tomato"].forEach(function(value) {    console.log(value) //apple        tomato }); //forEach 외부에서 정의한 함수를 매개변수로 받을 수도 있습니다.

→ 인자로 v, i, o 사용시

 

• forEach는 for문에 비해 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요 없습니다. 이 부분은 알아서 자바스크립트 파서가 처리해줍니다. 결국, for문을 쓰면서 생길 수 있는 실수를 줄여줍니다.
• 코드의 가독성도 좋아서 읽기 편한 코드를 만들 수 있습니다.
• for문과 성능 차이도 있을 수 있지만 미미한 차이입니다. 
• 한 가지 더 특이한 점은 forEach와 같은 메서드가 함수를 인자로 갖는다는 점입니다.

 

• 그리고 여기 소개되고 있는 메서드들의 반환값도 주의해야 합니다. 어떤 메서드는 새로운 배열을 반환하기도 합니다.
• 아래는 새로운 배열을 반환하는 map메서드 예제입니다.
• map은 반환되는 정보를 모아서 새로운 배열을 반환하게 되어 있습니다. array의 원소를 돌면서, 값을 연산 또는 변경시킨 후에 새로운 배열로 만들어서 반환합니다. 기존 배열은 그대로 유지합니다.

var newArr = ["apple","tomato"].map(function(value, index) {    return index + "번째 과일은 " + value + "입니다"; }); console.log(newArr)  // 여러분들이 실행해보세요 // ["0번째 과일은 apple입니다", "1번째 과일은 tomato입니다"]

 

• filter() 메서드는 callback함수를 호출하여 callback이 true로 반환하는 값들만 새로운 배열로 만들어 반환합니다. 기존배열은 바뀌지 않습니다. 다음 예제는 10이상의 값들만 출력하는 예제입니다.

function isBigEnough(value) {   return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered 는 [12, 130, 44]

 

• 그리고 더 학습하고 싶은 부분이 생기면 자바스크립트 함수형 프로그래밍을 공부하는 것도 좋습니다.
  그리고 익숙해질 때까지 앞으로 나오는 반복문은 이 메서드들을 이용해보는 걸 추천합니다.  
  아 물론 for문과 while문을 사용한 배열의 탐색을 잘 모른다면, 그것부터 익숙하게 연습하세요!
  MDN사이트에서 학습할 수 있습니다.

참고자료

[참고자료] Javascript Array Object
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

[참고자료] Javascript Array Reference

https://www.w3schools.com/jsref/jsref_obj_array.asp