자바스크립트

박재정·2025년 2월 18일

학습정보

목록 보기

22/29

1. 자바스크립트에서의 데이터 타입 6가지는?

1. Number 숫자형

2. String 문자열

3. Boolean 논리형

4. null

null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. JavaScript는 대소문자를 구별하므로 null은 Null,NULL 등과 다르다.

null 사용 시, 주의할 점
타입을 나타내는 문자열을 반환하는 typeOf연산자로 null 값을 연산해보면 null이 아닌 object가 나온다. 이는 자바스크립트 설계상의 오류이다.

따라서 null타입을 확인할 때는 typeOf 연산자 대신 일치 연산자(===)를 사용하여야 한다.

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null); // true

5. undefined

선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다. 어떤 변수를 만들고 그 값을 정의해주지 않았을때나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.

null vs undefined 용도의 차이
undefined는 단어의 의미 그대로 정의되지 않음이라는 뜻이며 값이 대입되지 않은 상태를 위해 많이 사용되며 아래의 예시처럼 어떤 변수를 만들고 그 값을 정의해주지 않았을 때 사용되곤 한다.

// 변수를 생성하고, 아무 값도 지정(정의)해주지 않음
var k;
console.log(k); // undefined

// 위의 코드처럼 아무 값도 대입해주지 않으면 기본으로 undefined라는 값이 대입되기 때문에,
// 아래 코드처럼 undefined를 명시적으로 대입해주는 코드는 잘 사용하지 않는다.
var o = undefined;
console.log(o); // undefined
null이라는 값은 undefined와 다르게 아래의 예처럼 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다.

var obj = {
name: 'ken'
};

// 위 obj를 이용한 작업을 실행함

// obj를 이용한 작업이 모두 종료되고,
// 더 이상 사용하지 않을 계획이라 obj를 의도적으로 없다고 표현함
obj = null;

6. Symbol

심볼은 ES6에서 새롭게 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용한다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); // symbol

객체 타입(Object type, Reference type)

객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다. 달리 말해, Property와 Method를 포함할 수 있는 독립적 주체이다.

JavaScript는 객체 기반의 스크립트 언어로써 JavaScript를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다. 또한 객체는 참조에 의한 전달 (pass-by-reference)방식으로 전달된다.

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

var foo = number;
console.log(typeof foo) ; //number
데이터 타입은 type of 로 확인 가능

2. var, cosnt 상수와 let 변수의 차이는?

변수는 연산에 사용되는 숫자 또는 문자열 등의 값을 담는 컨테이너라고 정의되어 있습니다. 이를 간단하게 설명하자면, 어떤 값이 있을 때 변수를 주소처럼 활용한다고 생각하면 이해하기 편합니다. 자바스크립트에는 3가지 선언 방법이 있는데,
var x = 6
let 6 = 6
const = 6
이때 같은 선언이지만, 선언 방식에 따라 다른 용도로 이용될 수 있다.

var

var a = 5; 
console.log(a); // 5

var a = 10;
console.log(a); // 10

a = 15;
console.log(a); // 15

var에서는 중복 선언과 재할당이 모두 가능하다. 마지막에 할당된 값이
최종으로 변수의 값으로 저장된다.

let

let a = 5;
let a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

let에서는 중복 선언을 허용하지 않는다.
중복 선언을 할 경우 SyntaxError가 발생하게 된다.

let a = 5;
console.log(a); // 5

a = 10;
console.log(a); // 10

재할당은 var 와 동일하게 가능

const

const a = 5;
const a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

const 에서도 let 과 동일하게 중복 선언을 허용하지 않는다.

const a = 5;
console.log(a); // 5

a = 10;
console.log(a); // TypeError: Assignment to constant variable.

하지만 const 는 다른 변수들과 다르게 재할당도 불가능하다.
이유는 const 는 상수를 선언하는 키워드이기 때문이다.
처음 선언과 초기화를 하고 나면 다른 값을 재할당 할 수 없어진다.

