자바스크립트 유용한 정보

Web/JavaScript

자바스크립트 유용한 정보

prime070 2020. 9. 3. 21:26

1. 삼항 조건 연산자(ternary operator)

세 개의 피연산자를 취할 수 있는 방법이다. 자바스크립트에서는 한 번에 세 개의 피연산자를 취하는 유일한 방법이다. 사용방법도 어렵지 않다.

var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"

age라는 var 변수를 선언해주고, 그 값으로 29를 입력해준다. 그리고 나서 술을 마실 수 있는 나이인지 확인하는 함수를 만들고 age라는 변수가 19보다 클 때(true)에는 "True, over 19"을, age라는 변수가 19보다 작을 때(false)에는 "False, under 19"라는 문자열을 출력하게 된다. 즉, 어떤 조건(true or false의 결과로 값이 반환되는 조건)에 따라서 ? 뒤에 있는 문장들이 실행된다. true일 경우에는 왼쪽, false일 경우에는 오른쪽을.

2. Switch

스위치문은 조건문 중에 하나이다. if와 else, else if문이 위에서부터 하나씩 조건을 판단해 나간다면, 스위치문은 해당 조건을 만족하는 식이 있을 경우 즉시 실행을 하게 된다.

let x = 1;

switch (x) {
    case 1: console.log("case 1");
        break;
    case 2: console.log("case 2");
        break;
    case 3: console.log("case 3");
        break;
    default: console.log("default");
}

스위치문은 switch()로 시작을 하게 된다. 괄호 안에는 조건을 판단하기 위한 값이 들어가게 된다. 그리고 case문 중에 해당 조건을 만족하는 case가 존자할 경우에, case문을 실행하게 된다. 위의 코드에서 case 1이 조건을 만족시키기 때문에 case 1이 즉시 실행된다. 해당 case가 실행되고 나서 break를 통해 switch 문을 탈출하게 된다. 만약 switch의 조건이 case 중 어떤 것도 만족시키지 못한다면 defaul가 실행되고 switch문이 끝나게 된다.

3. .padStart(), .padEnd()

.padStart와 .padEnd는 특정 문자열에 다른 문자열을 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다. padStart의 경우에는 문자열의 시작지점(좌측), padEnd의 경우 문자열이 끝나는 지점(우측)을 기준으로 새로운 문자열을 채워넣어 반환하게 된다.

다음 그림처럼 start라는 문자열을 가진 padStartTest에 padStartTest.padStart(10, "=");이라는 함수를 적용시켰더니, 시작지점부터 =과 start라는 문자열을 포함해서 총 10칸의 길이를 가진 문자열이 반환됐다.

padEndTest 역시 역방향으로 총 10칸의 길이를 가진 문자열이 출력됐는데, 끝에서부터 두 번째 인자로 설정한 =이 10이 될 때까지 부족한 공간을 채워주는 모습을 확인할 수 있다.

padStart와 padEnd의 함수에 첫 번째 인자는 새롭게 반환할 문자열의 길이를 입력하고, 두 번째 인자로는 현재 문자열에 채워넣을 다른 문자열을 입력하면 된다. 만약 채워넣을 문자열의 길이가 너무 길어 새롭게 반환활 문자열의 길이를 초과하게 되면, 초과한만큼 잘려서 나온다. 두 번째 인자를 채워넣지 않을 경우에는 공백으로 대체가 된다.

4. .trimStart(), .trimEnd(), trim()

padding 함수를 이용하거나 스페이스바, 탭 등을 사용해서 문자열에 공백을 만들 수 있으니, 반대로 공백을 제거해주는 방법도 있어야 한다. 그리고 trim 함수를 사용하면 공백을 제거할 수 있다.

먼저 trimStart()는 문자열의 시작 부분을 기준으로 공백을 제거한다. padStart() 함수가 좌측부터 새로운 문자열을 채워나갔으니, trimStart()는 좌측부터 문자열의 공백을 제거해 나간다.

padStart를 사용해서 총 길이 10의 문자열을 새롭게 반환했다. 그러나 새롭게 반환된 문자열에는 공백이 포함되어 있었고, 이를 없애기 위해 trimStart()를 사용했다. 그러나 trimEnd()는 문자열의 끝 부분(우측)부터 공백을 제거하기 때문에, 앞에 얼마나 공백이 있든 지우지 못하는 모습을 볼 수 있다.

그렇다면 공백이 좌측, 우측 모두에 존재할 경우에는 어떻게 할까? trimStart()와 trimEnd()를 모두 사용하면 모두 제거할 수 있지만 trim()함수를 사용하면 한 번에 좌우의 공백을 모두 제거할 수 있다.

5. for of, for in

for of와 for in 모두 반복문이다. 차이점은 for of의 경우 배열이나 문자열처럼 반복가능한(iterable)한 타입에 한해서만 사용이 가능하고, for in의 경우 객체와 같이 열거가능한(enumerble)한 타입에 사용하는 것이 적합하기 때문이다.

먼저 for of를 살펴보자. for of 반복문은 for문을 시작하는 방식과 같은 방식으로 for문을 선언한 뒤, 반복가능한 타입을 순회할 iterator를 선언해주게 된다. 그리고 이 iterator가 반복문을 실행할 배열이나 문자열을 인덱스 번호 0번부터 차례대로 순회하면서 반복문이 실행된다.

다음은 for in이다. for in 역시 for of와 유사하게 for문을 선언하고 사용을 시작한다. for of에서 iterator를 선언했던 것과 마찬가지로 enumerator를 선언해서 객체의 키(속성, property)를 하나씩 순회하게 된다.

for in 반복문에서는 오직 키값만 가져온다. value를 가져오는 방법은 다른 방법을 사용해야 한다.

한 가지 재미있는 점은, for in 반복문은 배열에도 사용이 가능하다는 점이다. for of 반복문의 경우 iterator가 열거가능한 타입들의 순회를 전혀 할 수 없기 때문에 실행하면 에러가 발생하지만, for in 반복문에서는 enumerator가 반복가능한 타입들을 순회할 수 있기 때문이다.

다시 testArr을 만들어서 확인해보자.

for of 반복문에서는 당연하게 정상적으로 인덱스 번호 0번부터 마지막까지 순회를 하면서 원하던 결과물을 출력할 수 있었다.

하지만 for in에서는 배열의 인덱스 번호만 출력을 하고 있는 모습이다. 위에서 말했던 것처럼 for in 반복문은 키(속성)값에만 접근을 할 수 있다. 그리고 자바스크립트 내부에서는 배열을 다음과 같이 표현할 수도 있다.

const testArr = ["Kim", "Lee", "Park", "Choi"];

const testArr = {
    0 : "Kim",
    1 : "Lee",
    2 : "Park",
    3 : "Choi"
}

배열 testArr을 객체 testArr로 바꿔서 표현할 수 있기 때문이다. 객체 testArr의 키값이 배열 testArr의 인덱스 번호와 동일하게 작동을 하기 때문에 for in 반복문에서 enumerator가 객체를 순회할 수 있게 된다. 물론 실제로 배열과 객체가 동일하게 작동하지는 않는다. 내부적으로 저렇게 표현되면서 enumerator가 순회할 수 있다는 부분을 말하기 위해서 작성한 것이다.