DevLog__[javascript: 배열, 객체]

Jaewon Lee·2020년 9월 14일
0

Javascript

목록 보기
2/12
post-thumbnail

# Intro

하하..오늘은 알고리즘 문제를 20문제 정도 풀었다. 기본적인 문제라 우습게 봤지만 나를 너무 과대평가 했다. 코딩테스트를 준비해야겠지만 현재로도 너무 정신이 없다...이 글을 보는 누군가가 코딩테스트를 준비하는 방법에 대해서 알려줬으면 좋겠다....ㅠㅠ 그리고 앞으로 알고리즘 문제를 풀 땐 그림과 함께 알고리즘 순서도를 그린 후에, 그에 따라 코드를 작성하는 것이 정신건강에 이로울 것 같다

# javascript

오늘은 어제 적지 못한 배열과 객체, 그리고 알아보기 쉽게 코드를 작성하는 방법 등에 대해서 적어보겠다!!

Lets get it🔥


1. 배열


let array = [1,2,3,4,5]
// array[0] = 1
// array[1] = 2
// array[2] = 3
// array[3] = 4
// array[4] = 5
let array = [1, 2, 3, 4, 5]
array2 = array
array2[0] = 9
console.log(array2)             // [9, 2, 3, 4, 5]
console.log(array)              // [9, 2, 3, 4, 5]

배열은 위와 같이 순서가 있는 값이다. 따라서 접근할 때 변수명 뒤에 붙어있는 index로 접근해야 한다. 1일차에서 말했듯이 문자열은 index로 접근할 수 있어도 수정은 못하지만, 배열은 index로 접근하여 추가,수정,조회,삭제가 가능하다.

또한 배열에서 중요한 것은 레퍼런스 현상이다. 두번째 박스에서 보이듯이 array2에 array를 할당하여 array2[0]의 값을 수정했더니, array의 값도 수정되는 현상이 발생한다. 이를 방지하기 위해 새로운 배열 변수의 기존 배열을 복사할 때는 slice()를 사용해서 레퍼런스 현상을 막는다!

1) 배열 관련 메소드

  1. Array.isArray(변수) : 변수가 배열 자료형인지 확인하여 true of false 반환한다.
  2. 배열변수.pop() : 배열 마지막 요소를 꺼내서 반환한다.
  3. 배열변수.push(value) : 배열의 끝에 value를 추가한다.
  4. 배열변수.shift() : 배열 첫 요소를 꺼내서 반환한다.
  5. 배열변수.unshift(value) : 배열의 시작부분에 value를 추가한다.
  6. 배열변수.indexOf(value) : value가 있는 배열의 index를 반환한다.
  7. 배열변수.splice(index, 제거할 요소 개수, 배열에 추가될 요소 ) : 주어진 index에서 부터 제거할 요소 개수만큼 값을 삭제한다. 3번째 input은 제거한 자리에 요소를 추가한다.
  8. 배열변수.slice(startIndex, endIndex) : start부터 end-1까지 새로운 copy배열을 반환한다.
  9. 배열변수.concat(array) : 다수의 배열을 합치고 병합된 배열의 사본을 반환한다.
  10. 배열변수.reverse() : 배열의 요소를 거꾸로 정렬한다.
  11. 배열변수.sort() : 기본적으로 모든 원소를 문자열로 취급해 사전적으로 정렬한다.
  12. 배열변수.toString() : 배열을 문자열로 바꾸어 반환한다.
  13. 배열변수.join('') : join 메소드의 입력값이 각 배열 요소의 사이로 들어가서 문자열로 반환한다.

2. 객체


1) Dot Notation

let obj = {key1: 1, key2: 2}
console.log(obj.key1)                 // 1

2) Bracket Notation

let obj = {key1: 1, key2: 2}
console.log(obj['key1'])              // 1

많은 분들이 객체의 표기법에 대해서 많이 헷갈려서 문제를 풀때 곤혹을 겪는 것 같다. Bracket Notation을 사용할때만 키값이 String이라는 것만 외우면 헷갈리지 않는 것에 도움이 되지 않을까 싶다!

3) 객체 관련 메소드

  1. Object.keys(객체변수) : 객체의 key를 배열의 형태로 반환한다.
  2. Object.values(객체변수) : 객체의 key 값을 배열의 형태로 반환한다.

객체 관련 메소드에 관해서는 아직 많은 것을 다뤄보지 못했지만 앞으로 개발을 하면서 겪게 되는 것은 그때마다 따로 정리할 예정이다!


3. 알아보기 쉬운 코드 작성법 10가지


아직 코딩의 코자도 모르는 코린이지만 코드를 작성할 때 간결하게 코드를 작성하는 만큼 중요한 것이 알아보기 쉽게 작성하는 것이다. 되도록이면 아래 10가지를 따르면서 코딩을 하는 버릇을 들여보겠다!

  1. 일단 코드는 알아보기 쉽고, 가독성이 좋아야한다.
  2. 코드를 작성하기 전에, tab을 사용할지 space를 사용할지 정해서 한 가지만 사용한다.
  3. 중괄호는 생략 가능한 경우에도 생략하지 않는다.
  4. 문자열은 작은따옴표로 작성한다.
    -> HTML의 태그 속성에 주위에 큰따옴표를 붙이기 때문이다.
  5. 세미콜론은 항상 붙인다…
  6. 3항 연산자는 짧고 분명하게 표현될 때만 사용한다.
  7. 코드는 '실행되는 한' 짧을 수록 좋다.
  8. 조건문의 결과값으로 return하는 경우는 그냥 조건문 자체를 return 시킨다.
  9. 배열이나 문자열 등 사이사이에 있는 콤마들은 띄어쓰기를 해주며 써준다.
    -> 코드가 읽기 수월해진다.
  10. 주석으로 코드의 흐름을 전부 설명하는 것은 잘못되었다.
    -> 어떻게 동작하는지 설명하는 것이 아니라 코드의 목적을 설명한다.


4. 추가적으로 알게된 메소드


  1. String.fromCharCode(아스키코드넘버) : 입력된 아스키 넘버에 해당하는 문자를 반환한다.
  2. ’문자’.charCodeAt() : '문자'가 가지는 아스키 넘버를 반환한다.

# Work Off


오늘 알고리즘 문제를 풀면서 모르는 법칙이나 계산식은 구글링을 통해 이해하고 풀 수 있다는 것을 느꼈다! 오늘 알게된 바빌로니아 점화식 관련 문제와 다른 알고리즘 문제에 대해서 나중에 포스팅하겠다! 내일은 Git 사용법과 javascript Koans, Scope에 대해서 공부할 것인데 어떤 내용일지 자기전에 간단하게 예습하고 자야겠다. 이 또한 머리털나고 처음 해보는지라....얼른 익숙해지는 것만이 답이다!! 이 생활이 적응되면 운동도 다시 나가고 싶은데.. 지금은 너무 정신이 없......오늘은 이쯤에서 사요나라!

기본기가 탄탄한 풀스택 개발자가 되는 그날까지 🔥🔥🔥

profile
Communication : any

0개의 댓글