IT/JavaScript

Java Script

Huitopia 2021. 11. 9. 01:53
728x90

변수 선언과 초기화

변수

프로그램 실행 도중 임의의 값을 저장해 두고 읽을 수 있는 공간

  • 선언 : 컴퓨터에게 변수를 사용할 것이라고 알리는 역할
  • 초기화 : 선언한 변수에 처음으로 값을 저장하는 과정
  • 변수에 값을 저장하는 법 : 대입연산자(=) 활용
  • 콤마(,)를 활용해 여러 변수를 동시에 선언, 초기화 가능
var a, b, c;
a = 6;
b = 9;
c = 77;
console.log(a, b, c);

6 9 77

 

변수의 값 활용

변수의 이름을 사용하면, 변수의 값을 읽어서 사용 가능

 

console.log 명령어

괄호 안에 여러 개의 메시지를 콤마(,)로 구분하여 활용 가능

var v1 = 1, v2 = 2, v3= 3
console.log(v1, v2, v3)

1 2 3

자료형

변수에 저장할 수 있는 값의 종류

  • number Type : 숫자
  • string Type : 문자열
  • boolean Type : 참/거짓

typeof()명령어

typeof() 뒤에 따라오는 괄호 안에 들어있는 변수의 type을 알려주는 명령어

var a = 100, b = 3.14;
var c = "안녕하세요", d = "a"
var e = true, f = false;

console.log(a, typeof(a));
console.log(c, typeof(c));
console.log(e, typeof(e));

100 number
안녕하세요 string
true boolean

 

Number

  • 숫자를 나타내는 자료형
  • 64bit로 실수와 정수 모두 표현 가능
var a = 1
var b = "1"
console.log(a, typeof(a));
console.log(b, typeof(b));

1, number
1, string

 

ParseInt, ParseFloat 명령어

  • 문자열 "1"과 1은 다르다
  • 명령어 뒤에 따라오는 괄호 안에 있는 문자열의 앞에서부터 Number를 인식
var c = "177.3"
console.log(c, typeof(c));

var c_int = parseInt(c)
console.log(c, typeof(c_int));

var c_float = parseFloat(c)
console.log(c, typeof(c_float));

177.3 string
177.3 number
177.3 number

// 앞에서부터 숫자를 인식하여 string을 number로 인식
var c1 = "177.3 입니다."
console.log(c1, typeof(c1));

var c1_int = parseInt(c1)
console.log(c1, typeof(c1_int));

var c1_float = parseFloat(c1)
console.log(c1, typeof(c1_float));

177.3 입니다. string
177.3 입니다. number
177.3 입니다. number

 

Nan, Infinity

수학적 오류가 있는 구문이 실행되거나 결과 값이 변수로 저장될 경우 나옴

var a = 1/0
console.log(a);

Infinity

 

