2024.09.05 (Day 4) -JavaScript 변수와 데이터 타입

소프트웨어 언어 학습 흐름

• 모든 소프트웨어 언어는 작성 규칙이 있다.
• 이 작성 규칙을 그 언어의 문법이라고 한다. 소프트웨어 언어 문법을 학습한다는 것은 그 언어에서 제공하는 예약어가 무엇이 있으며 식별자 정의 규칙은 어떻게 되고, 연산자는 무엇이 있는지 등을 학습하는 것이다.

• 소프트웨어 문법을 익히고 그 문법에 맞추어 프로그램을 작성한다.

 

▼코드는 예약어, 식별자, 연산자, 데이터의 조합이다.

• 예약어 (let, function, true 등등..) 는 소프트웨어 언어에서 지정한 단어

• 식별자 (count, number 등등..) 는 개발자가 구분을 위해 지정한 단어

• 연산자 (++, +=, ===, = 등등..) 는 특별한 연산을 위해 지정된 기호 혹은 단어

• 데이터는 값

 

▼코드는 선언구문과 실행구문으로 구분된다.

1.선언 구문

• 변수, 함수, 클래스를 선언하기 위해서 작성되는 구문이며 흔히들 “변수를 선언해서, 함수를 선언해서, 클래스를 선언해서” 라는 표현을 많이함
• 각 선언한 것을 식별하기 위해서 식별자를 지정해 줌
• 변수를 선언하면서 그 변수 명을 지정하거나 함수를 선언하면서 그 함수명을 지정함

2. 실행 구문

• 이미 선언되어 있는 변수, 함수, 클래스를 이용하는 구문을 의미
• 선언된 변수에 값을 판단하거나 변경하거나, 선언된 함수를 호출하거나 아니면 선언된 클래스를 생성하는등 무언가 선언된 것 가지고 행위가 이루어지는 구문을 실행구문이라고 한다.

▼소프트웨어 언어의 문법을 먼저 학습하고 플랫폼에서 제공하는 API 를 학습한다.

★  API [Application Programming Interface(애플리케이션 프로그램 인터페이스)]

- 프로그램 코드에서 이용할 수 있는 변수, 함수, 클래스등을 의미하며 이미 만들어져 제공되는것

•  문법을 학습한 다음 플랫폼에서 제공되는 API 를 학습해야 한다.

▼ 애플리케이션의 궁극적인 목적은 데이터이다. 이 데이터를 이용하기 위해 변수, 타입등이 학습되어야 한다.

• 데이터는 애플리케이션에서 이용하는 값이라고 생각하면 되는데 이 값이 애플리케이션이 실행되는 동안 컴퓨터 메모리에 저장되어 있어야 하고 메모리에 저장된 데이터를 쉽게 식별해서 이용하기 위해서 변수를 선언하고 그 변수로 데이터를 이용한다.

 

▼ 데이터를 적절하게 핸들링하기 위한 연산자, 제어문에 대한 학습이 필요하다

•  애플리케이션이 실행되면서 각 데이터를 우리가 원하는 대로 조작해 주어야 한다. 단순하게 사칙 연산을 하거나 어느 데이터가 큰지를 판단하는 등 다양한 작업이 진행되어야 한다.

이를 위해서는 연산자가 필요하며 자바스크립트에서 어떤 연산자를 제공하는지 학습이 되어야 하고 또 어떤 코드 부분이 반복적으로 실행되거나 조건에 만족하는 경우에만 실행되게 제어를 해주어야 하는데

이런 부분을 제어문이라고 하고 자바스크립트에서 제어문을 작성하는 방법에 대한 학습이 있어야 한다.

 

▼ 하나의 업무처리를 위한 여러 라인의 코드를 묶어서 이용하기 위한 함수의 학습이 필요하다.

•  하나의 업무를 위한 여러 라인의 코드를 묶어서 개발하는데 그 역할을 하는 것이 함수이다.

 

▼ 관련된 데이터 및 함수를 묶어서 표현하기 위한 객체에 대한 학습이 필요하다.

• 프로그램 코드를 작성하다 보면 많은 변수, 함수들이 만들어지는데 이 변수, 함수들을 관련된 것끼리 다시묶어서 개발하고 이용하는데 이를 흔히 객체라고 하며 객체를 이용하는 프로그램을 흔히 객체지향 프로그램이라고 한다.

 

 

strict mode

• 자바스크립트 코드 첫 줄 혹은 함수 내용 첫 줄에 ‘use strict’ 라고 쓰는 경우가 있는데 'use strict’ 을 사용하는 것을 자바스크립트 ‘엄격모드’ 라고 한다. 이 엄격모드는 자바스크립트로 구현하고자 하는 코드의 알고리즘과는 관련이 없다.

• 우리가 작성한 자바스크립트 코드를 실행시켜 주는 자바스크립트 엔진에게 우리가 작성한 코드를 어떻게실행시라는 일종의 명령이다.

• 엄격모드가 선언되지 않은 경우를 용어상으로 느슨한 모드(sloppy mode) 라고 한다. 우리가 이미 살펴보았듯이 자바스크립트는 다른 소프트웨어 언어와 비교해 느슨한 문법을 지원한다.

