[React] 강의 5주차 (1) -JS (Javascript)

[국비지원교육]  [패스트캠퍼스] React 강의 5주차 (1) - JS (Javascript)

 

[Javascript]

- 개요

- 데이터 타입

- 산술, 할당 연산자

- 비교, 논리 연산자

- 삼항 연산자

- 조건문 If Else / Switch

- 반복문 For

- 변수 유효범위

- 형 변환 

 

---

1. 개요

 

ECMA스크립트

ECMA스크립트(ECMAScript, 또는 ES[1])란,Ecma International이ECMA-262기술 규격에 따라 정의하고 있는 표준화된스크립트 프로그래밍 언어를 말합니다. 자바스크립트를 표준화하기 위해 만들어졌습니다.

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

 

자바스크립트 (Javascript)

자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다.

 

- 자바스크립트는 인터프린터 언어입니다.

자바스크립트 코드는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다. 그리고 대부분의 브라우저에는 자바스크립트 코드를 컴파일(div>li*3(해석하는것))하는 JIT(Just In Time Compiler)가 내장되어 실행속도가 매우 빠르고 웹 애플리케이션을 구현 할 수 있습니다.

 

- 자바스크립트는 클라이언트 스크립트 언어입니다.

자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 PHP, JSP, ASP 언어와 비교됩니다.

 

- 자바스크립트는 객체 기반의 언어입니다.

C++와 JAVA와 같이 클래스(함수를 집합시킬 수 있는)를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다. 자바스크립트에서는 객체를 생성한 후에도 프로퍼터와 메서드를 동적으로 추가하거나 삭제할 수 있습니다.

 

- 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.

자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며 뛰어난 효과를 만들어 낼 수 있습니다. 이러한 자바스크립트 라이브러리 언어를 통해 제이쿼리 뿐만 아니라 센차터치, node.js, 리액트 등 많은 언어를 사용할 수 있습니다.

 

- 자바스크립트는 동적 타입의 언어이며 클로저를 정의합니다.

C++와 JAVA는 실행되기 전에 변수 타입을 정하는 언어이며, 자바스크립트는 변수타입이 없는 동적 타입의 언어이며 자바스크립트 함수는 클로저를 정의합니다. 클로저는 변수를 숨기거나 영속성을 보장하는 등 다양한 기능을 구현 할 수 있습니다.

 

 

[학습전 setting]

 

1. js_test 폴더를 하나 만든후, visualstudio를 엽니다. 터미널에서 npm init -y를 하여 package.json을 만들어줍니다.

2. npm install parcel-bundler -D package.json lock 파일과 node모듈이 생성됩니다.

3. 위와 같이 작업 후에, package.json에 아래와 같이 스크립트를 넣어 명령어를 설정해줍니다.

4. main.html과 main.js파일을 만든후에 간단히 내용을 적고, 로컬에서 npm run dev 명령을하여 실행시켜 화면을 확인해줍니다.

//parcel bundler가 설치된 경우 뒤쪽에 ;(세미콜론)을 입력하지 않아도 줄바꿈 있을시, 자동으로 들어갑니다.
console.log("Hello World!")
console.log(123)

---

2. 데이터 타입 (typeof 연산자를 사용한 타입 판별)

 

Boolean 타입
Boolean 타입은 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있습니다. 불리언과 Boolean에서 더 자세히 알아보세요.

Null 타입
Null 타입은 null 하나의 값만 가질 수 있습니다.

Undefined 타입
값을 할당하지 않은 변수는 undefined 값을 가집니다.

Number 타입
ECMAScript는 Number 내장 숫자 타입을 가지고 있습니다. 

 

Symbol 타입
Symbol은 고유하고 변경 불가능한 원시 값이며 객체의 속성 키로 사용할 수 있습니다. 

console.log(typeof 'Hello')
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])

console.log("-------");

function getType(data){
    return Object.prototype.toString.call(data).slice(8, -1)
}

console.log(getType(123))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))

 

참고) import , export로 파일 불러오기.

---

