배열(Array)과 메서드(Method) - 문제 풀이

border-left-width를 borderLeftWidth로 변경하기

function camelize(str) {
  let arr = str.split('-'); //getArr = [boder, left, width];
 
  for (let n = 1; n < arr.length; n++) {
    let changeStr = arr[n].split('');
    changeStr[0] = changeStr[0].toUpperCase();
    arr.splice(n, 1, changeStr.join(''));
  }
  return arr.join('');
}

풀이 순서

1. 받은 문자열 중에 - 기호를 빼서 배열로 가져옴.

• split 메소드 사용

2. 배열로 가져온 요소 값의 첫 알파벳을 대문자로 변경

• for 문 작성
• arr[n]의 값을 다른 변수에 저장하는데 이 때 글자로 쪼개서 전달
  (문자열을 그냥 바꿀 수는 없다 str[0] = H 이렇게는 불가능)
• 쪼개진 글자를 가진 변수에서 가장 처음 요소를 대문자로 변환
• 그리고 다시 arr에 splice 메소드 사용하여 원래 자리의 요소는 지우고 쪼개진 글자들을 join 메서드로 모아 요소로 추가

3. 다시 문자열로 변환

• 새롭게 구성된 arr를 join 메소드 사용 문자열로 변환하여 반환

해답.

(split + map + join 으로 한 번에 해결)

function camelize(str) {
  return str
    .split('-') // splits 'my-long-word' into array ['my', 'long', 'word']
    .map(
      // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word']
      (value, index) => index == 0 ? value : value[0].toUpperCase() + value.slice(1)
    )
    .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord'
}

*map은 자주 사용된다고 하니 잘 알아두자.

---

특정 범위에 속하는 요소 찾기

배열 arr의 요소 중 a이상 b 이하 범위에 속하는 요소만 골라 새로운 배열에 집어넣고, 해당 요소를 출력해주는 함수 filterRange(arr, a, b)를 작성해봅시다.

새로 작성하는 함수는 기존 배열 arr을 변경하면 안 되고, 반환되는 함수는 새로운 배열이어야 합니다.

let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

function filterRange(arr, a, b) {
  return arr.filter(value => (a <= value && value <= b))
}
alert( filtered ); // 3,1 

alert( arr ); // 5,3,8,1 

풀이

• filter 메서드를 이용하여 a보다 크거나 같고, b보다 작거나 같은 수를 찾아서 반환한다.

---

특정 범위에 속하는 요소 찾기(배열 변경하기)

작성한 함수는 기존 배열을 변경하기만 하고 아무것도 반환하지 않아야 합니다.
(배열의 모든 요소(i)는 다음 조건을 만족해야 합니다. a ≤ arr[i] ≤ b)

function filterRangeInPlace(arr, a, b) {
  
  for (let i = 0; i < arr.length; i++) {
    let value = arr[i];

// 조건에 맞지 않는 요소 제거
    if (value < a || value > b) {
      arr.splice(i, 1);	
      i--;
    }
  }
  
}

풀이

1. 배열의 요소를 다른 변수에 저장
2. 변수 값이 원하는 범위 안에 위치하지 않는다면 배열에서 제거

• 요소가 제거되고 나면 뒷 요소들이 자리를 채우기 때문에 인덱스(i)를 증가시키지 않고 다시 제자리에서 검증한다.

---

내림차순으로 정렬하기

let arr = [5, 2, 1, -10, 8];

arr.sort( ( a, b ) => b - a );

alert( arr ); // 8, 5, 2, 1, -10

풀이

• 오름 차순 계산하는 sort( (a,b) => a - b) 를 거꾸로 적용해봄..

---

배열 복사본 정렬하기

함수 copySorted(arr)는 복사 후 정렬된 배열을 반환해야 합니다.
단 이때 arr은 변경되면 안 됩니다.

let arr = ["HTML", "JavaScript", "CSS"];

function copySorted(arr) {
  // 내가 처음 작성했던 답.
  let sortArr = arr.slice();
  return sortArr.sort();
  
  // 간단하게 작성이 가능하다.
  return arr.slice().sort();
}

let sorted = copySorted(arr);

alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)

풀이

• arr 배열의 값이 변경되면 안되기 때문에 먼저 slice로 복사하여 새로운 배열로 만들고 sort를 실행하여 사전편집 순으로 정렬하였음.

---

"1 + 2"와 같은 문자열을 받아서 '숫자 연산자 숫자' 형태(공백으로 구분) 바꿔주는 메서드를 구현.

해답

function Calculator() {

   this.methods = {
    "+": ( a, b ) => a + b,
    "-": ( a, b ) => a - b,
  };
  
  this.calculate = function(str) {
    let useSplit = str.split(' '),
    a = +useSplit[0],
    op = useSplit[1],
    b = +useSplit[2];

    if (!this.methods[op] || isNaN(a) || isNaN(b)) {
      return NaN
    }

    return this.methods[op](a, b);
  };
  
  this.addMethod = function(name, func) {
    this.methods[name] = func;
  };

}

