본문 바로가기
Programing/Javascript

javascript 기본문법 정리

by TEXTBOX 2022. 4. 28.
728x90

javascript는 Interpreted language 이다.

변수선언 방식


name = "kim";


변수선언 명령


let -> 블록 스코프의 범위를 가지는 지역변수를 선언, 선언과 동시에 임의의 값으로 초기화 함
const -> 블록 범위의 상수를 선언, 상수의 값은 재할당 할수 없고 재 선언할 수없음, 변하지 않는 상수선언
var -> 변수를 선언하고, 선택적으로 초기화 할 수 있음.

let newValue = sendValue || "tranValue"; -> sendValue값이 undefined일 경우 뒤에 값으로 처리


문자형


"abc" -> 문자형 string
"I'm a boy" -> '를 입력시 사용하기 좋음
'I\'m a boy' -> '를 사용하여 문자열 표시시 '앞 [\][역슬러시]를 붙여 표시가능
`a값은 ${a}입니다` -> 변수를 표현하기 좋은 식. 변수 사용시 ${x}안에 변수를 사용
 ""안에 변수를 사용할 시에 문자그대로 표시, 오류에 주의


숫자형, 연산자

+(더하기),-(빼기),*(곱하기),/(나누기),%(나머지),**(제곱) 을 사용가능

0으로 나뉘기일 경우 값이 [Infinity]로 출력, "무한대"값으로 표시
문자열/숫자 를 할 경우 NaN으로 출력


Boolean

true/false


null 과 undefined

변수를 선언만하고 할당하지 않은경우 -> undefined


typeof 연산자

변수의 자료형을 알려준다.
typeof 1 -> number
typeof "text" -> string
typeof true -> boolean
typeof null -> object (*그렇다고 null은 객체가 아님)
typeof undefined -> undefined


대화상자

alert : alert("알림"); -> 알림메시지 띄우기
prompt : let input_data = prompt("입력"); -> 입력받음, 값을 입력 받지 못하면 null, 2개의 인수 사용시 첫번째는 설명, 2번째 값은 default 값
confirm : let isApp = confirm("확인하시겠습니까?"); -> 취소or확인 버튼, 취소 = false, 확인 = true


형변환

String(333); -> 문자로 변환
Number("555"); -> 숫자로 변환, Number(null) = 0, Number(undefined) = NaN
 Number(0)은 false지만, Number('0')은 true, Number('')은 false지만, Number(' ') 공백이 있으면 true 이다.
Boolean(1); -> 결과값 true, boolean으로 변환, 0은 결과값 false, [빈문자열, null, undefined, NaN]은 false


비교 연산자

<, >, <=, >=, ==, !=
== -> 동일한지 비교
=== -> 타입까지 동일한지 비교


조건문

//사용법
if (age > 19){
    alert("test1");
} else if (age === 19){
    alert("test22");
} else {
    alert("test2");
}


논리연산자

|| -> or
&& -> and
! -> not


반복문

for
for(let i = 0; i <  10; i++){
    //반복할 코드
}

while
let i = 0;
while(i < 10){
    //반복 코드
}

do.. while (do 구문을 최소 1번 실행)
let i = 0;
do {
    //반복코드
    i++;
} while (i < 10)

break, continue 사용


switch

switch(평가){
    case A:
        //A 적용코드
    case B:
        //B 적용코드
    ...
    default:
        //else처리
}


함수(function)

function test(매개변수){
    //내용
}

매개변수의 기본값 설정 a = "testValue1"


함수표현식

let testfunc = function(){
    //함수 내용
}


화살표 함수 (arrow function)

let testfunc = (a, b) => (
    a + b;
}

//동일하게 변경
let testfunc = (a,b) => a+b;

//매개변수가 없는 경우
left testfunc = () => a+b;


객체 (object)

//객체 정의
const User = {
    name : name,
    age, // = age : age
}

User.age; // 없는 객체의 값의 경우 undefined

//객체의 값 확인
for (let key in User){
    //User의 객체의 값
    let a = User[key];
}

//객체의 값 추가
User.id = 'abc';
User[hobby'] = 'football';

//객체의 값 삭제
delete User.id

//객체의 값이 존재하는지 확인
'name' in User


method : 객체 프로퍼티로 할당 된 함수

const test1 = {
    name : 'kim',
    age : 44,
    getName() {   // = getName : function() { 을 줄여서 사용
        console.log(name);
    {
}
test1.getName();


this

let boy = {
    name : 'Mike',
}
let girl = {
    name : 'jane',
}

sayHello : function(){
    console.log('Hello, I'm ${this.name}');
}

boy.sayHello(); => Hello, I'm Mike'
girl.sayHello(); => Hello, I'm Jane'

함수를 호출하여 this를 쓸 경우 해당 호출객체의 값을 찍어준다.
화살표 함수는 일반함수와 달리 자신만의 this를 가지지 않음.
그래서 화살표 함수 내부에서 this를 사용하면 전역객체의 this를 가져옴
브라우저 환경의 this = window, Node js 의 this = global


배열 Array

//배열의 길이
arr1.length

//배열 끝에 추가
arr1.push('aa');

//배열 끝 요소 제거
arr1.pop();

//배열 앞에 제거/추가
arr1.unshift('aa','bb','cc'); //추가
arr1.shift(); //제거

//배열반복문
for (let i of arr1) {
    //반복문내용
}

 

728x90

'Programing > Javascript' 카테고리의 다른 글

javascript 기본문법 정리 #2  (0) 2022.05.01

댓글