앗뇽앗뇽 나는 죠니야🙋🏻‍♀️

다들 앗뇽하신가여~
오늘은 기본을 탄탄하게 기탄입니다~~

기탄 시리즈를 만들게 된 이유🤔

솔직히 '기탄'아는 빅뱅들은 고개를 드세욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
기탄 저 어렸을 때 진짜 많이 풀었는데 여러분도 그러셨나요? 튼 기탄의 기탄은 그 기탄이 맞습니다ㅎㅎ
왜냐하면 기본은 탄탄해야 한다는 걸 너무나도 느끼고 있는 요새이기 때문이죠....

최근에 사수님께서 제 코드를 봐주시다 이건 기본인데 모르면 너무 화날것 같다는 소리를 들었습니다.. 저도 제대로 알고 있다고 생각했던 부분인데 사수님이 정색을 하면서 그렇게 말하니 제가 맞게 코드를 짠건지 제가 정말 제대로 알고 있는건지 불안해지더라구요,, (물론 배열에 관련된 내용은 아닙니다.)

저는 요새 코딩을 하다가 비용에 관련된 이야기를 정말 많이 듣게 됩니다. 워낙 큰 단위의 아이들을 만지기 때문일까요? 조금 더 효율성있고 간단한 코드를 찾고 만들어내기 위해 정말 이것저것 많이 시도해 보고 있습니다. 저는 전공자지만 최소 학점만 채우고 졸업할 정도로 전공과 관련된 수업을 거의 듣지 않았습니다. 개발자가 될 생각이 전혀 없었기 때문이죠. 그러다보니 기본이 많이 부족해요,,,

그리고 애매하게 알고있기 때문에 기초는 제가 안다고 자부해버리고 공부를 안하게되었습니다. 그래서 저 같은 분들(전공자이긴한데 개발자할 마음 1도 없어서 학부때 공부 대충하다가 어쩌다 보니 개발하고 있는 사람들,,,,) 혹은 처음 공부하시는 분들은 저와 함께 기탄하시면 좋을것같아요~

오늘은 그 시작입니다.

배열🌿

배열은 많은 양의 데이터를 보관해야 할 때 효율적으로 데이터를 관리하기 위해 사용합니다.

배열 기초🌱

배열 생성

var arr = [];

var arr = new Array();

배열을 생성하는 방법은 대괄호를 입력하거나 new Array()의 방법으로 선언합니다.

값 할당

var names = [];
names[0] = "철수";
names[1] = "영희";
names[2] = "죠니";

var names = ["철수", "영희", "죠니"];

첫번째 방법처럼 배열을 생성한 후 원소에 값을 할당하거나 배열 생성과 동시에 원소에 값을 할당할 수 있습니다.

특정 인덱스의 값

var names = ["철수", "영희", "죠니"];
console.log(names[2]); // 죠니

특정 인덱스의 값을 알고 싶다면 그 인덱스의 값을 넣으면 됩니다.
인덱스의 시작은 0부터 시작합니다.

배열의 길이

var names = ["철수", "영희", "죠니"];
console.log(names.length); // 3

배열의 길이는 length를 이용하여 출력합니다.

배열의 메소드🌱

배열의 매소드는 정말 다양합니다. 하나하나씩 보도록 할게요.

join(seperator)

var names = ["철수", "영희", "죠니"];
console.log(names.join('&')); // 철수&영희&죠니

배열에 join() 메소드를 이용하면 배열의 모든 값들을 더해 하나로 만들어줍니다. 이 때 인자값으로 문자열을 넘겨주면 그 문자열은 각각의 값들 사이에 들어가서 출력되게 됩니다.

reverse()

var names = ["철수", "영희", "죠니"];
console.log(names.reverse()); // ['죠니', '영희', '철수']

배열의 순서를 거꾸로 출력해줍니다.

sort()

var names = ["Peter", "Alice", "Bob"];
console.log(names.sort()); // ['Alice', 'Bob', 'Peter']

