JavaScript의 기초 #1

JavaScript를 사용하기 위한 기본적인 기능들을 알아보자.

1. 변수 (variable)

프로그래밍에선 마음대로 써도 되는 부분, 정해진대로 써야하는 부분이 있다.

전자를 변수, 후자를 예약어라고 부른다.

변수는 몇 가지 규칙만 지켜준다면 원하는대로 이름을 붙여 선언할 수 있다.

일반적으로 변수 선언시 앞에 let 을 붙여준다.

let alice   // 변수 하나를 alice라는 이름을 붙여 선언한다. 

이렇게 변수를 선언했으면 대입 연산자 (=) 을 이용해 값을 넣어줄 수 있다.

alice = 456;  //  변수 alice에 456이라는 value를 대입했다. 

보통 key=value; 형식으로 써주면 value를 key에 대입한다.

이를 브라우저에서 출력하고 싶다면 console.log 명령어를 사용한다.

console.log(alice)  //  변수 alice의 값을 출력한다.

개발자도구를 열고 콘솔 탭을 열면 alice의 값이 보인다.

1.1 변수의 종류

변수의 타입에는 숫자뿐 아니라 문자열, boolean(참/거짓), 배열 등이 있는데,

전부 동일하게 선언, 대입할 수 있다.

i) 숫자

앞에서 했으므로 생략

ii) 문자열

문자열을 선언할 때는 반드시 그 value를 '',"",`` 안에 넣어줘야한다.

let str;
str="Hello";       //  문자열을 선언할 경우, ',",` 안에 value를 넣어줘야 한다.
console.log(str);    //  str의 value를 출력한다. 

iii) boolean

참과 거짓만을 판별하는 타입의 변수이다. value로 true 혹은 false만을 가진다.

let bool;
bool = true;
console.log(bool);    // true를 출력 

let bool2;
bool = false;
console.log(bool2);   //  false를 출력 

0을 넣으면 false, 1을 넣으면 true로 인식한다.

iv) array (배열)

숫자, 문자열, boolean과는 달리, array와 object는 하나의 변수에 여러 개의 data를 저장한다.

let array1 = ["가나다", "라마바", "사아자"];   //  각 문자 역시 ""안에 써줘야 한다. 

이후, console.log 명령어를 사용하면 array 전체를 불러올 수 있다.

array의 각 element를 따로 불러오고 싶다면 index값을 추가해주면 된다.

index는 가장 처음(왼쪽)에 오는 element를 0으로 넘버링한다.

console.log(array1[0]);     // 0번째 index (=가나다)를 출력 
console.log(array1[1]);     // 1번째 index (=라마바)를 출력

v) object (객체)

object는 array처럼 복수의 데이터를 하나의 변수에 담고 있지만, 변수들의 key와 value

들을 모두 선언하고 싶을 때 사용한다.

let obj;
obj = {            // 중괄호 안에 선언한다.
       name : 'abc',
       age : 18,
       height : 180,
       key1 : "value1"
      }

이렇게 쓰고 object안의 key를 이용, 그 value값을 불러올 수 있다.

   console.log(obj);  // object 전체를 출력
   console.log(obj.name);  //  object내부의 'name' key의 value를 출력

2. 데이터 연산

사칙연산 등 데이터들을 처리하는 것을 의미한다.

+, -, *, / 이외에도 **(제곱), %(나머지 연산) 등이 있다.

   console.log(1+2)   //  1+2의 값인 3 를 출력
   console.log(1*2)   //  1*2의 값인 2 출력
   console.log(1/2)   // 1/2의 값인 0.5 출력
   console.log(2**4)  //  2의 4제곱인 16 출력
   console.log(10%3)  // 10을 3으로 나눌때의 나머지인 1 출력

이중 +연산은 문자열에도 동일하게 적용할 수 있다.

   console.log("안녕"+"하세요")   // "안녕하세요"를 출력

이는 피연산자 데이터들의 종류에 영향을 받는다.

   console.log(1+"안녕")   // "1안녕" 출력

2.1 비교연산자 (>, <, ==)

비교연산자는 두 변수의 값을 비교해 boolean 타입으로 return해준다.

console.log(1 < 2);  // 1이 2보다 크므로 연산자가 true를 return
console.log(1 > 2);  // 연산자가 false를 return

앞서 대입연산자 (=) 은 value값을 변수에 대입해주는 기능을 가진다고 했다.

수학적인 의미로 좌변과 우변에 동일한 것을 나타내기 위해서는 대입연산자(=)이 아닌

비교연산자(==)를 쓴다.

let a = 3, b = 3;
console.log(a==b);   //   a와 b 모두 3으로 같은 값이므로 true를 return

2.2 논리연산자 (&&, ||, !)

두 boolean을 연산해 결과에 따라 boolean을 return한다.

2.2.1 and 연산자 (&&)

두 피연산자 boolean의 값이 모두 true일 경우에만 true를, 하나 이상 false가 있을 경우 false를 반환한다.

console.log((1<2)&&(2<3));   //   1<2, 2<3 모두 true이므로 true를 return
console.log((1<2)&&(2>3));   //   2>3이 false이므로 false를 return
<br>

2.2.2 or 연산자(||)

두 피연산자 boolean중 하나라도 true이면 true를, 모두 거짓이면 false를 return.

console.log((1<2)||(2>3));   //   1<2가 참, 2>3이 거짓이므로 true를 return
console.log((1>2)||(2>3));   //   피연산자 둘 모두 거짓이므로 false를 return

2.2.3 부정연산자(!)

피연산자 boolean앞에 붙이면 그 true/false 값을 반전시킨다.

console.log(!(1<2))   //  피연산자가 true이므로 false를 return