방장 공부하자 (WEB, JAVASCRIPT 2)

라ㅡ떼·2022년 7월 10일

web

목록 보기
1/5
  • 금일 정리본은 예제를 많이 줄였습니다.

타입 변환

  • 자바스크립트의 변수는 타입이 정해져 있지 않아 같은 변수에 다른 타입을 다시 대입할 수도 있다.

묵시적 타입변환

  • 자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.
  • 즉 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용한다.
  • 예시
10 + "문자열" // 문자열연결을 위해 10이 문자열로 변환된
"3" * "5" // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨
1 -  "문자열" //NaN 이 예제는 뺼셈 연산을 위해 문자열이 숫자로 변환되어야 하나,
해당 문자열은 두 번째 예제의 문자열과는 달리 숫자로 변환될 수 없는 문자열
따라서 NaN으로 반환된다.
  • NaN이란 Not a Number의 축약형, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미

명시적 타입 변환

  • 묵시적 타입 변환을 많이 사용하지만 명시적으로도 타입을 변환할 방법도 제공한다.
  • 해당 전역함수는 아래와 같다.
    • Number()
    • String()
    • Boolean()
    • Object()
    • parseInt()
    • parseFloat()
  • 아래 내용 중 일부 불필요하다 생각되어 생략했습니다.

변수

변수의 선언과 초기화

  • 자바스크립트는 var 이라는 키워드를 이용하여 선언한다.
  • 선언되지 않은 변수를 사용하려고 하거나 접근하면 오류가 발생한다.
  • 단 선언되지 않은 변수를 초기화할 경우만 자동으로 선언을 한 후 초기화 한다.
var month; //month라는 이름 변수 선언
date = 20; // date라는 이름의 변수를 묵시적으로 선언
//둘다 사용하는데 이상 없습니다.
var month; //변수 선언
var date = 20; // 선언과 동시에 초기화
month = 10; //변수의 초기화

변수의 타입과 초깃값

  • 자바스크립트 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다.
var num = 10; //변수 선언 초기화
num = [10, 20, 30]; //배열 대입
var num; //초기화 후 재선언은 무시됨
  • 선언만 하고 초기화하지 않은 변수는 undefined 값을 갖는다.

변수의 이름

  • 변수는 이름을 가지고 식별하므로 변수의 이름은 식별자가 된다.
  • 변수의 이름은 영문(대소문자), 숫자, 언더스코어(_), $로만 구성된다.
  • 숫자로 시작할 수 없다.

연산자

  • 다 아는 내용일 수 있으니 빠르게 정리하고 넘어가겠습니다.
  • +
    • 왼쪽 피연산자의 값을 오른쪽 피연산자 값과 더함
    a = 1
b = 1
a+b = 2
  • -
    • 왼쪽 피연산자 값을 오른쪽 피연산자 값을 뺌
    a = 2
b = 1
a - b = 1
  • *
    • 왼쪽 피연산자 값에 오른쪽 피연산자의 값을 곱합
  • /
    • 왼쪽 피연산자 값을 오른쪽 피연산자 값으로 나눈 몫을 반환
  • %
    • 왼쪽 피연산자 값을 오른쪽 피연산자 값으로 나눈 나머지를 반환

연산자의 우선순위

  • 각종 (), {} ,[]은 제외한 5개중
  • *, /, % 은 동일한 위치며 나머지 - ,+ 보다 우선순위가 있다.
  • 이하 내용은 생략합니다.

대입 연산자

  • 대입 연산자는 변수에 값을 대입할 때 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.
  • 앞서 살펴본 산술 연산자와 결합한 복합 대입 연산자가 존재한다.
  1. =
    • 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입
  2. +=
    • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결과 값을 왼쪽 피연산자에 대입함
  3. -=
    • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 뺀 후, 그 결과값을 왼쪽 피연산자에 대입
  4. *=
    • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입
  5. /=
    • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 몫을, 그 결괏값을 왼쪽 피연산자에 대입
  6. %=
    • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 나머지를, 그 결괏값을 왼쪽 피연산자에 대입

