[JavaScript] 기본

이예지·2023년 9월 15일
JavaScript

JavaScript

목록 보기
1/4

⚡️ JavaScript의 장점

JS는 원래 웹브라우저를 제어하기 위한 언어였지만, 웹서버(Node.js)에서도 사용되면서 탈웹브라우저의 성격을 띄게 되었다.
💡 따라서 웹브라우저와 웹서버 모두를 하나의 언어로 제어할 수 있는 장점이 있다.
Google Apps Script를 통해 spreadsheet에서도 사용되면서 탈웹의 성격도 가지게 되었다.


🔢 Math class를 이용한 숫자 연산

Math.pow(3,2);       // 9,   3의 2승
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자
Math.round(Math.random() * 100); // 100보다 작은 정수를 랜덤으로



🌀 비교

// === 사용하기
alert(1=='1');              //true 같은 의미를 갖는다면 동일하게 본다
alert(1==='1');             //false

== : 같은 의미를 갖는다면 동일하게 인식
=== strict equal operator: 같은 의미와 더불어 데이터타입이 같아야 동일하게 인식

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

alert(0 === -0);                //true
alert(NaN === NaN);             //false
nullundefinedNaN
의도적으로 값이 없는 상태의도하지 않았는데 값이 없는 상태연산이 불가능할 때

https://dorey.github.io/JavaScript-Equality-Table/
참고: ==와 ===의 차이를 직관적으로 알 수 있는 사이트


🌀 조건

빈문자열 '' : false
undefined : false

// 0부터 9까지 변수 i에 순차적으로 값을 할당
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다.
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}



🌀 함수

function get_argument(a) {
	retrun a;
 }
 get_argument(1);

get_argument(a) → a : 매개변수(parameter)
get_argument(1) → 1 : 인자(argument)

var numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }
}
numbering();

JS에서는 변수를 함수로 정의할 수 있다.
자바스크립트는 함수형 언어이므로 함수가 언어에서 차지하는 위상이 높기 때문이다.

❓익명함수 일회성 함수

(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }
})();
// 정의된 함수 바로 호출 -> 익명함수 - 일회성 함수

괄호를 통해 함수를 정의하고 바로 호출할 수 있다.


🌀 배열

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

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]); // 인덱스로 접근
alert(member[1]);
alert(member[2]);
function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다.
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());
    document.write('<br />');
}
  • 배열.length : 배열의 원소 반환
  • .toUpperCase() : 문자를 대문자로 변환

💡 추가

var li = ['a','b','c','d','e'];
li.push('f');       // ['a','b','c','d','e','f']

push() : 배열을 한 칸 늘려 마지막에 원소 하나 추가

li = li.concat(['f','g']);     // ['a','b','c','d','e','f','g']

concat() : 배열을 인자로 취하여, 여러 원소를 마지막에 추가

li.unshift('z'); // ['z','a','b','c','d','e']

unshift() : 배열의 시작점에 원소 추가

💡 배열의 특정구간 추출하거나, 특정구간에 특정 배열 추가

 array.splice(index, howmany, element1, ... , elementN);
  • index : 배열을 추가할 위치를 가르키는 인덱스
  • howmay : index에서부터 제거될 원소들의 수
    index부터 index+howmany에 해당되는 원소들은 삭제, 이 값이 0이면 어떤 원소도 삭제되지 않음
var a = ['a','b','c'];
a.splice(1,0,'d'); // a = ['a','d','b','c']
var a = ['a','b','c'];
a.splice(1,1,'x','y'); // a = ['a','x','y','c'] 리턴값 ['b']
// 인덱스 1 지점에서 1개의 원소 삭제하고 요소들을 추가한다

배열을 바꾸고 삭제한 값을 리턴한다.

💡 제거

var li = ['a','b','c','d','e'];
li.shift(); // a 리턴 후 li = ['b','c','d','e']

shift() : 배열의 첫 번째 원소 제거

var li = ['a','b','c','d'];
li.pop(); // e 리턴 후 li = ['a','b','c','d']

pop() : 배열의 마지막 원소 제거

💡 정렬

var li = ['a','b','c','d','e'];
li.sort();
li.reverse(); //역순정렬
sort(sortFunction());

sort() : 오름차순 정렬
reverse() : 내림차순 정렬


💥 객체

인덱스로 숫자를 사용하는 배열 이외에, 인덱스로 문자를 사용하고 싶다면 객체를 사용하면 된다. 다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; //key와 value

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

grades[’k8805’], grades.k8805 두가지 방법으로 접근 가능
grades[’k8805’]로 접근 시에는 [’k88’+’05’]와 같이 사용 가능하다.

💡 반복문에서의 사용

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
} // 배열에서도 사용 가능

key in object 와 같은 형태로 사용할 수 있으며, 배열에서도 사용 가능

💡 함수를 포함한 객체

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();
/*
grades['list']['egoing'] = 10
grades['show'](); => 함수 실행 
*/

자바스크립트에선 함수도 변수로 선언할 수 있기 때문에 값으로써의 함수는 객체 안에 들어갈 수 있는 것!
this → 이 함수가 속해있는 객체를 가리키는 변수 / 여기서는 grades를 말함






참고

인프런-생활코딩 자바스크립트(JavaScript) 기본
https://opentutorials.org/course/743/4650

profile
이예지
다음 포스트

[JavaScript] 정규표현식(Regex)

0개의 댓글