let powerCalc = new Calculator;

powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);
powerCalc.addMethod("**", (a, b) => a ** b);

let result = powerCalc.calculate("2 ** 3");

alert( result ); // 8
alert( powerCalc.calculate("3 + 7") ); // 10

풀이

1. +, - 를 수행하는 메서드를 작성하여 +, - 연산자에 따른 a, b 숫자의 연산 방법을 작성
2. 받은 문자열에 대한 split 작업 후 배열 요소들을 메서드에 사용되는 값과 매칭시킨다.
3. 잘못 된 입력값에 대한 처리 추가
4. 메서드를 실행한 값을 리턴
5. 함수에 추가되는 기능을 함수 밖에서 직접 함수 안으로 추가한다.

---

이름 매핑하기

name을 나타내는 프로퍼티를 가진 객체 user가 담긴 배열이 있습니다.
name의 값만 담은 새로운 배열을 만들어주는 코드를 작성해보세요.

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let users = [ john, pete, mary ];

let names = users.map(item => item.name);

alert( names ); // John, Pete, Mary

풀이

map 메서드의 설명을 보고 간단하게 적용하였음

---

객체 매핑하기

name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요.

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(item => ({
  fullName : `${item.name} ${item.surname}`,
  id : item.id,
}));

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith

풀이

1. map으로 모든 요소에 대해 함수를 실행하여 새로운 배열을 만들고자 한다.
2. 기존 배열에서의 name과 surname을 새로운 배열에서 fullname으로 합치고, id는 그대로 가져온다.

** 여기서 ( { fullName : ~~ , id : ~~ } ) --> 중괄호를 왜 괄호로 감싸는지 궁금했는데 내 생각으론 괄호 안에 값을 묶어서 보낸다는 의미로 객체 형태로 내보내기 위한 것으로 생각된다. ( 틀렸다. )

** 해설을 보았는데 화살표 함수는 본문이 없는 형태와 본문이 있는 형태인 방법으로 작성한다고 한다.
본문 없는 형태 value => expr(표현식), 본문이 있는 형태 value => {...}이 때 중괄호를 만나게 되면 JS는 객체의 시작이 아닌 함수가 실행되는 본문인 것으로 인식해버린다고 함. 그래서 소괄호를 사용하여 이를 피하는 것이라고 함!

시행착오

• map을 사용해야겠다고는 생각했는데
  users.map(item => { fullName :(?) =(?) item.name + item.surname, id :(?) =(?) item.id }
  이런식으로 적고 괜히 헷갈려 하고, 괄호로 감싸줄 생각은 못하였음.
  map.... ㅎㅎ좋은 함수당

---

나이를 기준으로 객체 정렬

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let arr = [ pete, john, mary ];

function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

// now: [john, mary, pete]
sortByAge(arr);

풀이

• sort 메서드를 사용하여 객체 안의 age값을 비교함.

** 나의 초기 답안..
arr.sort로 이미 arr안에 접근하였으니 다시 arr를 쓰지않고 바로 index.key value값을 찾아주면 된다.. (a, b) 2개 이상의 매개변수는 감싸줘라 제발..

function sortByAge(arr) {
  arr.sort(a, b => arr[a].age - arr[b].age);
}

---

평균 나이 구하기

age를 나타내는 프로퍼티를 가진 객체가 여러 개 담긴 배열이 있습니다.
평균 나이를 반환해주는 함수 getAverageAge(users)를 작성해보세요.

평균을 구하는 공식은 (age1 + age2 + ... + ageN) / N 입니다.

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };

let arr = [ john, pete, mary ];

function getAverageAge(people) {
  return (people.reduce((prev, user) => prev + user.age, 0)) / people.length;
}


alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28

풀이

• 모든 요소를 돌며 함수를 실행하고 그 값을 누적시켜서 반환해주는 reduce 메서드를 사용하였다.

---

중복 없는 요소 찾아내기

function unique(arr) {
  let newArr = [];

  for (let key of arr) {
    if(!newArr.includes(key)) {
      newArr.push(key);
    }
  }
  return newArr
};

let strings = ["Hare", "Krishna", "Hare", "Krishna",
  "Krishna", "Krishna", "Hare", "Hare", ":-O"
];

alert( unique(strings) ); // Hare, Krishna, :-O

풀이

• 새로운 빈 배열을 작성.
• for ... of 로 주어진 배열을 모두 돌 수 있도록 작성
• strings 배열안에 있는 요소와 새로운 배열에서 같은 값을 찾지 못한다면 새로운 배열에 그 요소를 저장
• 만약 같은 요소를 찾게 되면 아무것도 하지않고 그냥 넘어간다.