new 연산자 / 메소드 / Switch 문

1. new 연산자

2. 문자열 메소드

3. Array의 메소드

4. 비구조화 할당 (구조분해 할당)

5. switch문

---

1. new 연산자

new 연산자는 자바스크립트 고유의 예약어이며 고유의 연산자(operator)이다. new 라는 의미는 영역(block)을 지정하여 함수 내부의 정의된 내용을 실행해주는 것이다.

 

let str = "010-1234-5678";

let str2 = new String("010-1234-5678");

 

str는 문자열로 선언한 것이고, str2는 문자열 객체로 선언한 것이다. str과 str2의 데이터 타입을 콘솔에 출력해보면 str1은 "string", str2는 "object"로 출력된다.

 

하지만, str과 str2의 값을 비교하면 str == str2는 true가 된다. 이는 str의 문자열 값과 str2 객체의 값을 비교하기 때문에 true가 된다. 데이터 타입까지 엄격하게 비교하는 삼등호 연산자로 비교하면 str === str2는 false가 된다. 문자열과 객체 타입으로 데이터 타입이 서로 다르기 때문이다.

 

 

2. 문자열 메소드

 

[그림 1] JS 문자열 메소드

 

문자열 메소드	설명
split()	String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환
replace()	인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환
repeat()	해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환
includes()	인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환
indexOf()	String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환
substring()	String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환
substr()	String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환
concat()	String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환
valueOf()	String 인스턴스의 값을 문자열로 반환

 

// split()

let str2 = new String("010-1234-5678");

let arr = str2.split("-"); // 하이픈(-)이 나타나는 곳에서 문자열을 분리

console.log(arr); // ['010', '1234', '5678']


// replace("대체 전 문자", "대체 후 문자")

let text = "denk ntar neenaw";

let result = text.replace("n", "s");

console.log(result); // desk ntar neenaw (문자열의 첫 번째 n만 s로 바뀜)

let pattern = /n/;

let result2 = text.replace(pattern, "s");

console.log(result2); // desk ntar neenaw


// repeat(반복횟수)

let star = "*";

let stars = star.repeat(5); // *을 5번 반복

console.log(stars); // *****


// includes()

let words = "creative";

let word = words.includes('a'); // 'creative'에서 a가 있는지 확인

console.log(word); // true

let word2 = words.includes('a', 2); // 'eative'에서 a가 있는지 확인

console.log(word2); // true

let word3 = words.includes('a', 4); // 'tive'에서 a가 있는지 확인

console.log(word3); // false


// indexOf()

let cow = "abab";

console.log(cow.indexOf('ab')); // 0 (검색된 문자열이 '첫번째'로 나타나는 위치 index)

console.log(cow.indexOf('ba')); // 1

console.log(cow.indexOf('abc')); // -1 (찾는 문자열이 없으면 -1을 리턴)

console.log(cow.indexOf('AB')); // -1


// substring(시작 인덱스, 종료 인덱스)

let today = "2022-01-06";

let year = today.substring(0, 4);

console.log(year); // 2022

let month = today.substring(5, 6);

console.log(month); // 01

let date = today.substring(8, 9);

console.log(date); // 06


// substr(시작 인덱스, 길이)

let year2 = today.substr(0, 4);

console.log(year2); // 2022

let month2 = today.substr(5, 2);

console.log(month2); // 01

let date2 = today.substr(8, 2);

console.log(date2); // 06

 

 

3. Array의 메소드

메소드	설명
forEach()	해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백 함수를 실행
filter()	해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백 함수를 실행 후, 결과값이 true인 요소들만 새로운 배열에 담아 반환
map()	해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백 함수를 실행 후, 결과를 새로운 배열에 담아 반환
reduce()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 2개의 인수를 전달받는 콜백 함수를 실행

 

// forEach()

let newArr = [1, 2, 3];

for (let i = 0; i < newArr.length; i++) {

    console.log(newArr[i]);
    
}

newArr.forEach(v => console.log(v)); // 위의 for 문과 같은 원리로 실행됨


// filter()

let arr = [-10, -5, 0, 5, 10];

function compare(value) {

    return value < 0;
    
}

let lessTen = arr.filter(compare);

