basic JS

청춘고양이 2022. 5. 2. 23:16

안녕하세요. 오늘은 기본적인 JS에 대해 알려드리도록 하겠습니다.

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. script를 번역기로 검색해보면 영화나 방송의 대본&각본으로 나오는데요. Java라는 언어의 대본&각본이라고 할 수 있습니다. 이러한 자바스크립트는 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나입니다. HTML은 웹 페이지의 (1) 기본 구조를 담당하고, CSS는 웹 페이지의 (2) 디자인, JavaScript의 경우 웹 페이지의 (3) 동작을 담당한다고 할 수 있습니다. 지금부터 JS를 사용하는 방법을 알아보도록 하겠습니다.

JS는 Inline-Script와 Internal-Script와 External-Script방식이 있습니다.

Inline-Script : 태그 내에 직접 자바스크립트 명령어를 작성하는 방법이며 보안에 취약하기 때문에 사용하지 않는 것이 좋습니다.
Internal-Script : HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식으로 <script> 태그 내에 작성, <head>또는 <body> 영역에 작성이 가능하며 해당 방식도 스크립트의 양이 많아지면 문서 작성이 힘들기 때문에 추천하는 방식은 아닙니다.
External-Script : HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식으로 파일 확장자. js로 작성하는 방식이며 개발을 할 때 일반적으로 사용하는 방식입니다. 또한 파일 코드 재사용, 구조, 표현을 파악하기 좋기 때문에 유지보수가 쉽다는 장점이 있습니다.

변수와 상수의 선언

JS에서는 JAVA와 다르게 타입을 명시하지 않습니다.
변수와 상수는 기본적으로 첫 글자를 소문자로 시작하며 중간 글자는 대문자로 시작하는 방식인 카멜 케이싱(Camel Casing)입니다.
변수의 선언 : let {변수 이름} = {변수 값};이며 변수 값은 생략이 가능합니다. ES6 이전의 경우 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 나오는 var의 경우가 있지만 이를 보완하기 나온 것이 let입니다.
상수의 선언 : const {상수 이름} = {상수 값};이며 상수 값은 생략이 불가능합니다. 즉, 상수는 선언과 동시에 값을 부여해야 합니다.

연산

a = b : b의 값을 a에 대입한다.
a + b : 덧셈. 단, a나 b 중 한 개 이상이 문자열일 경우 문자열 합치기가 가능하다. ex) 5 + '5' = '55'가 된다.
a - b : 뺄셈.
a * b : 곱하기.
a / b : a를 b로 나눈 몫.
a % b : a를 b로 나눈 나머지.

논리

논리 값 : 여부를 나타내는 값으로 참(true), 거짓(false) 두 가지의 값으로만 표현할 수 있다.

비교 연산

a == b : "a값이 b값과 동일한가?"에 대한 여부를 반환한다. 단, 형 변환을 할 수 있는 경우 형 변환 후 비교한다.
a!= b : "a값이 b값과 다른가?"에 대한 여부를 반환한다. 단, 형 변환을 할 수 있는 경우 형 변환 후 비교한다.
a === b : "a값이 b값과 동일한가?"에 대한 여부를 반환한다. 단, 형 변환을 하지 않는다. (값과 형이 같아야 참을 반환한다.)
a!== b : "a값이 b값과 다른가?"에 대한 여부를 반환한다. 단, 형 변환을 하지 않는다 ( 값과 형이 달라야 참을 반환한다.)

가정문

if ({논리 값을 반환하는 조건의 나열}) {참 구현부}
else {거짓 구현부}

   if( 1 == '1') {
           console.log('같다');
       } else {
        console.log('다르다');
       }

가정문 추가 분기

if ~ else if ~ else로 작성한다.

    let number = 3;
       if (number === 1) {
           console.log('넘버는 1.');
       } else if (number ===2) {
        console.log('넘버는 2.');
       } else if (number ===3) {
        console.log('넘버는 3.');
       } else {
           console.log('넘버는 1도 2도 3도 아니다.');
       }

스위치

