[JS] TIL 1. 변수와 타입 그리고 문자열 다루기

in PROGRAMING STUDY on Javascript


  1. 변수

    1.1 변수의 선언과 할당에 대해서 설명하고 코드로 작성할 수 있나요?

    1.2 표현문이 값으로 변환되어서 변수에 할당되어 담기는 과정을 설명해보시오.

  2. 타입

    2.1 타입마다 다른 속성과 메소드가 있나요?

    2.2 특정 값의 타입을 확인할 수 있는 메소드는 무엇인가요?

    2.3 타입의 종류를 모두 서술 하시오.

  3. 문자열 다루기


Codestates의 소프트웨어 엔지니어링 강의를 듣고 정리한 필기입니다. 😀


1. 변수

변수는 평상시에도 우리가 사용하는 언어이다. ‘어떤 변수가 생겨서 당장 할 일을 못 했어.’, ‘변수가 생겨서 제때 도착하지 못했어.’ 등, 우리는 이런 식으로 변수라는 단어를 잘 활용한다. 즉, 변수는 상황에 따라 변할 수 있는 값을 뜻한다.

let pi;             // 선언
pi = 3.141592;      // 할당
let pi = 3.141592;  // 선언과 할당을 동시에

위 코드에는 pi 라는 변수가 있다. 중요한 것은 변수 선언 시 let 이라는 키워드를 함께 사용해 줘야 한다는 것이다. 또한, = 키워드는 ‘같다’가 아니라, ‘할당한다’라는 뜻으로 쓰인다.

title

만약 변수를 선언만 하고 할당을 하지 않는다면 어떻게 될까? 값이 없다는 뜻의 undefined가 출력된다.

pi * 5 * 5;   // 반지름이 5인 원의 넓이

프로그래밍 세계에서의 변수는 이름(Label)이 붙은 값을 의미한다. 프로그램의 데이터는 이렇게 한 번만 사용되는 것이 아니라, 실행되는 동안 계속해서 사용되기 때문에, 단순히 데이터(ex. 3.141592)를 반복적으로 사용하면 어려움이 존재한다. 따라서, 변수는 데이터에 이름을 붙이고 구분하는 바구니라고 생각하면 된다.

let sum = 1;  // 1로 값이 할당되었다.
sum = sum+2;  // 초기값에 2를 더하고, 그 값을 초기값이 들어있는 변수에 할당해준다.
sum = sum+3;  // 2를 더한 값에 3을 더했다.
sum = sum+4;  // 3을 또 더한 값에 4를 더했다.

sum이라는 변수를 이용해서 ‘1’라는 값을 다른 곳에서도 이용할 수 있다. 위 코드의 답은 10이다.


2. 타입

변수에는 다양한 타입이 존재한다. 종류로는 크게 숫자(Numbers), 문자열(String), 블리언 (Boolean), 배열(Array), 객체(Object), 함수(function) 가 있다.

2.1 숫자(Numbers)

let pi = 3.141592;  // 숫자

1. 변수 에서 배웠던 pi와 sum는 숫자 형에 해당한다. 자바스크립트는 음수, 양수, 소수, 정수 구분 없이 모두 숫자로 취급한다.

2.2 문자열(String)

let str = '';                // 빈 문자열 : 문자가 없다
let str1 = ;                 // 따옴표 생략(에러) : Uncaught SyntaxError: Unexpected token ';'
let str2 = 'testing'
let str3 = testing           // 따옴표 생략(에러) : Uncaught ReferenceError: testing is not defined
let str4 = '3.14'            // 문자열 3.14
let str5 = 'name = "river"'  // name = "river"

