자바스크립트 입문 정리 part.2

mauz·2022년 7월 6일
0

javascript

목록 보기
2/7
post-thumbnail
post-custom-banner

프로그래머스 'Hello, JavaScript: 자바스크립트 입문' 강의와 구글링을 통해서 정리한 글입니다.

1. 연산자

1-1. 산술연산자 (Arithematic operator)

1-1-1. 다항 연산자 (binary operator)

두개의 피연산자(A, B)를 가지는 연산자. A 연산자 B 의 꼴로 사용함. 피연산자는 변수나 숫자가 될 수 있음.

  • + 더하기
  • - 빼기
  • * 곱하기
  • / 나누기 (//는 주석이다..)
  • % 나머지

1-1-2. 단항 연산자 (unary operator)

하나의 피연산자(A)를 가지는 연산자. 보통 연산자A의 꼴로 사용함. 대표적으로 - 연산자가 있으며, -A의 꼴로 사용하는 경우 A변수에 -1을 곱한 효과가 발생.

증감연산자 (++, --)

var a;

a = 1;
console.log(++a);
console.log(a);

a = 1;
console.log(a++);
console.log(a);


출력
2
2

1
2

Math 관련 명령어

  • Math.pow(a,b) : a의 b승을 구해 줌 ( a**b 으로도 구해지더라.)
  • Math.sqrt(a) : a의 제곱근을 구해 줌 ( a**(1/2)으로도 구해지더라.)
  • Math.random() : 0~1 사이의 임의의 난수를 발생시켜 줌

근데 파이썬에서 썼던 것 처럼

a += 1
a -= 1
a *= 1
a /= 1
a **= 1

으로 연산과 동시에 변수의 값을 변경할 수 있더라.


1-2. 관계연산자 (Relational operator)

두 표현식(A, B)의 관계를 비교하는 이항연산자. 관계에 따라 boolean 타입의 true, false로 표현됨.

관계연산자동작True 인 예시False인 예시
<A보다 B가 더 큰 경우 참3 < 53 < 3
>A보다 B가 더 작은 경우 참5 > 33 > 3
<=A보다 B가 크거나 같은 경우 참3 <= 34 <= 3
>=A보다 B가 작거나 같은 경우 참3 >= 33 >= 4
==A와 B가 같은 경우 참3 == 34 == 3
!=A와 B가 같지 않은 경우 참3 != 43 != 3

파이썬과 같아 보인다~

1-3. 논리연산자 (Logical operator)

&& (and) 연산자
두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자

|| (or) 연산자
두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자

! (not) 연산자
피연산자가 true인 경우 false를, false인 경우 true를 나타내는 단항연산자

파이썬과 달라서 익숙해져야겠다..


연산자 우선 순위

수학에서 곱하기를 더하기보다 먼저 계산하는 것 처럼, Javascript에서도 연산자에 우선순위가 존재.

우선순위 순으로 정리한 연산자

  1. ++, --
  2. !
  3. *, /, %
  4. +, -
  5. <, <=, >, >=
  6. ==, !=
  7. &&
  8. ||

괄호

우선순위를 명시하기 위해 괄호를 사용. 괄호안의 계산식이 먼저 계산됨.

  • 코드의 가독성 향상
  • 연산자 우선순위 실수 방지

2. 문자열 다루기

2-1. 문자열의 길이

문자열의 길이는 .length 또는 ["length"]로 얻을 수 있다.
객체(object)에 정의된 속성(property)에 접근하는 방법과 동일하다.

var str1 = 'hello';

console.log(str1.length);
console.log(str1["length"]);


출력
5
5

2-2. 문자열 붙이기

.concat 명령어 또는 +연산자로 문자열을 붙일 수 있다.

var str1 = 'hello', str2 = ' world';

console.log( str1.concat(str2) );
console.log( str1 + str2 );


출력
hello world
hello world

숫자를 문자열에 붙이면 어떻게 될까?

console.log( 'hello' + 123 );
console.log('hello'.concat(123));


출력
hello123
hello123

숫자를 문자열로 바꾸어 더한다.

2-3. 특정 위치의 문자열 알아내기

.charAt 함수 이용

var str1 = 'hello';

console.log( str1.charAt(0) );
console.log( str1.charAt(str1.length-1) );


출력
h
o

대괄호([]) 사용

var str1 = 'hello';

console.log( str1[0] );
console.log( str1[str1.length-1] );


출력
h
o

2-4. 부분문자열 구하기

문자열의 연속된 일부분을 구하는 함수

.substring( a , b ) : 인덱스 a 부터 인덱스 b 전까지의 문자열 반환 (파이썬의 리스트슬라이싱과 같다.)

  • b 생략시 a 에서부터 마지막 까지의 문자열 반환
var str1 = 'helloworld';

console.log( str1.substring(2,5) );
console.log( str1.substring(2) );


출력
llo
lloworld

substr(pos, length) : pos에서 length길이 만큼의 부분 문자열 반환

  • length 생략시, pos에서 마지막까지의 문자열 반환
var str1 = 'helloworld';

console.log( str1.substr(2,5) );
console.log( str1.substr(2) );


출력
llowo
lloworld
  • substr(pos, length)에서 pos가 음수이면,
var str1 = 'helloworld';

console.log( str1.substr(-6) );		// pos가 음수이면, 뒤에서 pos 번째까지의 문자열을 리턴한다.
console.log( str1.substr(-6,3) ); 	// length가 있으면, 뒤에서 pos 번째까지의 문자열에서 다시 앞에서 length 까지의 문자열을 리턴한다.


출력
oworld
owo

2-5. 문자열 검색하기

.indexOf(str) : 앞에서 처음 등장하는 str의 위치를 리턴합니다.

var str1 = 'helloworld';

console.log( str1.indexOf('l') );
console.log( str1.indexOf('ow') );

console.log( str1.indexOf('a') );


출력
2
4

-1 // 문자열에 존재하지 않는 문자를 찾으면 -1을 리턴한다.

.lastIndexOf(str) : 뒤에서 처음 등장하는 str의 위치를 리턴합니다.

var str1 = 'helloworld';

console.log( str1.indexOf('l') );
console.log( str1.substr('ow') );


출력
8
4

3. 배열

값을 저장할 수 있는 엘리먼트(변수)의 연속된 공간. 주소(인덱스, index)를 이용해 각 엘리먼트에 접근 가능.

var arr1 = [];         // 빈 배열
var arr2 = [1, 2, 3];   // 길이가 3인 배열
var arr3 = [ 1, true, 3.14, "string"];    // 어떤 자료형이든 저장될 수 있음

console.log(arr1.length);
console.log(arr2.length);
console.log(arr3[arr3.length-1]);


출력
0
3
string

2-1. 배열에 엘리먼트 추가/삭제하기

.push(element) : 배열의 뒤에 엘리먼트 추가
.pop() : 배열의 뒤에서 엘리먼트 삭제하고 리턴

var arr = [1,1,1,1];

arr.pop(); // 1

console.log(arr); // [1,1,1]

arr.push(2); // 4

console.log(arr); // [1,1,1,2]

.shift() : 배열의 앞에서 엘리먼트 삭제하고 리턴
.unshift(element) : 배열의 앞에 엘리먼트 추가

var arr = [1,1,1,1];

arr.shift(); // 1

console.log(arr); // [1,1,1]

arr.unshift(3); // 4

console.log(arr); // [3,1,1,1]

2-2. 배열 붙이기, 검색하기

arr1.concat(arr2) : arr1과 arr2 붙임

var arr1 = [1,2,3], arr2 = [4,5];

console.log( arr1.concat(arr2) );
console.log(arr1 + arr2); // 덧셈은 배열을 문자열로 변환하여 붙인다.


출력
[1,2,3,4,5]
'1,2,34,5'

arr.indexOf(element) : arr에서 element가 있는 첫 위치를 검색
arr.lastIndexOf(element) : arr에서 element가 있는 마지막 위치를 검색

2-3. 문자열 split 함수

문자열을 구분자(separator)로 나눠서 각각을 담은 배열을 반환하는 함수

var str="1,2,3,4,5";
arr = str.split(",");

console.log(arr);

  
출력
["1", "2", "3", "4", "5"]

3. 주석

//한줄 주석

/*
여러 줄 주석
우왕
*/

4. if-else 문

if(/*조건식*/){
    /*참인경우 실행될 코드*/
}
else if( /*조건식*/ ){
    /*if 문의 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드*/
}
/* 여러개의 else if... */
else{
    /*모든 if, else if 문이 모두 실행되지 않았을 때 실행될 코드*/
}

5. switch-case 문

switch, case는 조건에 따라 프록그램의 흐름을 분기해서 특정 코드가 실행되도록 합니다. break구문을 만나면 switch-case의 마지막 중괄호 밖으로 빠져나오게 됩니다.

아래의 코드는 choice의 값에 따라 출력되는 값이 달라지는 코드입니다.

switch( choice ){
    case 1:
        console.log("1번 메뉴를 선택하셨습니다.");
        break;
    case 2:
        console.log("2번 메뉴를 선택하셨습니다.");
        break;
    case 3:
        console.log("3번 메뉴를 선택하셨습니다.");
        break;
    case 4:
        console.log("4번 메뉴를 선택하셨습니다.");
        break;
    default:
        console.log("없는 메뉴 입니다.");
        break;
}

여러개의 case를 한번에 처리할 수도 있다.

switch('hi'){
    case 'bye':
        console.log('casebye');
    case 'hi':
        console.log('casehi');
}


출력
casehi

문자열도 조건에 들어간다.

break을 넣는 위치를 조절해서 효율적으로 switch문을 사용할 수 있다고 하는데..

switch(1){
    case 0:
        console.log('case0');
    case 1:
        console.log('case1');
    case 2:
        console.log('case2');
    case 3:
        break;
        console.log('case3');
    case 4:
        console.log('case4');
}


출력
case1
case2

어디에 쓴다는 걸까..

switch는 파이썬에서 보지못한 문법이라 생소하다.
사용법에 익숙해져야겠다.

profile
쥐구멍에 볕드는 날
post-custom-banner

0개의 댓글