[바닐라코딩 | Javascript] - Part3 요약

1)켄을 찾아라

(1)문제

켄을 찾아라 - Starter Kit

(2)풀이

function findKen(arr) {
  for(let i =0; i<arr.length; i++){  
  if(arr[i]==="Ken")
  { return `켄은 ${i}에 있다`} 
  }
}

 

2)바코바코바코바 - 재귀함수

(1)문제

바코바코바코바 - Starter Kit

 

(2)풀이

function repeatVaco(n) {
  if(n===0){
    return "";
  }
  else if(n%2 !==0 ){
   return repeatVaco(n-1)+"바"
  }
  else if(n%2 ===0){
    return repeatVaco(n-1)+"코"
  }
}

(3)재귀함수 실수

 

당초 아래와 같이 repeatVaco(n) 할당 후 return하려고 했는데 무한 반복으로 출력 오류발생하였음.

//Uncaught RangeError: Maximum call stack size exceeded 
//무한하게 함수가 서로가 서로를 호출해서 호출 스택(call stack)이 터져버림.

function repeatVaco(n) {
  if(n===0){
    return "";
  }
  else if(n%2 !==0 ){
   repeatVaco(n)= repeatVaco(n-1)+"바";
  }
}
console.log(repeatVaco(1));

 

 

3)가장 작은 수 

(1)문제

가장 작은 수 - Starter Kit

 

(2)접근

배열 데이터의 각 item을 비교하여 작은 수가 더 오른쪽이 되도록 수정함. 결과적으로 가장 작은 수가 배열 데이터의 가장 오른쪽에 위치하게 된다. 이를 index하여 반환함.

 

(3)풀이

function findMinNumber(arr) { 
  let compare = function(a,b){if(a<b){return a} else {return b}};
  for(let i=0; i+1<arr.length; i++){
    arr[i+1] = compare(arr[i],arr[i+1])
  };
  return (arr[(arr.length-1)]);
 }

 

4)묻고 더블로

(1)문제

묻고 더블로 - Starter Kit

 

(2)접근

for문을 2순환하도록 하고 싶었으나 할 줄 몰라 1순환시 i 범위를 2배로 하였다.

 

(3)풀이

function doubleArray(arr) {
  let newArr = [];
  for(let i =0; i< (2*arr.length); i++){
    if(i<arr.length){newArr.push(arr[i]);}
    else if (i>=arr.length){newArr.push(arr[(i-arr.length)])}  
  }
  return newArr;
}

 

5)숫자 쪼개기

(1)문제

숫자 쪼개기 - Starter Kit

 

(2)접근

주어진 인수 자릿수를 확인(toString() 및 string.length)하고 가장 높은 자릿수의 숫자부터 차례로 각 자릿수의 숫자를 구해 새로운 배열 데이터에 push해준다. 이렇게 하면 문제의 요구사항인 요소 type도 문자열이 아닌 숫자로 된다. 참고로 toString() 메소드로 문자열이 된 숫자의 각 자릿수를 index할 경우 각 숫자의 데이터 형태는 문자열이 되게 된다.

 

(3)풀이

for문을 종료 조건이라고 생각하면 부등호 방향을 잘못 설정하게 된다. 종료가 아닌 실행 조건이라고 보는게 더 적절하다.

function splitNumber(num) {
  //자릿수 구하기
  let numDigit = num.toString().length;
  //새로운 배열 데이터
  let newArr=[];
  for (let i = numDigit; i>=1; i--){
    let integer = Math.floor(num/(10**(i-1)));
    let remain = integer % 10
    newArr.push(remain);
  }
  return newArr;
}

 

(4)관련 학습 

①return 위치에 따른 결과 차이

ⓐfor 실행문 안

실행문에서 바로 전체 함수 종료됨.

let bc = function(){
  for(i=0; i<=4; i++){
  var a = new Number(i); 
   return a; // a= new Number(0) 할당 후 반환됨과 동시에 종료됨.
  };
};
document.write(bc()); // 0

ⓑfor 실행문 밖 

for문 모두 수행 후 전체 함수 종료됨.

let bc = function(){
  for(i=0; i<=4; i++){
  var a = new Number(i); 
  };
  return a; // for 반복문 끝난 후 최종 a 값 반환함.
};

document.write(bc()); // 4

ⓒ참고 URL

[TIL] 반복문 종료방법(break, continue, return)

 

②변수 선언 위치에 따른 결과 차이

ⓐfor 실행문 안

let bc = function(){
  for(i=0; i<=4; i++){
    var sum= 0 ////초기값을 for문 안에서 선언, for문 반복될 때 마다 재할당. 
    var a = new Number(i);
    sum = sum + a; // 마지막 실행문의 a는 4가 할당됨. 
  };
  return sum; // for문 모두 반복 후 반환 및 전체 함수 종료 
};
document.write(bc()); //4

ⓑfor 실행문 밖

let bc = function(){
  var sum= 0  //초기값을 for문 밖에서 선언
  for(i=0; i<=4; i++){
    var a = new Number(i);
    sum = sum + a;
  	};
  return sum; // for문 모두 반복 후 반환 및 전체 함수 종료 
};

document.write(bc()); //10

 

③거듭제곱(**)

거듭제곱 연산자(**)는 왼쪽 피연산자를 밑, 오른쪽 피연산자를 지수로 한 값을 구합니다.

거듭제곱 (**) - JavaScript | MDN

 

④특정 숫자의 자리수를 구하는 방법 (toString() method → length property)

toString() 메소드를 활용한 후 문자열 형태가 된 데이터에 length property를 사용해 숫자 자릿수를 구할 수 있음.

 

String: length → The length data property of a string contains the length of the string in UTF-16 code units.

var num = 12345;
num = num.toString();  // 데이터 Type 문자열로
numDigit = num.length; // 문자열 데이터 길이 
console.log(numDigit);

*참고로 숫자 형태의 데이터의 경우 string 등과 다르게 indexing 못함. 더불어 length property도 사용 못함.

 

6)객체 만들기

(1)문제

객체 만들기 - Starter Kit

(2)접근

①key/value 추가하기

빈 객체 데이터에 임의의 key에 value를 할당해주면 해당 key/value가 객체 데이터에 추가된다.

var person = {
  name: "Ken Huh"
};

console.log(person.age); // undefined (존재하지 않는 key/value)

// 추가
person.age = 13; // 혹은 person["age"] = 13;

console.log(person.age); // 13

 

②key 및 value에 변수 넣기

일반적으로 value에 변수 및 함수 넣는 것이 친숙하다. 

//변수 및 함수 선언
const me = 'Ken Huh'; 

function getAge () {
  return 36;
}

// value로 변수나 함수 할당함
const person = {
  name: me,
  age: getAge()
};

본 문제는 key에 변수를 넣어야 했던 경우다.

const property = 'name';

const obj = {
  [property]: 'Ken Huh'
};

obj.name;      // 'Ken Huh'

③객체에 저장된 값 호출하는 방법으로써 Dot notation 및 Bracket notation 구분하기 

 

(3)풀이

function createArray(arr1, arr2) {
  var newObj={ };
  for(var i=0; i<arr1.length; i++){
  var property = arr1[i];
  newObj[property] = arr2[i];
  };
  return newObj;
}

(4)참고 URL - Part 2

[바닐라코딩 | Javascript] - Part2 요약