console.log(lessTen); // [-10, -5]


// map()

let arr = [1, -2, 3, -4];

let absolute = arr.map(Math.abs);

console.log(absolute); // [1, 2, 3, 4]


// reduce()

let arr = [1, 2, 3, 4, 5];

function sum(x, y) {

    return x - y;
    
}

console.log(arr.reduce(sum)); // 1 - 2 - 3 - 4 - 5 = -13

 

 

4. 비구조화 할당 (구조분해 할당)

비구조화 할당이란 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말한다. 

 

비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다.

배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다.

 

// 비구조화 할당 전 코드

let fruit = ['Apple', 'Banana', 'Peach'];

let Apple = fruit[0];

let Banana = fruit[1];

let Peach = fruit[2];

console.log(Apple); // Apple

console.log(Banana); // Banana

console.log(Peach); // Peach

 

비구조화 할당 전 코드를 살펴보면, 배열 안에 있는 각각의 요소들을 꺼내 쓰기 위해서 각각의 변수 안에 배열 내 인덱스를 찾아서 매칭시켜줘야 했다.

 

// 비구조화 할당 코드

let fruit = ['Apple', 'Banana', 'Peach'];

let [Apple, Banana, Peach] = fruit;

console.log(Apple); // Apple

console.log(Banana); // Banana

console.log(Peach); // Peach

 

비구조화 할당 코드를 이용하면 한 줄로 해당 배열의 코드를 바로 객체 안에 넣어주는 것이 가능하다. 비구조화 할당 코드를 쓰면 왼쪽의 변수에 오른쪽 배열 값이 바로 값을 분해해서 바로 할당해준다.

 

1:1로 값을 바로 매칭하는 것이 아니라, 하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당하는 것도 가능하다. 전개 연산자(...)를 이용하면 매칭된 값 외 모든 데이터 값을 할당할 수 있다.

 

// 비구조화 할당 구조 분해

let fruit = ['Apple', 'Banana', 'Peach', 'Pear'];

let [Apple, ...etc] = fruit;

console.log(Apple); // Apple

console.log(etc); // ["Banana", "Peach", "Pear"]

 

...을 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다.

(...을 사용하려면, 반드시 가장 마지막 요소에 넣어주어야 한다.)

 

// 기본값 지정

let fruit = ['Apple', 'Banana', 'Peach'];

let [Apple, Banana, Peach, Pear = 'Pear'] = fruit;

console.log(Apple); // Apple

console.log(Banana); // Banana

console.log(Peach); // Peach

console.log(Pear); // Pear

 

만약 내가 지정한 변수의 매칭 값이 없다면 undefined가 발생한다. 이때 undefined가 아니라 기본적으로 넣어주는 값이 있다고 하면 기본 값을 지정하는 것도 가능하다.

 

위의 코드블럭에서 Pear의 경우 fruit배열 안에 해당 값이 없지만, 기본값을 지정해줘서 해당 값이 console.log에서도 찍히는 것을 알 수 있다.

 

 

5. switch문

switch문은 어떤 값을 가진 대상을 두고 조건값과 일치하는지를 확인하고 동작을 수행한다.

 

문법은 다음과 같다.

 

// switch문 문법

switch (대상) {

    case 조건값1:
    
        동작
        
        break; // 생략 가능
        
    case 조건값2:
    
        동작
        
        break; // 생략 가능
        
    // ...
    
    default:
    
        동작
        
}

 

switch라는 키워드 뒤에 소괄호를 열어 비교할 대상을 작성하고, 중괄호로 블록문을 만든다. 블록문 안에 case 키워드를 작성하고 조건값을 입력한 뒤 콜론(:)으로 case문의 끝 지점을 구분해 준다.

 

break 키워드는 switch문을 빠져나가게 하며, 해당 조건을 만족한 뒤 필요한 동작을 한 다음은 블록문을 빠져나오는 것이 일반적이기 때문에 생략이 가능하지만, 작성해주는 경우가 더 많다.

 

default라는 키워드는 모든 조건값들과 비교해서 일치하는 결과가 없을 경우에 필요한 동작을 수행하게 한다. else문과 같은 느낌으로, 반드시 필요한 구문은 아니기 때문에 생략이 가능하다.