3. 산술, 할당 연산자

 

산술 연산자

+	x + y	더하기
-	x - y	빼기
*	x * y	곱하기
/	x / y	나누기
%	x % y	나머지

복합 연산자

+=	x = x + 10	x+=10
-=	x = x - 10	x-=10
*=	x = x * 10	x*=10
/=	x = x / 10	x/=10
%=	x = x % 10	x%=10

증감 연산자

++	x = x + 1	x++ 또는 ++x
--	x = x - 1	x-- 또는 --x

 

console.log("[산술 연산자]")
console.log(1 + 2); // 더하기
console.log(1 - 5); // 빼기
console.log(3 * 5); // 곱하기
console.log(10 / 2); // 나누기
console.log(10 % 3); // 나머지

console.log("[할당 연산자 (=)]")
let a = 2 //숫자 2를 할당 //const는 재할당이 불가 
a = a + 1
console.log(a)
a += 1 // a + 1
a -= 1 // a - 1
a *= 1 // a * 1
a /= 1 // a / 1
a %= 1 // a % 1

---

4. 비교, 논리 연산자

 

비교 연산자

==	x == y	좌변과 우변의 값이 같을 경우에 true
===	x === y	좌변과 우변의 값이 같거나 데이터형도 같을 경우에 true
!=	x != y	좌변과 우변의 값이 같지 않을 경우에 true
!==	x !== y	좌변과 우변의 값이 같지 않을 경우, 또는 데이터형이 다른 경우에 true
>	x > y	좌변이 우변보다 클 경우에 true
<	x < y	좌변이 우변보다 작을 경우에 true
>=	x >= y	좌변이 우변보다 크거나 같은 경우에 true
<=	x <= y	좌변이 우변보다 작거나 같은 경우에 true

논리 연산자

&&	x && y	(and) 둘다 true인 경우 true
||	x || y	(or) 둘 중의 하나 이상이 ture 이면 true
!	!x	(not) 식이 false인 경우 true

비트 연산자

&	x & y	x와 y의 비트 단위 AND
|	x | y	x와 y의 비트 단위 OR
^	x ^ y	x와 y의 비트 단위 XOR
~	x ~ y	x를 비트 단위로 NOT
>>	x >> 2	x를 2비트만큼 왼쪽으로 이동
<<	x << 2	x를 2비트만큼 오른쪽으로 이동

 

연산자 우선순위

1	() []	괄호/대괄호
2	! ~ ++ --	부정/증감연산자
3	* / %	곱셈/나눔셈 연산자
4	+ -	덧셈/뺄셈 연산자
5	<< >> >>>	비트 단위의 시프트 연산자
6	> > >= >=	관계 연산자
7	== != === !==	관계 연산자
8	&	비트 단위 논니 곱 연산자
9	|	비트 단위 논니 부정 연산자
10	^	비트 단위 논니 합 연산자
11	&&	논리 곱 연산자
12	||	논리 합 연산자
13	?:	조건부 연산자
14	= += -= *= /= %= <<= >>= >>>= &= ^= |=	대입/할당 연산자
15	,	쉼표

 

//비교 연산자
const a = 1
const b = 1
const c = 3

//일치연산자 ===
console.log(a === b) // true 
console.log(a === c) // false

function isEqual(x, y){
    return x === y
}
console.log(isEqual(1, 1)) // true
console.log(isEqual(2, '2')) // false

// 불일치연산자 !==
console.log( a !== c ) // true;

console.log(a < b) // false
console.log(a < c) // true
console.log(a <= b) // true

// 논리 연산자
const a = 1 === 1
const b = 'AB' === 'AB'
const c = true
const d = false

console.log(a) // true
console.log(b) // true
console.log(c) // true
console.log('&&: ', a && b && c) // &&:  true
console.log('&&: ', a && b && d) // &&:  false
console.log('||: ', a || b || c) // &&:  true
console.log('||: ', a || b || d) // &&:  true
//부정 연산자
console.log('!: ', !a) // false
console.log('!: ', !d) // true