String

  • 따옴표('), 큰따옴표(")로 감싸서 문자열 표현
  • 문자열 안에 따옴표, 큰따옴표 등의 문자를 활용하려면 escape character를 활용
    • escape character는 역슬래시(\)로 사용
    • 줄바꿈 : \n
    • 따옴표 : \'
    • 큰따옴표 : \"
    • 역슬래시 : \\
var a='문자열은 따옴표로 둘러싸면 됩니다.';
// 문자열은 따옴표로 둘러싸면 됩니다.

var b="큰따옴표로도 문자열을 표현할 수 있습니다.";
// 큰따옴표로도 문자열을 표현할 수 있습니다.

var c="큰따옴표 문자열에는 따옴표 '를 사용할 수 있습니다.";
// 큰따옴표 문자열에는 따옴표 '를 사용할 수 있습니다.

var d='따옴표 문자열에는 큰따옴표 "를 사용할 수 있습니다.';
// 따옴표 문자열에는 큰따옴표 "를 사용할 수 있습니다.

var e="따옴표를 쓰고 싶다면 \'이렇게\' 사용하면 됩니다. 마찬가지로 \"큰따옴표\"도 쓸 수 있습니다.";
// 따옴표를 쓰고 싶다면 '이렇게' 사용하면 됩니다. 마찬가지로 "큰따옴표"도 쓸 수 있습니다.

var f='따옴표를 쓰고 싶다면 \'이렇게\' 사용하면 됩니다. 마찬가지로 \"큰따옴표\"도 쓸 수 있습니다.';
// 따옴표를 쓰고 싶다면 '이렇게' 사용하면 됩니다. 마찬가지로 "큰따옴표"도 쓸 수 있습니다.

var g="\\ 문자를 쓰고 싶다면 역슬래시를 두번 씁니다.";
// \ 문자를 쓰고 싶다면 역슬래시를 두번 씁니다.

var h="문자열에서 줄바꿈을 하고 싶다면, \n 역슬래시n을 사용합니다.";
// 문자열에서 줄바꿈을 하고 싶다면, 
// 역슬래시n을 사용합니다.

var i=a+b;
// 문자열은 따옴표로 둘러싸면 됩니다.큰따옴표로도 문자열을 표현할 수 있습니다.

var j="abcde";
// abcde

 

Object

number, string, boolean의 단순 자료형보다 더 복잡한 자료를 표현할 때 사용

 

객체를 만드는 법

  • 중괄호{}를 사용해 정의 가능
  • 객체는 속성의 집합으로 이루어짐
    • 각 속성은 이름과 값으로 이뤄짐
    • 객체 정의 시 -속성이름:값- 의 형태로 속성 정의 가능
    • 속성의 값은 모든 자료형 가능, object 포함
var empty_obj = {};
console.log(typeof(empty_obj));
// object
var man = { name:"옥택연", age:20, height:180};
console.log(man);
// { name:'옥택연', age:20, height:180}

 

객체의 속성에 접근하는 법

  • 객체이름.속성이름
  • 객체이름["속성이름"]
// 객체이름.속성이름
console.log(man.name);
// 옥택연
// 객체이름["속성이름"]
console.log(man["age"]);
// 20

 

객체 속성 변경하는 법

man.name = "유아인";
man["age"] = 22;
console.log(man);
// { name: '유아인', age: 22, height: 180 }

 

 

undefined

시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용

  • 선언만 하고 초기화가 되지 않는 변수의 타입이나 값
  • 객체의 정의되지 않은 속성의 타입이나 값
var a;
console.log(a);
// undefined
var obj = {x:1, y:2}
console.log(obj.x);
console.log(obj.y);
console.log(obj.z);
// 1
// 2
// undefined

 

null

개발자가 명시적으로 아무것도 없는 비어있는 상태를 나타낼 때 사용

  • typeof의 결과는 object이며 값은 null
var c;
c = null;
console.log(c, typeof(c));
// null object

연산자와 함수

이항연산자(binary operator)

두개의 피연산자(A, B)를 가지는 연산자. A 연산자 B 의 꼴로 사용. 피연산자는 변수나 숫자가 될 수 있다.

  • A + B
  • A - B
  • A * B
  • A / B
  • A % B

단항연산자(unary operator)

하나의 피연산자(A)를 가지는 연산자. 보통 연산자A의 꼴로 사용한다. 대표정으로 - 연산자가 있으며, -A의 꼴로 사용하는 경우 -는 이항 연산자가 아닌, 단항연산자이다. A변수에 -1을 곱한 효과가 발생한다.

 

증감연산자(++, --)

표현식 안에서 변수의 값을 증가하거나 감소 가능

각각, A=A+1, A=A-1 의 효과를 발생. 연산자를 변수 앞에 사용한 경우와 변수 뒤에 사용한 경우에 따라 변수의 값 업데이트 순서 변경

var a;
a = 1;

console.log(++a);
console.log(a);
// 2
// 2
a = 1;
console.log(a++);
console.log(a);
// 1
// 2

 

Math 관련 명령어

// a의b승을 구함
var a = Math.pow(2,3);
console.log(a);

// a의 제곱근 구함
var b = Math.sqrt(16);
console.log(b);

//0~1사이의 난수 반영
var c = Math.random();
console.log(c);

// 8
// 4
// 0.2787621635095887

 

함수

호출에 의해 여러번 실행할 수 있는 코드 블럭

  • 반복되는 코드 감소
  • 코드의 개발 및 수정 용의
function 함수이름(파라미터1, 파라미터2){
	실행코드
    return 반환값;
}
  • 파라미터 : 함수의 정의 부분에 나열된 변수
    • 여러개인 경우 콤마(,) 구분
    • 파라미터가 필요없는 경우 없어도 됨
    • 함수 안의 코드에서 변수처럼 활용 가능
  • return 구문 : 함수의 출력으로 내보낼 값
    • return 구문을 만나면 함수는 즉시 종료됨
    • 함수를 호출한 표현식은 반환값으로 대치됨
function test() {
    return;
    console.log("실행되지 않는 코드");
}
console.log(test());
// undefined
// return 하는 결과 값이 없기 때문

 

관계연산자(Relational operator)

두 표현식(A, B)의 관계를 비교하는 이항연산자. 관계에 따라 boolean 타입의 true, false로 표현됨

관계연산자 동작 True인 예시 False인 예시
< A보다 B가 더 큰 경우 참 3 < 5 3 < 3
> A보다 B가 더 작은 경우 참 5 > 3 3 > 3
<= A보다 B가 크거나 같은 경우 참 3 <= 3 4 <= 3
>= A보다 B가 작거나 같은 경우 참 3 >= 3 3 >= 4
== A와 B가 같은 경우 참 3 == 3 4 == 3
!= A와 B가 같지 않은 경우 참 3 != 4 3 != 3

 

논리연산자(Logical operator)

두 boolean 피연산자에 대해 연산하는 연산자

  • AND(&&) 연산자
    • 두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자
AND(&&) True False
True True False
False False False
  • OR(||) 연산자
    • 두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자
OR(||) True False
True True True
False True False
  • NOT(!) 연산자
    • 피연산자가 true인 경우 false를, false인 경우 true를 나타내는 단항연산자

 

연산자 우선순위

  • ++, --
  • !
  • *, /, %
  • +, -
  • <, <=, >, >=
  • ==, !=
  • &&
  • ||

괄호

우선순위를 명시하기 위해 괄호를 사용. 괄호안의 계산식이 먼저 계산됨

  • 부가적 효과
    • 코드의 가독성 향상
    • 연산자 우선순위 실수 방지

참고링크 : https://programmers.co.kr/learn/courses/3

728x90
저작자표시