자바스크립트 프로그램을 작성하면서 엄격모드를 선언할 것인지는 개발자 선택성이지만 대부분의 자바스크립트 엔진에서 이 엄격모드를 지원하고 있음으로 엄격모드를 이용할 것을 권장하고 있다.

 

 

 

변수 ( Variable = var )

 

▼ 변수와 데이터 및 선언

• 소프트웨어 언어에서 하나의 의미있는 값을 데이터라고 하며 그 데이터를 저장하거나 변경하기 위한

구성요소를 변수 (Variable) 라고 한다.

 

 

•  자바스크립트에서 변수를 선언하기 위해서는 var, let, const 예약어 중 하나를 이용한다.

•  변수의 데이터는 변경 될 수있으며 변수에 대입된 데이터가 변경될 수있다는 의미이다.

 

▼ 네이밍 규칙

• 식별자는 문자, 숫자, 언더스코어( _ ), 달러기호($)의 조합으로 작성한다.

• 식별자의 첫글자는 문자, 언더스코어( _ ), 달러기호($)로 시작할 수 있다.

• 식별자에는 공백이 추가될 수 없다.

• 자바스크립트의 예약어는 식별자로 사용할 수 없다.

 

▼ 변수 var과 let

• var 예약어로 변수를 선언하는 방법은 자바스크립트 초기부터 제공되던 오래된 방법이다.

• let 예약어로 변수를 선언하는 방법은 ECMA2015 에서 제공하는 방법이다.

 

▼ 상수 변수 선언

• 상수변수는 초기 선언하면서 값을 대입하면 이후 값 변경이 불가능하다.

• const 로 선언된 변수는 선언과 동시에 초기값을 대입해 주어야 한다.

 

 

▷ 변수 선언 해보기

    <script>
        //변수선언
        let data1 =10
        const data2 = 20

        //변수 값 변경
        data1 = 30
        //data2 = 30 // error Assignment to constant variable.

        var data3 =10
        data3 = 20

        // 한번에 여러개 변수 선언 가능
        let no1, no2, no3 = 0
        console.log(no1,no2,no3) //undefined undefined 0 값이 대입이 안되어있음
    </script>

 

Data Type

▼ 타입 유추

• 프로그램에서 데이터를 이용하기 위해서는 변수를 선언하고 그 변수에 데이터를 할당해서 이용한다.

그런데 이런 데이터가 어떤 타입의 데이터인지를 구분해서 사용해 주어야 한다.

 

• 또한 모든 소프트웨어 언어에서는 데이터를 타입으로 구분한다.

하지만자바스크립트에서는 개발자 코드에 타입을 명시하지는 않는다.

 

• 자바스크립트는 데이터 타입을 위한 예약어도 없으며 하나의 변수에 다양한 타입의 데이터 대입이 가능하다.

 

• 소프트웨어 언어에서 데이터 타입이 없을 수는 없다.

데이터 타입이 없는 것이 아니라 대입되는 값을 보고 타입이 유추되는 것. 이를 흔히 타입 유추 기법이라고 한다.

 

 

■ 자바스크립트에서 데이터 타입은 숫자타입, 문자타입, 논리타입,객체타입이 있다.

 

▼ 숫자타입

• 숫자 타입은 10, 20 처럼 정수 데이터와 10.1, 20.1 처럼 실수 데이터를 표현하는 타입이며

typeof 는 데이터 타입을 확인하기 위한 예약어 이다.

▼ 문자타입

• 문자 타입은 문자열 혹은 문자 하나를 표현하기 위한 타입이며  문자 타입의 데이터는

싱글쿼터( ‘ ) 혹은 더블쿼터( “ ) 로 묶여야 한다.

 

▼ 논리타입

• 논리타입은 참/거짓 데이터를 가지는 타입이며 데이터로 true/ false 를 의미한다.  주로 프로그램 코드에서 어떤 조건을 명시할 때 많이 사용되는 타입이다. 또한 Boolean 타입 혹은 bool 타입이라고도 부른다.

 

        "use strict"

        let data =10
        console.log(data, 'type is' , typeof data) //10 'type is' 'number'

        
        data = '홍길동'
        console.log(data, 'type is' , typeof data) //10 'type is' 'string'
        
        data = true
        console.log(data, 'type is' , typeof data) //10 'type is' 'boolean'

        data = 10.0
        console.log(data, 'type is' , typeof data) //10 'type is' 'number'

        data = '10'
        console.log(data, 'type is' , typeof data) //10 'type is' 'string'

 

---

	let data1 = 10
        let data2 = 20
        let data3 = '10'
        let data4 = '20'

        console.log(data1 + data2); //30
        console.log(data3 + data4); //1020 = 문자열 10과 20이 연결되어 1020
        console.log(data1 + data3); //1010 = number 10과 문자열 10 연결되어 1010

 

---

▼ 템플릿 문자열 = 템플릿 리터럴 (Template string = Template litera )