증감 연산자

  • 증감 연산자는 피 연산자를 1씩 증가 혹은 감소시킬때 사용
  • 이 연산자는 피연산자가 단 하나뿐인 단항연산자이다.
  1. ++x
    • 피연산자의 값을 1 증가시킨 후 해당 연산을 진행
  2. x++
    • 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴
  3. --x
    • 피연산자를 1 감소 시킨 후 해당 연산을 진행
  4. x--
    • 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴

비교 연산자

  • 비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여 참(true), 거짓(false)를 반환한다.
  • 비교 연산자는 두개의 피연산자를 가지는 이항연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽.
  1. ==
    • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참 반환
  2. ===
    • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참 반환
  3. !=
    • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참 반환
  4. !==
    • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않고, 타입이 다르면 참 반환
  5. >
    • 왼쪽 피연산자가 오른쪽 피연산자의 값보다 크면 참 반환
  6. >=
    • 왼쪽 피연산자가 오른쪽 피연산자의 값보다 크거나 같으면 참 반환
  7. <
    • 왼쪽 피연산자와 오른쪽 피연산자의 값보다 작으면 참 반환
  8. <=
    • 왼쪽 피연산자와 오른쪽 피연산자의 값보다 작거나 같으면 참 반환

논리 연산자

  • 주어진 논리식을 판단하여 참, 거짓을 반환
  • &&연산자와 ||연산자는 두개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
  • !연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.
  1. &&
    • 논리식이 모두 참이면 참을 반환
    • 비교군 두개가 둘중 하나가 true이거나 둘다 false일 떄 false이다
  2. ||
    • 논리식중 둘중 하나가 참이면 참을 반환
    • 비교군중 두개 다 false여야 false
  3. !
    • 논리식의 결과가 참이면 거짓, 거짓이면 참 반환

비트연산자

  • 는 크게 필요한 내용이 아니라는 판단으로 생략하겠습니다.

삼항 연산자

  • (표현식) ? x : y
  • 표현식이 참일 경우 x, 거짓일 경우 y
  • 뒤에서 설명한 if문을 축약시켜 간결하게 해준다.(간단하거나, 특별한 경우에만 사용)

typeof 연산자

  • typeof 변수명
  • 해당 변수명이 어떤 형인지 알려주는 연산자이다.(이하생략)

instanceof 연산자

  • 변수명 instanceof 객체명
  • 해당 변수명이 객체의 형을 가지고있는지 판별하는 연산자(true, false 반환)
  • 두개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽의 오른쪽이다.

조건문

제어문

  • 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다.
  • 이러한 제어문은 조건문 반복문 등이 포함된다.

조건문

  • 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다.
  • 가장 기본이 되는 if문이다.
  • 자바 스크립트에서 사용할 수 있는 조건문의 형태는 아래와 같다.
    • if문
    • if/else문
    • if/else if/else 문
    • switch문

if문

  • if문은 표현식의 결과가 true면 주어진 실행문을 실행, 거짓 false 이면 아무것도 실행하지 않는다.
if(표현식){
  표현식의 결과가 참일경우에만 실행됨
}
var x = 10, y = 20;
if (x == y) {
    console.log("x와 y는 같습니다.");
}
if (x < y) {
    console.log("x가 y보다 작습니다.");
}
  • 실행문이 한줄 뿐이라면 중괄호를 생략할 수 있다.
if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
    document.write("x가 y보다 큽니다.");

else문

  • if문의 표현식의 결과가 참이 아닐 경우 else문 내 실행문을 수행함
if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
}

else if문

  • 주어진 조건식을 수행하려고 할 때 표현식이 if/else만으로는 부족하거나 추가를 해야하는 경우 else if를 사용
  • 갯수의 제한은 없다.
  if (표현식1) {
    표현식1의 결과가 참일 때 실행하고자 하는 실행문;
  } else if (표현식2) {
    표현식2의 결과가 참일 때 실행하고자 하는 실행문;
  } else {
    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;
  }

삼항 연산자

  • 위에서 간단히 정리했으므로 생략하겠습니다.

switch

  • if/else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문
  • 주로 정해진 값을 구분해야 할 때 switch문을 사용한다.
  switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;//멈춤으로 switch문을 빠져나간다. 없을 시 해당 값에서 멈추지 않고 다음 값으로 넘어간다.
    ...
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
  }
profile
라ㅡ떼
개발 글 싸개
다음 포스트

방장 공부하자 (HTML 完, JAVASCRIPT 1)

0개의 댓글