Front-End/JavaScript

[JavaScript] 기초

HSHyeon 2024. 3. 9. 21:45

자바스크립트 기본(2021년 정리)

숫자와 문자

  1. 숫자

숫자: 따옴표("")가 붙지 않는 숫자

사칙 연산

Math.pow(3,2)= 3^2
.round(x)= x 반올림
.ceil(x) = x 올림
.floor(x) = x 내림
.sqrt(x) = 루트 x
.random(0) = 0~1.0 사이 랜덤 숫자 
    =>round(n*random()): n보다 작은 랜덤 정수
  1. 문자

문자열(String): 따옴표가(""/ '')가 감싸고 있는 문자

데이터형 = typeof.변수

따옴표를 붙이고 싶을 땐 땐 앞에 \\ = escape

문자열 연산

줄바꿈: \\n
결합: "문자" + "문자"
문자열 길이: "문자".length
문자 인덱스 : "문자".indexOf("찾는 문자")

변수

선언(생략가능하나 유효 범위 영향 - 권장)

⇒ var a= a의 값;

⇒ 중복 선언 var a=1, b=1;

변수 : 코드의 재활용성을 높여준다.

변수를 선언하지 않으면 유지보수가 어려움

주석

1줄 생략: //

여러 줄 생략: /* */

줄바꿈과 여백

생략

비교

연산자: 값에 대해서 어떤 작업을 지시하기 위한 기호

대입연산자=

비교연산자

`>,>=,<,<=` : 생략

`==` 동등 연산자(equal operator) 
: 서로 같다면 true

`===` 일치 연산자(strict equal operator) 

: '정확'하게 `값과 데이터형` 모두 같을 때 true (권장)

NaN : 특수한 데이터형, 숫자 아님

!=: 같지 않다 ==의 반대

!==: 정확하게 값과 데이터형 모두 같지 않다. ===의 반대

var a; // undefined

var a=null; // undefined (의도한 상황)

alert(undefined == null); // undefined
alert(undefined === null); // undefined

alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false

alert(0 === -0);                //true
alert(NaN === NaN);             //false

조건문

조건문(conditional statement) : 주어진 조건에 따라 다르게 동작학도록 하는 것

if가 true면 코드 실행,

if-else 문,

if-else if-else문

변수와 비교 연산자

prompt('당신의 나이는?'); //사용자로부터 값을 받음
alert(promt('당신의 나이는?'); //입력받은 값 alert로 발생

중첩 조건문

id = prompt('아이디를 입력해주세요.');
        if(id=='egoing'){
            password = prompt('비밀번호를 입력해주세요.');
            if(password==='111111'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
        } else {
            alert('인증에 실패 했습니다.');
        }

논리 연산자

&& : and, 모두 참일 때 참

id = prompt('아이디를 입력해주세요.');
        password = prompt('비밀번호를 입력해주세요.');
        if(id=='egoing' && password=='111111'){
            alert('인증 했습니다.');
        } else {
            alert('인증에 실패 했습니다.');
        }

|| : or, 둘 중 하나 이상 참이면 참

id = prompt('아이디를 입력해주세요.');
if(id==='egoing' || id==='k8805' || id==='sorialgi'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
} // egoing이거나 k8805이거나 sorialgi이면 인증

혼합 사용

id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
} 
//아이디가 egoing이거나 k8805이거나 sorialgi 중 하나여야하고
//패스워드는 111111 이어야 인증

! not 연산자

if(!false && !false){
    alert(4);
}

boolean의 대체제

if(0){ //false
    alert(1)
}
if(1){ //true
    alert(2)
} //0이 아닌 값은 true로 간주

false로 간주하는 데이터형

if(!''){
    alert('빈 문자열')
}
if(!undefined){
    alert('undefined');
}
var a;
if(!a){
    alert('값이 할당되지 않은 변수'); 
}
if(!null){
    alert('null');
}
if(!NaN){
    alert('NaN');
}

반복문

반복문(loop, iterate) : 반복적인 작업을 지시하는 방법

while문 형식

while(조건){
    반복해서 실행할 코드
}

반복조건

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그
    document.write('coding everybody <br />');
    // i의 값이 1씩 증가한다.
    i++
}

for문 형식

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

제어

brea: 종료 , continue: 실행 중단, 뒷 구문 실행

함수

함수: 하나의 로직을 재실행 할 수 있도록 해주는 코드

형식

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

배열

배열: 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입

생성

var member = ['egoing', 'k8805', 'sorialgi']

제어

  • 크기
  • var arr = [1, 2, 3, 4, 5]; alert(arr.length);

조작

  • 배열 끝 원소 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);
  • 복수의 원소 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);
  • 시작점에 원소 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);
  • 원하는 인덱스에 원소 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);
  • 첫번째 원소 제거
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);
  • 인덱스 끝 원소 제거
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li);

정렬

  • 정방형
var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li);
  • 역순
var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);

데이터를 어떻게 정리하면 좋은가

  • 만약 array가 없다면
const mon="mon";
const tue="tue";
const fri="fri";

const daysOfWeek=mon+tue+fri;
  • Array
const daysOfWeek=[mon,tue,wed,thu,fri,sat,sun];

모든 데이터 타입을 한 배열에 넣을 수 있음

  • Array에서 원하는 인덱스의 데이터 받아오기
console.log(daysOfWeek[5]);
  • 배열에 값 추가하기
daysOfWeek.push("sun");

객체

객체: 인덱스로 문자를 사용하는 것

생성 1.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

생성 2.

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

생성 3.

var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

value값 호출

grades['sorialgi'] / grades.sorialgi

객체 안에 객체, 함수도 넣을 수 있음

const playerName="nico";
const playerPoints=121212;
const playerHandsome=false;
const playerFat="little bit";

player.name
player.points
  • Array
const player=["nico",1212,false,"little bit"]; //별로임, 의미를 주석으로 정의해야함
  • Object
const player={
    name: "nico",
    points: 10,
    fat: true,
};

console.log(player);
console.log(player.name);

//업데이트
player.fat=false; //const 값은 바꾸면 안되지만, 내부를 바꾸는것은 에러x

//추가하기
player.lastName="potato";

모듈

  • HTML 호출

  • Node.js 호출

var circle = require('./경로');

정규표현식

정규표현식: 문자열에서 특정한 문자를 찾아내는 도구

생성 1. 컴파일

var pattern = /a/  //1. 리터럴
var pattern = new RegExp('a'); //2. 객체 생성자

생성 2. 실행

RegExp.exec(): 패턴을 값으로 하는 배열 리턴, 없으면 null

console.log(pattern.exec('abcdef')); // ["a"]
console.log(pattern.exec('bcdefg')); // null

RegExp.test(): 해당되는 문자열이 있으면 true

console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false, a 없음

String.match(): exec와 비슷, 배열 리턴

console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

String.replace(): 패턴을 검색해서 변경 후 변경된 값 리턴

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef
//a를 A로 변경

옵션

패턴 뒤에 i 를 붙이면 대소문자 구분x

var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i; //대소문자 구분 x
console.log("Abcde".match(oi)); // ["A"];

패턴 뒤에 g 를 붙이면 검색된 모든 결과 리턴

var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og)); //["a","a"];

캡쳐

var pattern = /(\\w+)\\s(\\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);

치환

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] Promise와 Async-Await  (0) 2024.03.31

'Front-End/JavaScript'의 다른글

  • 현재글[JavaScript] 기초

관련글

티스토리툴바