switch를 각각의 case들을 설정해서 break를 이용해 해당 분기를 탈출하면서 값을 나타 낼 수 있다. 마지막 case에는 defalut를 적는다.

   switch (number) {
            case 1:
                console.log('넘버는 1.');
                break;
           case 2: 
                console.log('넘버는 2.');
                break;
           case 3:
                console.log('넘버는 3.');
                break; 
           default:
                console.log('넘버는 1도 2도 3도 아니다.');
                break;
       }

AND, OR

a && b : a와 b가 모두 논리적으로 참이어야만 최종적으로 참이 된다.
a || b : a나 b 중 하나라도 논리적으로 참이라면 최종적으로 참이 된다.

   if(1 == '1' && 5 === '5') {
           console.log('참');
       } else {
        console.log('거짓');
       }

       if(1 == '1' || 5 === '5') {
           console.log('참');
       } else {
        console.log('거짓');
       }

복합 대입 연산 / 비트 연산

a += b : b값을 a에 더한다.
a -= b : b값을 a에 뺀다.
a *= b : a와 b를 곱한 값을 a에 대입한다.
a /= b : a를 b로 나눈 몫을 a에 대입한다.
a %= b : a를 b로 나눈 나머지를 a에 대입한다.
a &= b : a && b 여부를 a에 대입한다.
a |= b : a || b 여부를 a에 대입한다.
a??= b : a가 null이거나 undefined일 때만 b값을 a에 대입한다.

증감 연산

a++ : 해당 구문을 완료하고, a에 1을 더한다.
++a : a에 1을 더하고, 해당 구문을 진행한다.
a-- : 해당 구문을 완료하고, a에 1을 뺀다.
--a : a에 1을 빼고, 해당 구문을 진행한다.

Array

값의 나열이다.
0부터 시작하는 인덱스 번호가 있다.
콤마(,)로 구분하여 여러 개의 값 입력

let arr = [1, 3, 5, 7, 9, 11]; // Array

  odds.push('!'); 
  //배열 끝에 값을 추가한다.
   
  //console.log(odds.length);
  // 배열의 길이 - 1 = 배열의 마지막 값 (odds.length - 1)
  
  odds.unshift('@'); 
  // 배열 앞에 값을 추가한다.
  
  odds.splice(2, 2, '#', '%'); 
  //원하는 위치에 값(들)을 추가한다. ~.splice({원하는 자리의 인덱스}, 값...)

Object

키와 값 쌍의 나열
인덱스 번호가 없다. 키로만 값에 접근할 수 있다.
키와 값은 콜론(:)으로 구분하고, 키값 쌍은 콤마(,)로 구분한다.

let obj = {
            김김김 : '010-0000-0001', 
            이이이 : '010-0000-0002',
            박박박 : '010-0000-0003'
        }; // Object

 userContacts['박박박'] ='010-0000-0002' // 값 수정 userContacts.박박박 = '~'; (.을 써도 되고 []를 써도 됨)
        userContacts['최최최'] ='010-0000-0003' // 쌍 추가

        delete userContacts['박박박']; // 쌍 삭제

FOR 반복문

for ({증감 변수의 시작 값 지정}; {반복 조건}; {증감}) {구현부}

for (let i = 0; i < 10, i++) {
		console.log(i);
}

향상된 FOR문

배열을 대상으로 한다. in을 사용하면 인덱스 번호, of를 사용하면 그 값을 나타낼 수 있다.

let odds = [1, 3, 5, 7, 9];

console.log('--------------------');
        for (let i in odds) {
            console.log('in : ' + odds[i]);
        } //in을 쓰면 순번 즉, 인덱스 번호
        console.log('--------------------');
        for (let a of odds) {
            console.log('of : ' + a);
        } //of는 그 값이다.
        console.log('--------------------');

함수

화살표 함수 (Arrow Function)
let (함수 이름) = (매개 변수 구조) => {구현부}
(매개변수 확인)

  let sayHello = () => {
            console.log('Hello?');
        };
        sayHello();
        
        let sum = (a, b, c) => {
            return a + b + c;
        };
        console.log(sum(1,3,5));

오늘의 포스팅을 마무리하겠습니다. 한동안 JS 공부로 인해 글을 올리지 못했습니다.. JS에 대해 아직 많이 미흡하지만 제가 공부한 내용을 토대로 JS에 관련된 글이 올라갈 예정입니다.