프로그래밍 일기 — React를 알아보자 3

JavaScript를 계속 배워보자…

JavaScript에서도 문자열(strings)은 매우 중요하다(1)

지난 글까지 JavaScript의 기본적인 변수와 연산자들에 대해 알아보았다. 변수와 연산자들을 커버했으니 이제는 조금 더 복잡한 데이터 구조와 문법을 배워야할 시간이다. 문자열(String)과 조건문, 반복문 등이 이번 글의 주제다.

문자열은 일반적으로 참조형 자료(Reference Data)의 대표격으로 알려져있고, 그에 따라 자체적으로 지원하는 클래스 메서드를 가지고 있다. JavaScript에서도 마찬가지로 문자열의 크기를 측정하거나, 부분문자열(substring)을 확인할 수 있는 메서드를 제공한다. 그 외에도 다양한 특징들이 있는데, 과연 JavaScript에서 문자열은 어떤 특성을 가지고, 그것을 가지고 놀 수 있는 어떤 장치들이 존재하는지 알아보자.

JavaScript 학습

문자열(Strings)

• JavaScript내에서 문자열은 문자(character)의 순서로 볼 수 있다. 문자열은 '' 혹은 "" , `(backtick)사이에 정의된다.
• 기본적으로 불변형자료(Immutable Data)로써, 한번 설정하면 임의로 바꿀 수 없다. 즉, 문자열 클래스에서 지원하는 특정한 메서드 (예: .replace() )가 아니면 직접적으로 변경이 불가능하다는 의미다.
• string.length 로 크기를 측정할 수 있다.
• 배열(array)처럼 [] 를 활용해 개별 문자에 접근 가능하다.

문자열 조작하기(대표적인 몇 가지만 엄선, 그 외 여러개가 있음)

• Concatenation( + , concat()): 두 개 이상의 문자열을 병합하는 것을 말한다.
• Substring( slice() , substring() ): 문자열에서 부분문자열을 추출

// 문자열 예제

// strings.js
let str1 = "Hello World!"   // 큰 따옴표
let str2 = 'This is a string';  // 작은 따옴표
let str3 = `123`;   // backtick

console.log(typeof str1, typeof str2, typeof str3);

console.log(`1 + 2 = ${1 + 2}`);  // ${}내 값을 연산하여 출력한다.

console.log(str1.length);  // 문자열 크기 측정

console.log(str2[0]);  // 문자열의 첫 번째 문자 출력

str3[0] = 'A'  // 문자열의 첫 번째 문자 수정 시도
console.log(str3);  // 출력값 변화 없음

// 문자열 조작 예제
// concatenation
let concat = str1 + " " + str2 ;  // +
let concat2 = str2.concat(" ", str3);  // concat()

console.log(concat);
console.log(concat2);

// substring
let substr = concat.slice(0, 5); // 0번째 인덱스 부터 5글자까지 추출
let substr2 = concat2.substring(7, 12); // 7번째 인덱스 부터 12번째 인덱스 직전(11번째 인덱스)까지 출력
console.log(substr)
console.log(substr2);

>> node strings.js

string string string
1 + 2 = 3
12
T
123
Hello World! This is a string
This is a string 123
 a st

조건문

• if/else 문: 조건이 참(true) 혹은 거짓(false)인지에 따라 특정 블럭의 코드가 수행되도록 명기하는 것을 말한다.
• switch 문: 값의 직열(series)에 대해 변수를 테스트하고, 값에 상응하는 케이스에 대해서 해당 블럭 코드를 실행할 수 있게 해주는 조건문이다. 일반적으로 조건이 많아 if/else 문이 길어진다면, switch 를 사용하는 것이 더 경제적이다.

// 조건문 예제

// 기본 문법
if(condition){
    // 조건이 참(true)일 때 수행할 코드
}else{
    // 조건이 거짓(false)일 때 수행할 코드
}

// conditions.js
// if/else 문
let age = 20;

if (age >= 20){ 
    console.log('You are an adult.'); // 조건이 참일 때 출력
} else{
    console.log('You are not yet an adult.'); // 조건이 거짓일 때 출력
}

// switch 문
let day = 5;

switch(day){
    case 1: // day = 1 일때 성립
        console.log('Monday');
        break;
    case 2: // day = 2 일때 성립
        console.log('Tuesday');
        break;
    default:    // 둘 다 아니면 성립
        console.log('Invalid day');
        break;
}

>> node conditions.js

You are an adult.
Invalid day

반복문

• 특정 블럭 내 코드를 반복적으로 실행하기 위함이다.
• for 문: 특정 블럭의 코드를 정확히 얼만큼 반복하고 싶은지 알고 있을 때 사용한다.
• while 문: 특정 블럭의 코드를 얼마나 반복하고 싶은지 정확히 모를 때 사용한다.
• do-while 문: 특정 블럭의 코드를 얼마나 반복하고 싶은지 정확히 모를 때 사용한다. 단, while 문과의 차이점은 최소 코드가 처음 한번은 실행이 필요할 때 사용한다는 것이다.

// 반복문 예제

// for 기본 문법
for (initialization; condition; increment){
  // 실행될 코드
} 

// while 기본 문법
while (condition) {
  // 실행될 코드
}

// do-while 문
do{
  // 실행될 코드
}while(condition);

// loops.js
// for 문
for(let i = 0; i < 5; i++){   // 조건 내에서 반복적으로 프로그램 실행
    console.log('this is for loop: ' + i);
}

// while 문
let i = 0;  // 순회에 필요한 변수를 반복문 밖에서 먼저 선언하고 초기화해주어야한다.
while(i < 5){ // 조건 내에서 반복적으로 프로그램 실행
    console.log('this is while loop: ' + i);
    i++;  // 다음 순회를 위해 변수의 값을 1 증가시킨다.
}

// do-while 문
let j = 1;  // 순회에 필요한 변수를 반복문 밖에서 먼저 선언하고 초기화해주어야한다.
do{
    console.log('this is do-while loop: ' + j);  // 처음에는 무조건 실행된다.
    j++;  // 다음 순회를 위해 변수의 값을 1 증가시킨다.
}while(j < 0);  // 조건을 확인 후 반복문을 종료한다. 

>>

this is for loop: 0
this is for loop: 1
this is for loop: 2
this is for loop: 3
this is for loop: 4
this is while loop: 0
this is while loop: 1
this is while loop: 2
this is while loop: 3
this is while loop: 4
this is do-while loop: 1

함수와 스코프(Functions and Scope)

함수(Functions)

• JavaScript의 중요 부분 중 하나로써 여러 블럭의 코드를 그룹화하고 언제든지 재사용할 수 있게 해준다.
• 함수 초기 선언시 활용되는 변수는 매개변수(parameter)라고 하며, 함수 호출 시 활용되는 값은 인자(argument)라고 한다.
• function 키워드로 선언할 수 있다.
• return 은 함수가 리턴할 값을 정의하기 위해 사용하지만, 필수는 아니다(값을 리턴하는 것 이외에 다른 연산도 가능하다.).

스코프(Scope)

• 변수나 함수가 프로그램 어디 쯤에서 접근되어야하는지에 대한 규칙들을 말한다.
• JavaScript에서는 전역(global) 스코프와 지역(local) 스코프가 있다.
• 변수나 함수가 특정 함수나 블럭 밖에서 선언되었다면 전역 스코프를 갖는다.
• 전역 스코프를 갖는 변수나 함수는 프로그램 어디에서나 접근이 가능하고, 지역 스코프를 가진다면 각각 정의된 함수나 블럭 내에서만 접근이 가능하다.
• 스코프의 특징을 이해하고 적용하는 것은 에러를 최소화하고, 가독성있으며 유지보수가 용이한 프로그램을 작성하는데 필수적이다.

// 함수와 스코프 예제

// 함수 기본 문법
function functionName(parameter1, parameter2, ...){
    // 실행될 코드
    return value; // 값 리턴, 필수는 아님
}

// 함수 예제
// functions.js
function addNumbers(num1, num2){  // 함수 이름과 사용할 매개변수(parameter)정의 
    let sum = num1 + num2;  
    return sum;
}

console.log(addNumbers(5, 10));  // 함수에 활용할 인자(argument) 정의 후 호출

// 스코프 예제
let globalvar = 'I am a global traveler.';  // 전역 스코프 변수

function printBothVar(){  
    let localvar = 'I am a local traveler.';  // 지역 스코프 변수
    console.log(globalvar);  // 전역 스코프 변수 출력
    console.log(localvar);  // 지역 스코프 변수 출력
}

printBothVar()  // 함수 호출
console.log(globalvar);  // 전역 스코프 출력
// 지역 스코프는 함수 밖에서 접근 불가 
// console.log(localvar);  // 에러 출력 - ReferenceError: localvar is not defined

>> node functions.js

15
I am a global traveler.
I am a local traveler.
I am a global traveler.

팁: 자주 틀릴만한 내용 정리

• 문자열과 숫자의 연산이 이루어진다면 문자의 연산이 우선순위가 높으므로 문자연산이 이루어진다(예: "1" + 2 + 3 = “123” ).
• JavaScript에서 기본형자료(primitive data type)는 숫자, 문자열, Boolean, Undefined, Null, Symbol이 있다.(2)
• JavaScript에서 비기본형자료(non-primitive data type)는 오직 하나의 멤버만을 갖는 자료로써 Object 등이 있다.(2)
• for문은 특정 조건이 true일 때, false가 될 때까지 계속 작업을 수행하는 반복문이다.
• concatenation에 있어서 concat() 이라는 메서드가 있지만, + 를 통해서 훨씬 간단한 문법으로 같은 기능을 수행할 수 있어 후자가 더 많이 쓰이는 방식이다.

참조:

(1) https://pixabay.com/illustrations/background-colorful-stones-jewels-1577708/

(2) https://www.edureka.co/blog/data-types-in-javascript/