DevLog__[javascript: 변수와 자료형, 문자열, 함수, 조건문과 반복문]

Jaewon Lee·2020년 9월 13일
0

Javascript

목록 보기
1/12
post-thumbnail

# Intro

사실 오늘이 1일차가 아니다....ㅎ
오늘은 일요일인데 저번주 수요일인가...?부터 열이 37도,38도 올라가더니 결국 40도....응급실행..
그래도 열심히 하기로 한것을 절대 미룰 수 없었기 때문에 이번주 월요일부터 의지를 불태워 보았다.
열심히 문제를 풀고 난 후에는 도저히 블로그 글을 작성할 수 없는 상태였기 때문에,
그동안 블로그에 글을 올리진 못해도 내용을 정리해놔서 다행이다. 하하. 내가 불타나 javascript가 불나나 한번 해보자 하하.

# javascript

일단 감기로 인해 적지 못한 내용이 일주일치....하하...그래도 열심히 작성해봅시다!
내용은 변수와 자료형, 함수선언, 조건문, 문자열, 반복문, 배열, 객체 정도이고 이외에도 라이브러리 함수, 코드를 알아보기 쉽게 작성하는 법 등이 있다. 내용은 배운것과 배우면서 자신이 느낀것에 대해서 작성할 생각이다. 그럼 지금부터 순서대로 작성해보겠다!!


1. 변수와 자료형


나는 변수를 선언하는 방법으로 2가지 방법을 알고있다. 거두절미하고 바로 예시로 알아보자!

let a = 1;
var b = 2;

let과 var는 컴퓨터에게 "지금부터 상수 1과 2를 저장할 건데, 저장공간을 내어줘. 그리고 그 저장공간은 각각 a와 b라는 이름으로 부를거야!"라고 이야기 하는 것이다. 설명이 너무 지저분한가?? 쉽게 말해서, a와 b라는 저장공간에 각각 1, 2를 저장하는 것이다!! 이렇게 컴퓨터에게 저장공간을 내어달라고 요청하는 행위를 변수의 선언, 그 변수의 value를 할당하는 것을 초기화라는 것을 학습했다.

또한 let과 var는 변수를 선언하고 초기화하는 방식에 차이는 없었다! 다만 선언하는 위치에 따라서 변수의 값이 계속 유지되는지, 없어지는지에 대한 차이는 있는 것 같다. 이에 대한 내용은 더 찾아보겠다!

신기하게도 자바스크립트는 따로 자료형을 정해주지 않아도 변수에 할당되는 값에 따라 변수의 자료형이 정해진다.

let a = 1;                    // number
let b = 'leejaewon';          // String
let c = {a: 1, b: 2};         // Object
let d = [1,2,3,4];            // Array 
let e = True;                 // Boolean
let f = undefined;
let g = null;

변수의 자료형은 크게 3가지이다.

  1. 기본형
    • 숫자(Number)
    • 문자(String)
    • 불린(Boolean)
  2. 특수형
    • null
    • undefined
  3. 참조형
    • 배열(Array)
    • 객체(Object)

이외에도 다른 자료형이 있다면 댓글로 남겨주길 바란다! 이쯤에선 null과 undefined의 차이 정도 작성해주면 충분할 것 같다. 뒤에서 한 파트씩 다룰예정이니...null은 변수의 값 자체를 null로 설정한 것이고, undefined는 변수를 선언해 놓고 초기화하지 않았을 때 나오는 값이다. 혹시 틀렸다면, 이 또한 댓글에 알려주길 바란다!


2. 함수 선언


1) 함수 선언식

function caculateTotal(num) {             
  let total = 0;
  for(let i=0; i <= num; i++) {
    total += i;
  }
  return total;
}

2) 함수 표현식

let caculateTotal = function(num) {   
  let total = 0;
  for(let i=0; i <= num; i++) {
    total += i;
  }
  return total;
}

함수의 선언식과 표현식은 호이스팅에 차이가 있다고 한다. 선언식은 말 그대로 선언만 해두면 함수를 어느 자리에서 불러도 리턴값이 반환되지만, 표현식은 함수를 부르는 위치가 표현식의 위치보다 위에 있으면 리턴값을 받을 수 없다. 개인적으로 선언식이 편하다. 어떤 경우에 두가지의 식을 각각 사용해야 하는지에 대해서는 아직 잘 모르겠지만 서서히 알아가보자...하하...


3. 문자열


let str = 'leejaewon is good man~'
for(let i=0; i<str.length; i++) {
  console.log(`str[${i}] : ${str[i]}`)
}

위에 Code는 다음과 같은 결과가 나온다.

문자열은 배열처럼 index로 각각의 문자에 접근이 가능하지만 값을 수정하지 못한다. 문자열의 값을 수정하기 위해서는 value를 다시 할당하거나, 배열로 변경후에 값을 수정하여 다시 문자열로 바꿔줘야한다.

이때부터인가...나는 문자열과 배열이 반복문과 찰떡일 것 같은 예감이 들었다.

