2. javascript 기초 - array와 object

1. 개념

군집형 데이터타입 array와 object

1-1. array (배열)

typeof array : object

 

메소드와 속성

• 메소드 : 데이터가 변화함. 동사. array.push()처럼 ()가 붙음
• 속성 : 데이터는 변하지 않고 상태를 나타냄. 명사. array.length처럼 ()가 붙지 않음

(참고)
array.push() : ()안의 값을 array의 마지막 요소로 추가함.
array.length : array의 요소 개수를 출력함.

 

인덱스

array 내의 첫 요소가 0번부터 인덱싱됨.

array[0]

array[1]

...

이런 식으로 원하는 위치의 값을 찾을 수 있다.

 

 

 

1-2. object (객체)

 

많이 사용되는 군집형 데이터타입. json도 object임 (JavaScript Object ..)

❗️object에는 length 속성 사용 안됨. (obj_length = Object.keys(객체명).length; 로 구할 수 있음)

객체 안의 요소를 가져올 때는 두가지 방식을 사용함.

1. 객체명["key"]

2. 객체명.key 👈 이 방식을 더 많이 사용함.

 

. 이란 객체 내의 하위요소를 가져올 때 쓰임. 

ex) console.log() : console이라는 객체 내의 log라는 key 값으로 저장된 함수(메소드)

      console.log(console); 입력하면 아래와 같이 출력됨.

console.log(console);

assert, clear ... : console이라는 객체 내의 key 값들. 함수를 value로 가지고 있음.

console이라는 객체가 가지고 있는 함수를 모두 볼 수 있다.

 

객체 내에 객체를 담는 수직형 데이터구조가 가능하고 빅데이터, NoSQL 등이 이런 구조를 활용하여 시작됨.

 

 

객체 내에 함수를 저장하는 방법

        obj = {
            name:"한빈",
            create: function() {
                console.log("함수생성")
            }, //익명함수
            objfunction: {
                delete: function() {
                    console.log("함수삭제")
                },
                nonce:1023,
                list:[10,20,30]
            }
        }
        
        obj.create(); // create 함수호출
        obj.objfunction.delete(); // delete 함수호출

함수를 호출할 때 사용할 이름을 key값으로 하고

익명함수 function() { }로 함수의 내용을 입력함. (함수명을 입력해줘도 됨)

 

 

 

 

❗️함수를 객체 밖에서 작성 후 객체에 담는 것도 가능하다.

        function hb() {
            console.log("함수입니다.");
        } //함수를 먼저 정의

        obj = {function_hb: hb}  //hb()으로 쓰면 그 즉시 함수가 실행되어 함수가 아닌 함수의 결과값이 담김
        obj.function_hb();

주의할 점은 함수명에 ()를 붙이면 그 즉시 실행이 되므로 ()는 호출할 때만 붙여주고 객체에 저장을 할 때에는 함수명만 넣어주면 된다.

 

 

 

 

 

 

2. 코딩테스트 문제풀기

---

 

1

 

Q.
[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 103] 의 array를
1번째 배열값 : 10
...
11번째 배열값 : 103
형태로 출력하는 코드를 작성하라.

A.

arr = [10,20,30,40,50,60,70,80,90,100,103];

for (i=0; i<arr.length; i++) {
    console.log(i+1+"번째 배열값 :" ,arr[i]);
}

 

i의 데이터타입은 number, "번째 배열값 :"은 string 이지만

서로 다른 데이터타입을 더할 때 전체를 string으로 취급하게 된다. 

앞 쪽은 문자형, 뒤의 arr[i]값은 숫자형으로 콘솔에 출력된다.

 

❗️

i + 1 + "번째 배열값 :" 을 하면 먼저 숫자 연산이 되어 (i+1)을 숫자형으로 취급해 계산 후 문자열과 더해지지만

"번째 배열값:" + i + 1 을 하면 3가지를 모두 문자형으로 취급해 뒤의 숫자가 01, 11, 21, 31... 이런 식으로 출력된다.

i+1을 괄호로 먼저 묶어주면 앞 뒤 상관없이 숫자 덧셈이 먼저 되기 때문에 이런 경우에는 꼭 괄호를 해주는 습관을 들이는 게 좋을 것 같다. 

 

 

❗️앞 쪽 전체를 문자열의 덧셈으로 처리한 결과

 

 

 

---

 

2

 