문자열은 작은따옴표 혹은 큰따옴표 (` 또는 “)로 묶여 표현되며, 따옴표 안에는 0개 이상의 문자를 포함한다.

let str6 = 'day "ho"';        //  => day "ho" : 큰따옴표 문자열 취급
let str7 = "day 'ho'";        //  => day 'ho' : 작은따옴표 문자열 취급

큰따옴표는 작은따옴표로 둘러싸일 때 문자열에 포함될 수 있다. 작은따옴표 또한, 큰따옴표로 둘러싸여 있으면 문자열 안에 포함될 수 있다.

2.3 블리언 (Boolean)

블리언 값은 항상 참(true)과 거짓(false)으로 표현된다.

자바스크립트는 undefined, null, ““(빈 문자열), 0, -0, NaN 여섯 개는 false값으로 판단한다. 객체를 포함하는 다른 모든 값은 불리언 값 true로 변환된다. false와 false로 변환되는 앞의 여섯 값은 때때로 거짓으로 판정되는 (falsy)값이라고 불리고, 그 밖의 모든 값은 참으로 판정되는(truthy)값이라고 불린다.

2.4 배열(Array)

let fruits = ['banana', 'apple', 'pineapple']; // 문자열이라는 타입이 여러 개가 섞인
let random = ['banana', 1, false ];             // 여러 타입들이 섞인

위 타입들이 여러 개가 섞인 타입도 존재한다. 이런 형태를 배열이라고 하는데, 순서가 있는 집합이라는 뜻이다. 또 다른 말로는 자료형이라고 불린다.

2.5 객체(Object)

let person = {
    name : 'River',
    age : 27,
    isAdult : true
};  // 객체

객체는 또 다른 자료형이다. 객체 또한 배열과 마찬가지로 여러 타입이 섞일 수 있다.


3. 문자열 다루기

let s = "Hello, world"
s.length                // => 12
s.charAt(0)             // => "H" : 첫번째 문자
s.charAt(s.lenght-1)    // => "d" : 마지막 문자
s.substring(1,4)        // => "ell" : 두번째, 서번째, 네번째 문자
s.slice(1,4)            // => "ell" : 두번째, 서번째, 네번째 문자 
s.slice(-3)             // => "rld" : 뒤에서 세번 째 문자
s.indexOf('l')          // => 2 : 문자 l이 위치한 첫 번째 위치
s.lastIndexOf('l')      // => 10 : 문자 l이 위치한 마지막 위치
s.indexOf('l', 3)       // => 3 : 세번째 문자 이후, 'l'이 등장하는 첫 위치
s.includes('e')         // => true : 문자열 안에 'e'가 존재하기 때문에 true
s.includes('a')         // => false : 문자열 안에 'e'가 존재하지 않기 때문에 false 
s.split(", ")           // => ["Hello" , "world"] : ', '를 기준으로 문자열을 나눔
s.replace("H", "h")     // => "h" : 문자열 H를 골라 h로 변경
s.toUpperCase()         // => "HELLO, WORLD" : 문자열 전부를 대문자로 변경
s.toLowerCase()         // => "hello, world" : 문자열 전부를 소문자로 변경

문자열 다루기에는 메소드뿐만 아니라 +연산자를 사용하여 문자열을 합칠 수도 있고, join()을 이용하면 배열을 다시 문자열로 만들 수도 있다.

let s = "Hello, world"
s.split(", ").join(" ")     // => "Hello world"
                       // split(", ")는 ', '를 기준으로 문자열을 나누고, 
                      // join(" ")은 문자열을 합칠 때, 문자열 사이에 공백을 준다.

let myname = 'River'
let introduce = "I'm"
introduce + ' ' + myname    // => "I'm River"


4. 그 외

typeof

typeof 'River'  // "string"
typeof 27       // "number"
typeof true     // "boolean"

typeof 라는 메소드를 사용하면 변수의 타입(type)을 확인 할 수 있다.

typeof pi       // "number"
typeof str      // "string"
typeof person   // "object"
typeof fruits   // "object"

변수 또한 타입(type)을 확인 할 수 있는데, 변수 안에 담긴 데이터의 타입이 출력된다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

typeof의 특이한 점은 배열(array)과 객체 (object)가 object라는 동일한 타입을 출력한다는 것이다. 그래서 배열의 타입을 출력해주는 메소드를 찾아봤다. Array.isArray()이라는 메소드는 typeof처럼 명시적으로 출력해주지는 않지만, 배열일 때는 true를, 그 이외에는 false를 출력해준다.


마치며

파이썬을 일주일 정도 공부한 적이 있어서 많이 어렵지는 않았다.

다만, 머릿속에 있는 것을 글로 정리하는 것은 다른 문제인 것 같다. 생각보다 시간이 너무 오래 걸렸고, 무엇보다 하나의 폼을 만드는데에도 많은 고민했다.


© 2020. by RIVER

Powered by RIVER