3. 자바스크립트로 구구단을 작성하시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단</title>
</head>
<body>
    <script>
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= 9; j++) {
                document.write(`${i} x ${j} = ${i * j} <br>`);
            }
            document.write('<br>');
        }
    </script>
</body>
</html>

4. 국어 영어 수학을 입력 받아, 수우미양가를 출력하시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>성적 판별</title>
</head>
<body>
    <script>
        let kor = Number(prompt('국어 점수: '));
        let eng = Number(prompt('영어 점수: '));
        let math = Number(prompt('수학 점수: '));

        let sum = kor + eng + math;
        let avg = sum / 3;

        if (avg >= 90) {
            document.write('수');
        } else if (avg >= 80) {
            document.write('우');
        } else if (avg >= 70) {
            document.write('미');
        } else if (avg >= 60) {
            document.write('양');
        } else {
            document.write('가');
        }
    </script>
</body>
</html>

5. 배열을 생성하는 2가지 방법은?

// 방법 1: 리터럴 방식
let arr1 = [1, 2, 3, 4, 5];

// 방법 2: Array 객체 사용
let arr2 = new Array(1, 2, 3, 4, 5);

6. 배열에서 아래의 함수를 예를 들어 설명하시오.

- forEach()

forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.

map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.

array.forEach(function(currentValue, index, array) {
  // 각 요소에 대해 수행할 작업
});

배열의 각 요소를 순회하며 콜백 함수 실행

- pop()

let arr = [1, 2, 3];
arr.pop(); // 마지막 요소 제거
console.log(arr); // [1, 2]

배열의 마지막 요소를 제거하고 반환

- sort()

let arr = [3, 1, 4, 1, 5];
arr.sort((a, b) => a - b); // 오름차순 정렬
console.log(arr); // [1, 1, 3, 4, 5]

배열을 정렬 (기본적으로 문자열 정렬이므로 숫자는 비교 함수 필요)

- find()

let arr = [1, 2, 3, 4, 5];
let result = arr.find((item) => item > 3);
console.log(result); // 4

조건을 만족하는 첫 번째 요소 반환

- filter()

let arr = [1, 2, 3, 4, 5];
let evenNums = arr.filter((item) => item % 2 === 0);
console.log(evenNums); // [2, 4]

조건을 만족하는 모든 요소를 배열로 반환

- map()

let arr = [1, 2, 3];
let doubled = arr.map((item) => item * 2);
console.log(doubled); // [2, 4, 6]

각 요소를 변환하여 새로운 배열 생성

- for of

let fruits = ['사과', '참외', '포도'];
for (let fruit of fruits) {
    console.log(fruit);
}

배열을 순회하며 요소 출력

7. 입력양식 폼을 만들어 보시오.

입력 양식 폼 만들기
요안도라 만들기 전 게시글

3줄 요약:

do while 문과 swithc 문은 파이썬에서 제공하지 않는다.
자바스크립트의 데이터 타입은 6개이고, 변수선언에는 3가지가 있다
부트스트랩의 row 는 flex-row flex-wrap 이다.

박재정

파이썬, SQL 개발

이전 포스트

부트스트랩

다음 포스트

자바스크립트

학습정보

1. 자바스크립트에서의 데이터 타입 6가지는?

1. Number 숫자형

2. String 문자열

3. Boolean 논리형

4. null

5. undefined

6. Symbol

객체 타입(Object type, Reference type)

2. var, cosnt 상수와 let 변수의 차이는?

var

let

const

3. 자바스크립트로 구구단을 작성하시오.

4. 국어 영어 수학을 입력 받아, 수우미양가를 출력하시오.

5. 배열을 생성하는 2가지 방법은?

6. 배열에서 아래의 함수를 예를 들어 설명하시오.

- forEach()

- pop()

- sort()

- find()

- filter()

- map()

- for of

7. 입력양식 폼을 만들어 보시오.

부트스트랩

자바스크립트

0개의 댓글