Q. 배열을 사용하여 강아지 그리기

A.

let dog = ["|\\_/|", "|q p|", "( 0 )\"\"\\}", "|\"^\"\`    |", "||_/=\\\\__|"]
let dogstr = [];
for (i=0; i<dog.length; i++) {
    dogstr = dogstr + dog[i] + "\n";
}
console.log(dogstr);

문자열 내의 특수문자 "  '  \ 등의 표기 👉  \"  \'  \\  로 쓸 수 있다.

 

 

 

---

 

3

 

 

 

Q. x만큼 간격이 있는 n개의 숫자

함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.

A.

function solution(x, n) {
    var answer = [];
    for (let i=1; i<=n; i++) {
                answer.push(x*i);
            }
    return answer;
}

오늘 배운 배열의 개념을 복습하기 좋은 문제이다.

push메소드를 사용해서 빈 array에 n개의 원소를 추가하였다.

 

다른 사람의 풀이.

function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

이해가 하나도 안된다

 

❗️

fill() 메소드

배열의 start index부터 end index 전까지(end index는 미포함) value값으로 채워주는 함수.

ex)
arr.fill('A') : 배열 전체를 'A'로 채움.
arr.fill('A', 2) : arr[2]부터 그 뒤를 'A'로 채움.
arr.fill('A', 2, 5) : arr[2]부터 arr[4]까지를 'A'로 채움. end값으로 입력한 5의 -1 값.

map() 메소드 와 => (화살표함수)

얘네는 좀 어렵다... 나중에 ES6 문법 가르쳐줄 때 배울 것 같다..........

이 코드는 나중에 더 공부하고 다시 봐야겠다.

 

 

 

---

 

4

Q. 행렬의 덧셈
행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

 

A.

function solution(arr1, arr2) {
    var answer = [];
    for (let i=0; i<arr1.length; i++){
        let arr_row = [];
        for (let j=0; j<arr1[0].length; j++){
            arr_row.push(arr1[i][j]+arr2[i][j]);
        }
        answer.push(arr_row);
    }
    return answer;
}

 

위에서 배운 push 메소드를 사용하여

각 행(i)의 열(j) 별로 더한 결과를 arr_row에 저장하고

한 행의 연산이 끝나면 answer에 저장하는 방식

 

다른 사람 풀이는 윗 문제와 마찬가지로 이해가 안되는 문법이 많아서 생략...ㅠㅠ

 

---

5

Q. 핸드폰 번호 가리기
프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 
*
으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

 

A.

        function solution(phone_number) {
            var answer = '';
            let arr = [];
            for (let i=0; i<phone_number.length; i++){
                arr.push(phone_number[i]);
            }
            arr.fill("*",0,arr.length-4);
            for(let j=0; j<phone_number.length; j++){
                answer += arr[j];
            }
            return answer;
        }

알고 있는 함수가 push나 fill같은 array 메소드 밖에 없고 string에 사용가능한 메소드를 몰라서 (문자열에는 fill()이 적용이 안됐다) 이렇게 풀었다.

핸드폰번호 문자열을 한자리씩 arr에 담은 뒤 fill로 뒷 4자리를 제외하고 *로 바꿔주었다.

그리고 그걸 다시 문자열로 바꿨다.

비효율적인건 알지만.. 아는 한도 내에서는 최선이었다.

 

 

다른 사람의 풀이.

function hide_numbers(s){
  var result = "*".repeat(s.length - 4) + s.slice(-4);
  return result;
}

console.log("결과 : " + hide_numbers('01033334444'));

repeat과 slice를 사용했다. 

repeat으로 번호의 자릿수 - 4 만큼 *을 찍고

slice로 입력받은 번호의 뒤 4자리를 잘라서 둘을 더했다.

 

❗️slice() 메소드

string과 array에 모두 적용 가능하다.

.slice(BeginIndex, EndIndex)
형태로 사용 가능하다.
fill()과 마찬가지로 EndIndex 값의 -1 까지 잘린다. 

str = "abcdefg";
str.slice(2, 5) == "cde"

arr = [10, 9, 8, 7, 6, 5, 4];
arr.slice(2, 5) == [8, 7, 6]

 

 

 

 

 

 

+) 참고용

 

❗️string 메소드

http://www.tcpschool.com/javascript/js_standard_stringMethod

 

❗️array 메소드

http://www.tcpschool.com/javascript/js_standard_arrayMethod