[Javascript] 배열 메소드 연습문제

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

camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-websit-transition") == 'WebkitTransition';

 

Hint : split을 사용해 문자열을 배열로 바꾼 다음 join을 사용해 다시 합친다.

 

function camelize(str){
  let result = str
    //1. '-' 기준으로 나누어 배열로 반환한다.
    .split('-') //[background, color]
    
    //2. 배열의 첫번째는 그대로 반환하고 두번째부터는 첫글자만 대문자가 되어야 한다.
    .map(
      function(word, index){
      	if(index==0){
      		return word;
      	} else{
      		return word[0].toUpperCase() + word.slice(1);
      	}
      }
  	)
    //[background, Color]
    
    //3. join을 이용해서 합쳐준다.
    .join("");
    
    return result
}

 

split - 해당 문자를 기준으로 나눠서 배열로 반환한다.

slice(n,m) - 해당 순서부터 쭉 반환 or m으로 어디까지 자를지 정할 수 있음.

map - 배열을 함수를 이용해 새로운 배열로 반환한다.

join - 배열의 모든요소를 합칠 수 있다. 입력한 값을 그 사이에 넣을수도 있다.

 

깔끔한 정답

function camelize(str){
    let result = str
    .split('-')
    .map(
        (word, index) => index==0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join('');

    return result;
}

 

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

a 이상 b 이하 범위에 속하는 요소만 골라 새로운 배열에 집어넣고

해당 함수를 출력 filterRange(arr, a, b)

 

function filterRange(array, a, b){
  return array.filter(item => (a<=item && item <= b));
}

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

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

console.log(filtered); // [3,1]

console.log(arr); // [5,3,8,1]

 

✔️ map 과 filter 의 차이

두 메서드 모두 기존 메서드를 보존하면서 새로운 배열을 만들어낸다는 공통점이 있으며

map 은 배열을 콜백함수로 적용한 새로운 배열을 리턴하는 것이며

filter 는 배열을 조건에 맞는 요소들로 이루어진 배열을 리턴하는 것이다.

 

내림차순으로 정렬하기

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

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

console.log(arr);

✔️ sort : 배열의 목록을 오름차순, 내림차순으로 정렬할 때 유용.

 

<<확장 가능한 계산기>> 다시보기

 

//내가 작성한 코드
function Calculator(){
        this.calculate = function(value){
            let result = value.split(" ");
            let a = +result[0];
            let b = +result[2];
            let c = result[1];
            if(c=="+"){
                return a+b;
            } else{
                return a-b;
            }

        }
    }

    let calc = new Calculator;

    console.log(calc.calculate("10 - 1"));
    
    
    //정답보고 작성하다가 안됨
        function Calculator(){
        this.methods = {
            "-" : (a,b) => a-b,
            "+" : (a,b) => a+b
        };
        this.calculate = function(str){
            let split = str.split(' '),
                a = +split[0],
                op = split[1],
                b = +split[2];

            if(!this.methods[op] || isNaN(a) || isNaN(b)){
                return NaN;
            }
            //만약 숫자가 아닌 값들이 들어갔으면 NaN를 반환하도록 설정한 것.
            console.log(this.methods[op](a,b))
            return this.methods[op](a,b);
        };

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

    let calc = new Calculator;
    // calc.calculate()
    console.log(calc.calculate("3 + 7"));

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

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

 

이름 맵핑하기

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);

console.log(names);

 

<<객체 매핑하기>> 다시보기

✔️ 기존의 객체들로 이루어진 배열을, map을 이용해서 새로운 요소의 객체들로 매핑할 수 있다.

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(user => ({
  fullName : `${users.name} ${users.surname}`,
  id : users.id
}))

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

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

 

 

 

Reference

• https://velog.io/@tjdud0123/javascript-map-filter-%ED%95%A8%EC%88%98
• https://ko.javascript.info/array-methods