문자열 데이터를 만드는 방법을 의미하며 Template string 을 만드는 목적은 동적인 결과가

추가된 문자열을 만들기 위함이다. Template string 을 이용하기 위해서는 전체 문자열이 백틱으로 묶여야 하며

문자열내에 동적 데이터가 들어가는 부분은 ${ } 로 묶어주어야 한다.

 

    <script>
        let name = '섭이'
        const calSum = (no) => {
            let sum = 0
            for(i=1; i<=no; i++){
                sum += i
            }
            return sum
        }

        document.write('안녕하세요' + name + '님, 함수 호출 결과는 ' +
            calSum(10) + '이고 연산 결과는 ' + (10+20) + '입니다.<br/>' 
        )
        
        //동적일때 ${}
        //template string의 ${} 에는 expression code만 가능하다
        // 아래처럼 statement 코드는 불가능하다.
        // let a = `
        // ${let data=10}
        // `

        document.write(`
        안녕하세요 ${name} 님, 함수 호출 결과는 ${calSum(10)}, ${10+20} <br/>
        `)

        
        //문자열 테이터 여러라인..
        // js code 적으로는 개행에 의한 데이터(\n)이 유지되지만
        //html 에서는 모든 화면은 태그.
        // let a = 'hello world' // X
        let a = 'hello ' + 'world'
        let b = `
        hello <br/>
        world
        `

        document.write(a,b)
    </script>

 

 

▼ undefined 와 null

 

▷null

• null 은 객체에 대입되는 값이며 무언가 의미있는 데이터를 표현하는 값이 아니라 객체가 선언되기는 했는데 아직 값이 없는 상태를표현하는 값이다.

 

▷ undefined

• undefined 는 데이터 타입이며 자바스크립트에서 데이터 타입은 변수에 대입되는 데이터에 의해 유추가 된다.

변수가 선언되기는 했지만 값이 대입되지 않아서 데이터 타입을 유추할 수 없는 상태의타입을 의미하며

즉 데이터가 아니라 데이터 타입이 유추가 되지 않는 상태를 의미하는 타입이다.

 

    <script>
    //null
        let data1= null
        console.log(data1,`type is ${typeof data1}` );
    </script>

    //undefined
    let data2;
        console.log(data2, typeof data2);

 

 

 

 

▼ 컬렉션 타입 – 배열 (Array)

• 배열(Array) 이라 함은 모든 소프트웨어 언어에서 제공되는 데이터 타입이며 데이터의 자료구조이다.

한마디로 정의하자면 여러 개의 데이터를 표현하는 타입이라고 할 수 있다.

 

• 배열 변수에 들어가는 데이터를 명시할때는 대갈호( [ ] )를 이용한다.

[ ] 안에 콤마( , ) 로 데이터를 구분해서 여러건의 데이터를 나열한다.

또한 배열 변수의 데이터는 순서에 의해 이용되며 이 순서를 소프트웨어 개발에서는 흔히 인덱스(index) 라고 부르며

인덱스는 0부터 시작한다.

 

 

▼ 컬렉션 타입 – 배열 사이즈, 추가, 변경, 제거

• 배열의 데이터 개수를 판단할 때는 배열의 length 변수를 이용한다.

 length 변수는 우리가 선언하지 않아도 모든 배열에 자동으로 포함되는 변수이다.

• 배열에 담긴 기존의 데이터를 변경하고 싶다면 인덱스로 그 데이터의 위치를 지정하고

그곳에 변경하고자하는 데이터를 대입한다.

 

    <script>
        //데이터가 여러개 있을때 하나하나 변수로 선언
        let user1 ='섭이'
        let user2 ='쑹빵이'
        let user3 ='됴니'


        // 모든 데이터를 여러개라고해서 배열에 담아서 이용하는건 좋지않다.
        // 데이터가 상이한 성격이라면 정확한 변수명으로 그 데이터가 식별되어
        // 이용되게 하는 것이 맞다.
        // 동일한 성격의 데이터 여러개가 유지되어야 하거나
        // 데이터 개수의 예측이 안되거나
        
        // 배열로 선언해서 데이터 이용한다. 배열은 데이터가 여러개 존재할 수 밖에 없으므로
        // 변수명을 복수형으로 설정하여 의미있게 지정한다.
        let users = ['섭이', '쑹빵이', '됴니']
        console.log(users.length); // 3
        console.log(users[0], users[1], users[2]);
        
        //한꺼번에 배열의 데이터를 로그로 볼수있게
        console.log(user);

        //배열 데이터 변경
        user[1]='됴니'
        console.log(user);
    </script>

 

▼ 컬렉션 타입 – 배열 사이즈, 추가, 변경, 제거

• 만약 기존 배열에 신규 데이터를 추가하고 싶다면 push() 라는 함수를 이용한다.

또한 배열에 담긴 데이터를 제거하고 싶다면 pop() 함수를 이용한다.

        //신규 데이터추가
        users.push('뭉뭉이')
        console.log(users);
        
        //배열에 있는 데이터 삭제
        users.pop()
        users.pop()
        users.pop()
        console.log(users);