javascript
배열 자유자재로 선언하기 Array.from()
배열은 그냥
let a=[]를 이용해서도 선언할 수 있다. 하지만 종종 이미 형성된 배열이 필요한 상황이 올때가 있다.Array.from()은 유사배열객체를복사해새로운Array객체를 만든다. 필수적인 매개변수는 배열로 변환하고자 하는 객체이며 추가적으로 배열의 모든 요소에 대해 호출할 함수를 이용할 수도 있다.//ex) String에서 배열 만들기 console.log(Array.from('foo')) // 결과 : ["f", "o", "o"]//ex) Set에서 배열 만들기 const s = new Set(['foo', window]); console.log(Array.from(s)) // 결과 : ["foo", window]💖 화살표 함수를 사용하여 배열의 모든 요소를 변환 할 수 있다.
Array.from([1, 2, 3], x => x + x); // 매개변수는 요소, 인덱스 순 // [2, 4, 6]💡
new Array(n)을 이용해 n의 길이를 가진 배열을 생성할 수 있다.let a = new Array(5).fill(0) console.log(a) // 결과 : [0,0,0,0,0]✅
{length : int a}를 이용해 길이를 설정할 수 있다. 그 이후의 함수는 입맛대로.//ex) 길이를 미리 정하는 배열 const arr = Array.from({length: 4}, (i) => i); console.log(arr); // 결과 : [undefined, undefined, undefined, undefined] //ex) 길이가 7인 0으로 채워진 배열 const arr = Array.from({length: 7}, () => 0); console.log(arr); // 결과 : [0, 0, 0, 0, 0, 0, 0] //ex) 길이가 6인 1씩 증가하는 배열 const arr = Array.from({length: 6}, (v,i) => i); console.log(arr); // 결과 : [0, 1, 2, 3, 4, 5] /index값을 넣은 것이다.
문자열 자르기 substring(int begin_index,int end_index)
string을 자르는데 사용한다.string.substring(int begin_index,int end_index)
index를 포함한begin_index부터end_index까지의문자를 리턴한다.'무지개가무지무지이쁘다'.substring(4,7) // 결과 : 무지무지💖
end_index가begin_index보다 크더라도 알아서 바꾸어 오류없이 작동한다.'무지개가무지무지이쁘다'.substring(2,0) // 결과 : 무지개💖
end_index가string의 길이보다 크더라도 알아서 길이만큼 오류없이 작동한다.'무지개가무지무지이쁘다'.substring(4,999) // 결과 : 무지무지이쁘다💡 필요에 따라
end_index를 사용하지 않을 수도 있다.
string.substring(index)를 이용하면 index를포함한 이후 문자를 전부 리턴한다.'무지개가무지무지이쁘다'.substring(4) // 결과 : 무지무지이쁘다✅
substring()과.length를 함께 사용하면string의 길이를 몰라도 문자열의 마지막 글자들을 가져 올 수 있다.//ex) let exstring = 'https://www.youtube.com/watch?v=D5YijJqhvgA' let videoCode = exstring.substring(exstring.length - 11) console.log(videoCode) // 결과 : D5YijJqhvgA
문자열 나누기 split() / 배열 합치기 join()
split()은 임의의 문자열을 매개변수()에 들어있는 값을 기준으로 문자를 나누어 배열을 만든다.//ex) let exstring = 'https://www.youtube.com/watch?v=D5YijJqhvgA' let shooshook = exstring.split('.') console.log(shooshook) // 결과 : [ 'https://www', 'youtube', 'com/watch?v=D5YijJqhvgA' ] // 모든 '.'을 기준으로 나뉘어 배열이 형성되었다.💖 공백
('')을 기준으로 문자를 나누면 모든 문자별로 나누어 string 길이와 같은 길이를 가진 배열을 만들 수 있다.'AbCdE'.split('') // 결과 : [ 'A', 'b', 'C', 'd', 'E' ]💖 띄어쓰기
(' ')를 기준으로 문자를 나누면 단어별로 나누어 배열을 만들 수 있다.
💖 나누는 기준인 매개변수가 문자열의 시작에 있어도 공백 요소가 생겨난다.let shuffledNum = 'zero1fourthree89one' console.log(shuffledNum.split('zero')) // 결과 : [ '', '1fourthree89one' ]
join()은split()과 반대로 매개변수()에 들어있는 값을 기준으로 양옆의 요소를 합쳐 한 문자로 만든다.//ex) let shooshook = [ 'https://www', 'youtube', 'com/watch?v=D5YijJqhvgA' ] let shaashaak = shooshook.join('!') console.log(shaashaak) // 결과 : 'https://www!youtube!com/watch?v=D5YijJqhvgA' //배열의 사이사이에 '!'가 들어가 문자열이 형성되었다.💖 공백
('')으로 문자를 합치면 아무런 추가없이 연결된다.[ 'A', 'b', 'C', 'd', 'E' ].join('') // 결과 : 'AbCdE'✅
split()과join()을 함께 사용하면 아래 예시와 같이 문자열의 모든 'zero'를 '0'으로 바꾸는 등replace()와 같은 효과를 낼 수 있다. 물론 replace()를 사용하자. 단지split()과join()의 이해를 높이는데 도움이 되었다.
[프로그래머스 문제 : 숫자 문자열과 영단어] 참고ex) let shuffledNum = 'zero1fourthree89one' let onlyNum = shuffledNum.split('zero') console.log(onlyNum) // 결과 : [ '', '1fourthree89one' ] onlyNum = onlyNum.join('0') console.log(onlyNum) // 결과 : '01fourthree89one'
배열에 배열 이어붙이기 concat()
concat()은 배열과 배열을 이어붙이고 싶을때 사용할 수 있다. 물론 문자열에도 concat()이 있고 사용 가능하다. 붙이고 싶은 문자열이 적을 땐문자열+문자열이 더 편할 뿐..//ex) let a = [0,4,5] let b = [1,2,3] console.log(a.concat(b)) //결과 : [ 0, 4, 5, 1, 2, 3 ] //여러개를 이어붙이는 경우 let c = [7,9,2] console.log(a.concat(b,c)) //결과 : [ 0, 4, 5, 1, 2, 3, 7, 9, 2 ]💡 배열의 특정 위치에 데이터를 넣기 원하면
splice()를 참고하자.
자료형 변환 String() / parseInt()
String()은 숫자를 문자로 변환하기 위해사용하고,대문자 S 유의
parseInt()는 문자를 정수형 숫자로 변환하기 위해 사용한다.대문자 I 유의
💡parseFloat()은 문자를 실수형 숫자로 변환해준다.
💡(숫자+'')를 이용해 숫자를 문자로 변환할 수 있다.//ex) let a=123.4 console.log('a : ',a, typeof(a)) //결과 : a: 123.4 number a=a+'' console.log('a : ',a, typeof(a)) //결과 : a: '123.4' string ////숫자와 문자가 더해지면 문자가 되기 때문💡
(+문자)를 이용해 문자를 실수형 숫자로 변환할 수 있다.//ex) b='123.6' console.log('b : ',b, typeof(b)) //결과 : b: '123.6' string //문자를 다른 숫자와 더하기 위해서는 변환 먼저 하기 위해 괄호로 닫아줘야 한다. 123+(+b) //마찬가지로 숫자와 문자가 더해지면 문자가 되기 때문 //예로 +(123+b)를 할 경우 문자열로 연결 후 숫자로 변형되기 때문에 숫자 123123.6이 된다. console.log('b : ',+b, typeof(+b)) //결과 : b: 123.6 number //메서드 안에서 자연스럽게 사용해도 문제 없다.✅
parseInt()는 사실 문자만 정수형 숫자로 변환하는 것이 아니다. 문자가 아닌 실수에 사용하여도 정수로 변환해준다. 이를 이용해 소숫점 이하의 수를 버릴 수 있다. 하지만 가능하면Math.floor()을 이용하자.//ex) console.log(parseInt(33.624476651)) // 결과 : `33`
삼항연산자 condition ? exprIfTrue : exprIfFalse
삼항 [조건문
condition, 참일 때 실행할 식exprIfTrue, 거짓일 때 실행할 식exprIfFalse] 을 이용해 세개의 피 연산자를 이용할 수 있는 방법이다.//ex) function solution(n) { return (n%2===0 ? '짝수' : '홀수' )} //n은 짝수 ? //참이면 '짝수' : //:아니면 '홀수'💖 아직 익숙하지는 않지만
if 명령문의 단축 형태로 사용하기에 딱 좋다. 머리 아프게 else를 안써도 된다는 장점도 크고알고리즘 답안 제출할 때 짧고 이쁘다.
배열 필터 filter()
.filter()는함수를 이용해 배열로부터 필터링된 값들만 보여주는 기능이다.3개의 매개변수(값,인덱스,배열)을 이용하며true, false로 값을 도출하는함수가 필요하다.//ex) var arr = [{ id: 15 },{ id: -1 },{ id: 0 },{ id: 3 },{ id: 12.2 }] function filterByID(item) { if (item.id !== 0) { return true; } return false; } var arrByID = arr.filter(filterByID); // 0. arr[0]부터 가져온 값을 순차적으로 함수에 넣는다. // 1. filterByID함수의 return 값으로 true가 나오면 저장, false가 나오면 버려진다. // 2. 이때 배열 arr 자체는 변하지 않는다. console.log(arrByID) //결과 : [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]✅
.filter()와 같이 함수가 필요한 기능들은화살표 함수와 함께 사용하면 짧고 간결하게 운용할 수 있다. 화살표 함수는 아래와 같다.
화살표 함수 () =>
화살표 함수는 기본 함수식에서function과{}그리고 결과값 도출을 위한return을 생략한함수 표기법이다. 함수가 필요한 기능들에 넣어(매개변수) => 식의 표현으로 짧게 표현하기에 용이하다. 예로 아래의 1번과 2번이 서로 같은 함수이다.//1번 function filterByID(item) { if (item.id !== 0) { return true; } return false; } //2번 (item) => item.id!==0물론 정해진 함수명이 없기 때문에 여러번 호출해서 사용이 불가능 하다는 제한사항이 있다. 여러번 쓰지 않는, 다른 메서드를 위해 매번 커스터마이징이 필요한 함수에 대해 사용하는 것이 좋다.
// 위와 같은 예제 var arr = [{ id: 15 },{ id: -1 },{ id: 0 },{ id: 3 },{ id: 12.2 }] var arrByID = arr.filter((item) => item.id!==0); // 0. arr로 부터 filter의 매개변수(arr의 i번째 값)를 item 이라는 변수로 함수에 전달한다. // 1. item.id!==0 가 true이면 arrByID에 저장, false가 나오면 버려진다. // 2. i를 arr의 배열 길이만큼 반복한다. console.log(arrByID) //결과 : [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]💖 삼항연산자처럼 짧고 조아..
✅.filter(),.reduce(),.map()등과 같이 함수가 필요한 기능들은화살표 함수와 함께 사용하면 짧고 간결하게 운용할 수 있다.
배열 지도 map()
map을 촌스럽게 지도로 번역을 했다. 필터와 동일하게 3개의 매개변수(값,인덱스,배열)를 갖는다. 또 함수도 똑같이 필요하다. 다만true, fales를 내놓아야 할 필요는 없다.map은 처리할 요소를 순차적으로 함수에 넣고 함수에 의해 도출된 값을 새로운 배열에 담는다.//ex) let a = [1,2,3,4,5] var b = a.map( (val) => val%2==0 ? val-1 : val+3); // 0. 배열 a로부터 순차적으로 a의 요소 val을 가져와 화살표 함수에 전달한다. // 1. 삼항연산자에 따라 val을 2로 나눈 나머지가 0이면(짝수이면) ? 이후의 식에 따라 val-1을 반환한다. // 2. 또, : 이후의 식에 따라 홀수이면 val+3을 새로운 배열 b에 반환한다. console.log(b) //결과 : [4,1,6,3,8]💖 지도만 있으면 못난이 요소들도 각자 가야할 길을 쉽게 갈 수 있거든.. -어린황자-
배열 요소의 누적 계산 reduce()
reduce줄이다. 줄이긴 줄인다. 정확한 기능은 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다. 주로 사용되는 방법이배열의 요소를 다 합산하는 기능이다.
reduce()는map(),filter()와 다르게 4개의 매개변수(반환값을 누적하는누산기, 처리할 현재요소, 처리할 현재 요소의인덱스, reduce를 호출한배열)와함수를 받는다.//ex1) 배열 요소의 합 [0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr ) // 0. prev는 값을 저장하는 누산기이다. curr는 배열로 부터 불러온 현재 값이다. // 1. 내부의 식에 따라 값을 계산한다. 그 값은 prev에 저장한다. // 2. 결국 배열의 크기만큼 반복하며 prev에 값이 쌓이게 된다. // 3. 배열의 마지막요소까지 계산 후 prev를 return한다. console.log([0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr )) //결과 : 10 //누적 계산의 결과값//ex2) 최댓값 찾기 [0, 9, 1, 16, 4].reduce( (prev, curr) => prev > curr ? prev : curr ) // 식 내용이 굳이 더하기일 필요는 없다. 프리듀스 101 console.log([0, 9, 1, 16, 4].reduce( (prev, curr) => prev > curr ? prev : curr )) //결과 : 16 //누적 비교의 결과값. Math.max()쓰자.💖 초기값을 정하지 않으면
prev는배열의 0번째 요소가 된다.curr은 자동으로 그 다음 요소가 된다.초기값은 함수 끝에쉼표로 구분하여 적는다.//ex) [0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr ,7); console.log([0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr )) //결과 : 17💡 중첩 배열속에서 배열 안의 배열을 순차적으로 불러와 붙일 수 있다.
//ex) 중첩 배열 펼치기 [[0, 1], [2, 3], [4, 5]].reduce( (acc, crr) => acc.concat(crr)) // 펼친 결과: [0, 1, 2, 3, 4, 5] // flat()쓰자.
전개 연산자 ...
...는 Object나 배열 형태의 자료에서 데이터만을 쉽게 이용할 수 있게 해주는 연산자다....Array의 형태로 사용가능하며 배열 형태의 자료를 전개하여 데이터만 사용할 수 있게 한다.
데이터만 사용시 자료형이 정해지지 않았기 때문에 변수에 넣는 것은 불가하며 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용 가능하다.//ex) const A_months = ["Jan", "Feb", "June"]; console.log(A_months) //결과 : ["Jan", "Feb", "June"] console.log(...A_months) //결과 : Jan Feb June //변수에 직접 넣는 것은 불가능하다. let B = ...A_months //오류 : 씬딱쓰 에러 Unexpected token'...' console.log(B) //배열, 객체, 함수 인자 표현식([], {}, ()) 안에서는 가능하다. let C = [...A_months] console.log(C) //결과 : ["Jan", "Feb", "June"]✅ 그럼 그냥 복사랑 뭐가 다를까? 기본적으로 객체가 담겨있는 변수를 다른 변수에 복사하면 데이터 복사가 아닌 참조가 일어나게 된다.
//ex) 일반 얕은 복사 const fruit_1 = {name:'apple'}; const fruit_2 = fruit_1; console.log(fruit_2.name) //결과 : 'apple' fruit_1.name ='watermelon' console.log(fruit_2.name) //결과 : 'watermelon'다시말해
fruit_1을 참조하고 있는fruit_2는fruit_1을 수정하면 같이 수정된다는 것이다. 그 이유는 같은 데이터 주소를 참조하고 있기 때문이다. 모르고 마주하면 안되는 이유도 모르고 적잖아 당황하게 되는 상황이다.
이때전개 연산자를 이용하면 된다. 괄호를 풀어(전개하여) 동일한 참조값을 가지지 않는값만 가진 데이터로 사용 할 수 있게 된다.//ex) 전개연산자 사용 깊은 복사 const fruit_1 = {name:'apple'}; const fruit_2 = {...fruit_1}; // {...fruit_1} == {name:'apple'} console.log(fruit_2.name) //결과 : 'apple' fruit_1.name ='watermelon' console.log(fruit_2.name) //결과 : 'apple'이와같이
전개 연산자를 이용해 배열 형태의 데이터를 펼쳐서 값을 이용할 수 있다. 이렇게 복사된fruit_2는fruit_1과 독립된 참조값을 가지므로 fruit_1을 가지고 뭔짓을 해도 문제가 없다. 물론 이중 배열이면 이야기가 달라져서 다른 방법을 사용해야 한다.
✅Set()과 함께 사용했을 때 배열의 중복값을 제거하는 그 시너지가 정말 크다. 관련된 내용은 아래와 같다.
✅splice()와 함께 사용하면 배열의 원하는 위치에 배열을 집어넣기 수월하다. 관련된 내용은splice()를 참고하자.
배열 중복값 제거 [...new Set(arr)]
Set객체 자체는 중복값 제거 함수가 아니다. 그저값 콜렉션, 하나의 집합이다.Set내 임의의 값은 값은한 번만 나타날 수 있다(중복 될 수 없다). 즉, 어떤 값이든 그 Set 콜렉션 내에서 유일하다.Set은new 연산자를 이용한 선언과 함께 사용하며중복을 허용하지 않는다.
이러한 이유로Set()은 전개 연산자...와 함께 사용하여배열의 중복값을 쉽게 제거하는 방법으로 사용될 수 있다.//ex) let arr1=[9, 2, 9, 9, 7, 9, 8]; arr2= new Set(arr1) console.log(arr2) //결과 : {9,2,7,8} <--자료형이 마음에 안들기 때문에 ... 이용하여 복사 arr=[...arr2] //결과 : [9,2,7,8] //줄여서 숙어처럼 사용하자. 중복값 제거는 [...new Set(arr)] arr=[...new Set(arr1)] //결과 : [9,2,7,8]✅
숙어처럼 사용하자. 중복값 제거는 [...new Set(arr)]
배열 데이터 수정하기 splice()
splice()는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.splice()는 순서대로 3개의 매개변수 (시작index,지울 요소의 수,추가할 요소)를 이용한다. 이때지울 요소의 수와추가할 요소는 선택 사항이다.//ex) const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); //1번 index 자리에 아무것도 지우지 않고 'Feb'를 추가한다. console.log(months); // 결과 : ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); //4번 index 자리에서 1개를 지우고 'May'를 추가한다.(=교체한다) console.log(months); // 결과 : ["Jan", "Feb", "March", "April", "May"] months.splice(1, 2, '2월','3월'); // 1번 index 자리에서 2개를 지우고 '2월'과 '3월을 추가한다. console.log(months); // 결과 : ["Jan", "2월", "3월", "April", "May"] // 쉼표로 나열하여 여러 요소를 삽입하는 것이 가능하다.💖
지울 요소의 수를 넣지 않으면시작index를 포함해서 이후의 모든 요소를 제거한다.//ex) const months = ['Jan', 'March', 'April', 'June']; months.splice(2); //2번 index 이후로 모든 요소를 제거한다. console.log(months); // 결과 : ["Jan", "Feb"]✅
splice()를 전개연산자...와 함께 사용하면 앞서concat()으로는 불가능했던 배열 안에 배열 넣기가 가능하다.//ex) const A_months = ["Jan", "Feb", "June"]; const B_months = ["March", "April", "May"]; A_months.splice(2,0,...B_months); //2번 index 자리에 아무것도 지우지 않고 B_month를 전개하여 그 요소만 담는다. console.log(A_months); // 결과 : [ 'Jan', 'Feb', 'March', 'April', 'May', 'June' ]//ex) 전개연산자 ...를 사용하지 않을 경우 const A_months = ["Jan", "Feb", "June"]; const B_months = ["March", "April", "May"]; A_months.splice(2,0,B_months); //2번 index 자리에 아무것도 지우지 않고 B_month를 담는다. console.log(A_months); // 결과 : [ 'Jan', 'Feb', [ 'March', 'April', 'May' ], 'June' ]
개념정리 양식
배우게 된 메서드 or 해결 방식
배우게 된 메서드 또는 방식의 예시를 간략히 적었습니다.
💖참고하면 좋을만한장점과 예시를 간략히 적었습니다.
💡참고하면 좋을만한변화형들과 예시를 간략히 적었습니다.
✅응용하면 좋을만한사용방법과 예시를 간략히 적었습니다.
❌오류와 해결에 사용 한해결방법을 간략히 적었습니다