1) 문자열 관련 메소드

  1. String(변수명) : 변수를 문자열로 형 변환시킨다.
  2. str.charAt(index) : index 위치의 str값을 반환한다.
  3. str.indexOf('찾을 문자', index) : index위치 이후부터 찾을 문자의 index를 반환한다. 없으면 -1을 반환한다.
  4. str.lastIndexOf('찾을 문자') : 문자열의 오른쪽 끝에서 부터 찾을 문자의 index를 반환한다. 없으면 -1을 반환한다.
  5. str.replace('찾을 문자', '치환할 문자') : 찾을 문자를 치환할 문자로 대체한다. 찾으려는 문자가 여러개일 경우에는 문자열 왼쪽에서 부터 처음으로 발견된 문자와 바꾸기 때문에 바뀌는 위치에 주의해야 한다.
  6. str.subString(startIndex, endIndex) : start부터 end-1 index까지의 문자열을 반환한다.
  7. str.substr(startIndex, 문자개수) : start부터 문자 개수만큼 문자열을 반환한다.
  8. str.split('문자') : 함수에 입력된 문자를 기준으로 문자열을 나누어 배열로 반환한다.
  9. str.toUpperCase() : 문자열을 전부 대문자로 변환한다.
  10. str.toLowerCase() : 문자열을 전부 소문자로 변환한다.
  11. str.concat(합칠문자열) : 기존 문자열(str)에 합칠 문자열을 붙인다.
  12. str.trim() : 문자열의 양쪽 끝 공백을 제거한다.
  13. str.length() : 문자열의 길이를 만환한다.


4. 조건문 & 반복문


1) 조건문

let num = 30;
if(num > 20) {
  console.log('num은 20보다 큽니다.');
}
else if(num > 10) {
  console.log('num은 10보다 큽니다.');
}
else {
  console.log('num은 10과 같거나 작습니다.');
}

조건문에서 가장 많이 쓰는 명령어로 if, else if, else로 나뉘어져있다. if문에서 중요한 것은 가끔 조건식의 순서가 중요할 때가 있다는 것이다. 위에서 else if문과 if문의 조건식을 바꾸면 어떻게 될 지 읽는 분들에게 맡겨보겠다! 조건문으로 switch문도 있지만 break의 사용이 code에 안 좋은 영향을 주는지 사용이 권장되진 않는 것으로 알고 있다.

2) 반복문

let sum = 0;
for(let i=0; i < 10; i++) {
  sum += i;
}

반복문의 메카니즘을 이해하려면 차근차근 종이에 변수의 값이 변화는 과정을 써보는 것이 도움이 된다. 디버깅을 할줄 안다면 디버깅으로 반복문을 이해하는 것이 시간적으로 훨씬 효율적일 것이다!

i = 0 인 경우 -----------------> sum = 0
i = 1 인 경우 -----------------> sum = 1
i = 2 인 경우 -----------------> sum = 3
i = 3 인 경우 -----------------> sum = 6
i = 4 인 경우 -----------------> sum = 10
i = 5 인 경우 -----------------> sum = 15
i = 6 인 경우 -----------------> sum = 21
i = 7 인 경우 -----------------> sum = 28
i = 8 인 경우 -----------------> sum = 36
i = 9 인 경우 -----------------> sum = 45

반복문은 비교적 간단한 알고리즘 문제를 풀면서 숙달시키는 것이 중요하다고 생각한다. 그만큼 정말 많이 사용하는 것 같다.... 이번주는 배열과 객체, 반복문과 한몸이 되어 가고있다.....


5. Math library method


javascript를 배우고, 기초 문제를 풀면서 가끔 라이브러리 함수를 사용하면 편리한 때가 있다. 함수들이 나올때 마다 정리하고 그 쓰임새를 익히는 방향으로 학습하면 매우 좋을 것 같다. 하지만 함수를 사용하기 전에 메소드의 기능을 정확히 이해할 필요가 있다. 메소드를 이해하기 위해서 직접 구현해 보는 것도 좋은 방법일 것 같다. 추후에 여유 시간이 있을때 진행해 보겠다....하하...

아래는 자주 나오는 Math 라이브러리의 함수들을 정리한 것이다.

  1. Math.abs(num) : num의 절대값 반환.
  2. Math.ceil(num) : num의 올림값 반환.
  3. Math.floor(num) : num의 내림값 반환.
  4. Math.round(num) : num의 반올림값 반환.
  5. Math.max(num1, num2, ...) : 입력값 중에 가장 큰 값 반환.
  6. Math.min(num1, num2, ...) : 입력값 중에 가장 작은 값 반환.
  7. Math.sqrt(num) : num의 제곱근 반환

# Work Off


밤이 늦었다...내일의 일정을 위해서 휴식 또한 필수적이다!! 블로그도 머리털나고 처음 써보는 건데 나름 재밋는 것 같다. 쓰는데에 익숙해지면 예전에 했던 머신러닝, 영상처리, ADAS, 추천시스템 개발 내용까지 올려보겠다. 그때까지 그 내용들을 기억한다면 말이다....하하하🤪🤪!!!!

사람들이랑 소통하면 블로깅하는게 더 재밋을 것 같은데....내 블로그가 핫해지길 바란다. 내일은 아직 못 쓴 배열, 객체 그리고 코드를 알아보기 쉽게 작성하는 방법에 대해 작성하도록 하겠다.

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

profile
Communication : any

0개의 댓글