---

5. 삼항 연산자

//삼항 연산자
const a = 1 < 2
const b = 1 > 2

if (a) { // 참
    console.log('참')
} else {
    console.log('거짓')
}

console.log( a ? '참' : '거짓')  // 참
console.log( b ? '참' : '거짓')  // 거짓

---

6. 조건문 (If Else / Switch) 

조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 싱행하도록 조건을 거는 제어문 입니다.

import random from './getRandom'

//조건문 

const a = random()

if( a === 0 ){  //브라우저 새로고침할 때마다 아래 부분중 하나가 출력됩니다.
    console.log('a is 0')
} else if ( a  === 2 ) {
    console.log('a is 2')
} else if ( a === 4) {
    console.log('a is 4')
} else {
    console.log('rest...')
}


[getRandom.js]
//험수 밖으로 내보내기 export
export default function getType(data){
    return Object.prototype.toString.call(data).slice(8, -1)
}

switch (a){
    case 0:
        console.log('a is 0')
        break
    case 2:
        console.log('a is 2')
        break
    case 4:
        console.log('a is 4')
        break
    default:
        console.log('rest...')
}
const color = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 좋아하는 색은?")

switch (color) {
  case "빨강":
    document.write("당신은 빨강처럼 열정적인 사람입니다.");
    break;
  case "파랑":
    document.write("당신은 파랑처럼 시원한 사람입니다.");
    break;
  case "노랑":
    document.write("당신은 노랑처럼 밝은 사람입니다.");
    break;
  case "검정":
    document.write("당신은 검정처럼 강인한 사람입니다.");
    break;
  case "흰색":
    document.write("당신은 흰색처럼 순수한 사람입니다.");
    break;
  default:
    document.write("당신은 색을 볼 줄 모르는군요~ 실망입니다.");
    break;
}

 

---

7. 반복문

반복되는 부분을 실행하는 제어문입니다.

// 반복문
// for (시작조건; 종료조건; 변화조건) {}

for(let i = 0; i < 3; i += 1){
    console.log(i)
}

// 0
// 1
// 2


//10보다 작은 수 출력하기
let num = 0; //초기값 설정
while (true) {
    if (num >= 9) { //실행문 설정
        break;
    }
    num++; //증감값 설정
    console.log(num, ",");
}

// 1 ','
// 2 ','
// 3 ','
// 4 ','
// 5 ','
// 6 ','
// 7 ','
// 8 ','
// 9 ','

 

 

const ulEl = document.querySelector('ul')
for (let i = 0; i < 10; i += 1){
    const li = document.createElement('li')
    li.textContent = `list-${i + 1}`
    if(i % 2){
        li.addEventListener('click', function(){
            console.log(li.textContent)
        })
    }
    ulEl.appendChild(li)
}

---

8. 변수 유효범위

var는 권장하지 않습니다.

// 변수 유효범위 
// var, let, const
function scope(){
	console.log(a) // a is not defined
    if (true) {
    	console.log(a) // undefined
        const a = 123
        console.log(a) // 123
    }
   console.log(a) // ReferenceError: a is not defined
}

function scope(){
    console.log(b) // undefined
    if (true) {
        console.log(b) // undefined
        var b = 123
        console.log(b) // 123
    }
   console.log(a) // a is not defined
}

scope()

---

9. 형 변환 

데이터의 타입 변환

// 형 변환
const a = 1
const b = '1'

//일치 연산자
console.log( a === b ) // false 
//동등 연산자
console.log( a == b ) // ture 

// Truthy(참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14'

// Falsy(거짓 같은 값)
// false, '', null, undefined, 0, -0, NaN

if('false'){
    console.log(123) //123
}

if(false){
    console.log(123) //
}

if(0) {
    console.log(123) //
}

 

---

 

[Javascript]

- 개요

- 데이터 타입

- 산술, 할당 연산자

- 비교, 논리 연산자

- 삼항 연산자

- 조건문 If Else / Switch

- 반복문 For

- 변수 유효범위

- 형 변환