var fruit = ["바나나", "사과", "포도"];
console.log(fruit.sort()); // ['바나나', '사과', '포도']

sort() 함수를 이용하면 배열의 값들을 알파벳(가나다) 순으로 정렬시켜 출력해줍니다.

sort(func)

var numbers = [23, 11, 87, 25];

console.log(
  numbers.sort((a, b) => {
    return a - b;
  })
);  // [11, 23, 25, 87]

var numbers = [23, 11, 87, 25];

console.log(
  numbers.sort((a, b) => {
    return b - a;
  })
);  // [87, 25, 23, 11]

숫자를 오름차순으로 정렬하고 싶다면 위의 방법을 내림차순으로 정렬하고 싶다면 두번째 코드를 이용하면 됩니다.

concat(arr)

var korean = ["철수", "영희", "죠니"];
var foreigner = ["Simon", "Mizuki", "LingLing"];
var people = korean.concat(foreigner);
console.log(people); //[ '철수', '영희', '죠니', 'Simon', 'Mizuki', 'LingLing' ]

당연히 console.log안에 korean.concat을 넣어도 나옵니다.
하지만 전 그냥 새로운 변수를 선언해서 넣어줬어요.

요새는 근데

var fruit = ["사과", "포도", "배"];
fruit = [...fruit, "체리", "복숭아", "망고"];
console.log(fruit); //[ '사과', '포도', '배', '체리', '복숭아', '망고' ]

이 방법을 더 많이 쓰는 것 같더라구요,,,
그냥 처음 봤을 때 신기했던게 생각이 나서,,,ㅎㅎ

slice(start, end)

var friends = ["철수", "영희", "죠니", "다정", "지훈"];
console.log(friends.slice(1, 3)); //[ '영희', '죠니' ]

slice는 배열의 start인덱스부터 end인덱스 전까지의 원소를 잘라내 배열로 출력합니다. 그래서 위의 코드에서는 인덱스 1번과 인덱스 2번의 값을 배열로 출력해줍니다.

splice(start, end)

var friends = ["철수", "영희", "죠니", "다정", "지훈"];
console.log(friends.splice(1, 3)); //[ '영희', '죠니', '다정' ]

splice는 배열의 start인덱스부터 end인덱스까지의 원소를 잘라내 배열로 출력합니다. 그래서 위의 코드에서는 인덱스 1번과 2번 그리고 3번의 값을 배열로 출력해줍니다.

push(args)

var friends = ["철수", "영희", "죠니", "다정", "지훈"];
friends.push("민수");
console.log(friends); //[ '철수', '영희', '죠니', '다정', '지훈', '민수' ]
friends.push("하윤", "지나");
console.log(friends);//['철수', '영희','죠니', '다정','지훈', '민수','하윤', '지나']

friends 배열에 새로운 값을 추가하고 싶다면 push를 이용하면 됩니다. 하나 혹은 여러개의 값을 추가할 수 있습니다. 다만 배열을 추가하게 될 경우 아래의 코드처럼 각각의 값이 추가가 되는 것이 아닌 배열이 추가가 된다는 것을 주의해주세요.

var friends = ["철수", "영희", "죠니", "다정", "지훈"];
friends.push("민수");
console.log(friends); //[ '철수', '영희', '죠니', '다정', '지훈', '민수' ]
var moreFriends = ["하윤", "지나"];
friends.push(moreFriends);
console.log(friends); //[ '철수', '영희', '죠니', '다정', '지훈', '민수', [ '하윤', '지나' ] ]

pop()

var friends = ["철수", "영희", "죠니", "다정", "지훈", "민수"];
console.log(friends.pop()); //민수
console.log(friends); //[ '철수', '영희', '죠니', '다정', '지훈' ]

pop메소드를 사용하면 배열의 가장 마지막 값을 잘라냅니다.

unshift(args)

var friends = ["철수", "영희", "죠니", "다정", "지훈", "민수"];
friends.unshift("하윤", "지나");
console.log(friends); //['하윤', '지나', '철수', '영희', '죠니', '다정', '지훈', '민수']

