[TIL] javascript basic(1) (다시푸는 repl.it)

ceres·2020년 5월 23일
0

JavaScript

목록 보기
8/9

면접 준비를 하면서 스스로 기반지식이 약하다는 것을 느꼈다. 기반지식의 기본은 언어라는 생각이 들었고, 따라서 나에게 javascript를 공부가 필요하다는 결론을 내렸다.
먼저 위코드 초반에 풀었던 repl.it을 다시 풀어보려고 한다.
아래는 repl.it을 다시 풀면서 지금 보니 새로운 부분 등을 간단하게 정리해 보았다.

1. JavaScript 실행

  • 웹 페이지와 상호작용하도록 만들어진 언어
  • 웹페이지를 dynamic하고 interactive하게 만든다.
  • JavaScript를 실행시키려면
    1. 브라우저가 존재해야하고,
    2. HTML파일이 있어야하고,
    3. HTML파일에서 JavaScript 파일을 연결시켜줘야 한다.

2. variables(변수)

  • 값들의 이름이라고 생각하면 됨
  • 변수 선언: var, let, const 사용

3. Function (함수) - 기본

  • 함수: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
  • 함수를 선언(정의)만 하고 호출 하지 않으면 함수가 실행되지 않는다.

4. Funcation(함수) - 데이터 반환하기

  • 모든 함수는 반환(return)을 한다. 하지만 코드를 칠 때 생략할 수 도 있다. 생략한 경우에는 undefined라는 값을 반환한다.

1) 매개변수(parameter)

  • 함수 정의에 사용되는 data(변수)
  • 함수 내부에서 매개변수에 새로운 값을 넣으면 안된다. 함수 호출시에만 값을 넣을 수 있다.

2) 인자(argumnet)

  • 함수 호출할 때 사용되는 data(값)
  • 인자 값이 매개변수에 저장 된다.
function getName(name) {  //name이 매개변수이다.
  return name + '님'; //함수 내부에서 name = '개발자'라고 값은 넣을 수 없다.
}
getName('개발자')   //'개발자'가 인자이다. 이 값은 매개변수인 name에 저장된다.  

5. Math Expressions

  • let newNum = num++
    1) newNum = num
    2) num = num + 1

  • let newNum = ++num
    1) num = num + 1
    2) newNum = num

6. 텍스트 문자열의 연결

  • String과 Number형을 더하면 항상 String 형으로 변환

7. IF 문

8. 비교연산자

if (totalCost === average + 135)
코드는 왼쪽부터 시작함. 하지만 비교연산자가 있을 경우에는 비교연산자 중심으로 오른쪽 왼쪽으로 나눠서 코드 실행함.
즉, totalCost === average 먼저 계산후 + 135을 진행하는 것이 아니라
-> 왼쪽부분 , 오른쪽 부분(average + 135) 먼저 연산 한 후, 비교(totalCost === average)하는 것이다.

  • === : 엄격한 비교연산자 ( 타입도 같아야 한다.)
  • == : 느슨한 비교연산자 (3 == '3', 타입이 같지 않아도 된다.)

9. 논리연산자

if (age > 65 || age < 21 && res === "한국")
컴퓨터는 왼쪽부터 해석하기 때문에 -> if (age > 65 || (age < 21 && res === "한국")) 이렇게 해석된다.
|| 기준으로 나누기 때문에 아래 중에 둘 중에 하나만 참이어도 if문이 실행된다.

  1. age가 65를 넘거나,
  2. age가 21보다 아래이면서 사는 곳은 한국이다.

10. Function(함수) - 여러 인자

문제 다시 풀어보기

11. Function(함수) - 데이터 반환하기(2)

  • 함수 내부에서 함수를 호출할 수 있다.
function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price); //이렇게 호출한다.
}

calculateTotal(3500)

12. Array(배열)

  • 배열의 요소는 순서(index)를 갖고 있다. 순서는 0부터 시작한다
  • 빈배열을 선언 할 수도 있다. let cities = [];
  • 배열요소 가지고 오는 법: console.log(cities[0]);

13. 배열 조작하기

1) 요소 추가

  • index사용: 요소 수정도 가능하다 cities[3] = "서울";
  • push함수: 배열 마지막에 요소 추가 cities.push("경주", "전주");
  • unshift함수: 배열 맨 앞부분에 요소 추가 cities.unshift("인천");

2) 요소 제거

  • pop함수: 마지막 요소가 제거되고, 제거된 값을 반환한다. cities.pop();

13. For문

문제 다시 풀어 보기!

14. Data 타입

  • javascript 타입(6): undefined, null, boolean, 숫자, 문자열, 객체
  • 타입 확인: typeof
  • 배열은 object(객체)이다
  • undefined: 변수를 선언하고 할당하지 않은 경우
  • null: 변수를 선언하고 null값을 할당한 경우.
    아무것도 아닌 빈 객체를 가르키고 있어서 타입확인을 해보면 object라고 나온다.

15. String

  • 대문자 변환: 변수명.toUpperCase();
  • 소문자 변환: 변수명.toLowerCase();
  • 길이: 변수명.length() (Number형은 length 속성 존재하지 않음)
  • 문자열 찾기: 변수명.indexOf("프로래밍"); "프로그래밍"문자열을 찾는 코드. 몇 번 째 순서에 해당 문자열이 있는지 알려준다. 해당 문자열이 없다면 -1을 반환한다.
  • 문자열 자르기: 변수명.slice(잘릴 시작위치, 잘릴 끝위치) 끝위치 직전에서 slice 된다.

16. String <-> Number 변환

  • string + number : 결과물은 string 으로 나타난다.
  • string - number : NaN 이 나온다. 빼기 연산은 number에서만 가능하기 때문이다.
    하지만 숫자가 텍스트로 된 경우에는 숫자로 변환해서 계산해준다.(좋은 코드는 아니다. 숫자로 변환해주는 것이 좋다.)
    1) console.log(2019-"2000"); -> 19 : 양쪽의 값을 모두 숫자로 변환해서 계산
    2) console.log('200'-'안녕'); -> NaN
    3) console.log('200'-'10'); -> 190
  • string -> number 전환
    1) Number함수 사용: Number("2000")
    2) parseInt("1.901"); : 문자열을 정수로 반환
    3) parseFloat("1.901"); : 문자열을 부동소수점 실수로 반환
    4) string - number 연산 사용:console.log(2019-"2000");
  • number -> string 전환
    1) .toString() 매서드 사용
    2) + 연산 사용
let i = 2020;
i.toString(); //인자를 취하지 않고 문자열을 반환

17. 날짜와 시간

문제 다시 풀어 봐

let rightNow = new Date();	//콘솔로그 결과값: Tue May 26 2020 00:57:10 GMT+0900 (대한민국 표준시)
let year = rightNow.getFullYear(); 
let month = rightNow.getMonth()+1;  //현재 달보다 1 작은 값이 반환됨으로 +1 해준다.
let date = rightNow.getDate(); // 날짜 반환
let day = rightNow.getDay(); //요일반환 0이 일요일이다.
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes(); //rightNow의 minutes가 반환된다.
let time = rightNow.getTime(); //밀리세컨드 값 반환 ex) 1590422249840
//기준인 1970년 1월 1일로부터 1564563605026 밀리초가 지났다는 의미이다.
  • 특정날짜의 date
    특정 날짜를 매개변수로 넘겨주면, 해당 날짜의 Date를 반환 받을 수 있다.
let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);

0개의 댓글