배열의 unshift 메소드는 기존에 있던 배열의 맨 앞에 새로운 값을 추가할 때 사용합니다.

shift()

var friends = ["철수", "영희", "죠니", "다정", "지훈", "민수"];
console.log(friends.shift()); //철수
console.log(friends); //['하윤', '지나', '철수', '영희', '죠니', '다정', '지훈', '민수']

이 메소드는 배열의 가장 첫번째 맨처음의 원소를 잘라냅니다. 사실 unshift나 shift는 다른 방법으로도 충분히 값을 넣거나 뺄 수 있어서 사용하는 경우는 실제로 본적이 한번도 없지만 그래도 이런 아이도 있다니 신가하지 않습니까...? ㅎㅎ

filter()

const desserts = [
  { name: "icecream", price: 2000 },
  { name: "chocolate", price: 1500 },
  { name: "coockie", price: 1000 },
  { name: "candy", price: 500 },
  { name: "jelly", price: 1800 },
  { name: "cake", price: 5000 },
];

var cheapDesserts = [];
for (var i = 0; i < desserts.length; i++) {
  if (desserts[i].price <= 1000) {
    cheapDesserts.push(desserts[i]);
  }
}
console.log(cheapDesserts); // [ { name: 'coockie', price: 1000 }, { name: 'candy', price: 500 } ]

console.log(desserts.filter((dessert) => dessert.price <= 1000)); // [ { name: 'coockie', price: 1000 }, { name: 'candy', price: 500 } ]

둘다 똑같이 1000원 이하의 싼 간식을 출력하는 코드입니다. 어떤게 더 간단해보이나요 ?
1) 반복문을 하나하나 돌리고 조건문으로 조건을 충족하면 미리 선언해놓았던 배열에 삽입하는 방법
2) filter를 이용하여 해당 조건에 해당되는 배열을 출력하는 방법.
2번이 설명부터도 짧고 간단하죠 ?
filter()메소드는 이렇게 배열에 특정 조건을 넣어 바로 조회하고 출력할 수 있습니다.

map()

const desserts = [
  { name: "icecream", price: 2000 },
  { name: "chocolate", price: 1500 },
  { name: "coockie", price: 1000 },
  { name: "candy", price: 500 },
  { name: "jelly", price: 1800 },
  { name: "cake", price: 5000 },
];

console.log(desserts.map((dessert) => dessert.name)); // [ 'icecream', 'chocolate', 'coockie', 'candy', 'jelly', 'cake' ]

map 메소드는 desserts배열을 가져와 배열로 변환할 수 있습니다. 다만 순서가 기존의 순서와 다를 수도 있어요.

some()

const desserts = [
  { name: "icecream", price: 2000 },
  { name: "chocolate", price: 1500 },
  { name: "coockie", price: 1000 },
  { name: "candy", price: 500 },
  { name: "jelly", price: 1800 },
  { name: "cake", price: 5000 },
];

console.log(desserts.some((dessert) => dessert.price <= 1000)); // true

배열에 특정 조건을 만족하는 값을 가진 원소가 있는지 없는지 확인하는 메소드입니다. 결과값은 true 아님 false 입니다.

every()

const desserts = [
  { name: "icecream", price: 2000 },
  { name: "chocolate", price: 1500 },
  { name: "coockie", price: 1000 },
  { name: "candy", price: 500 },
  { name: "jelly", price: 1800 },
  { name: "cake", price: 5000 },
];

console.log(desserts.every((dessert) => dessert.price <= 1000)); // false

배열안의 모든 원소가 특정 조건을 만족하는지 확인하는 메소드입니다. 결과값은 true 아님 false 입니다.

오늘의 '기본을 탄탄히'는 배열에 대해 알아보는 시간을 가졌습니다.
물론 배열에서 사용하는 모든 메소드들을 설명하지는 못했지만, 궁금한게 있으시다면 W3School이나 MDN web docs를 참고해주세요!

그럼 다들 오늘도 즐거운 하루되세요 !

그럼 20000,