JS_변수, 데이터 타입

💡깨달음💡/Javascript

JS_변수, 데이터 타입

과부하가즈아 2023. 8. 14. 15:18

🔴document.write( );

🔴document.writeln( );

🔴문자열 프로퍼티와 메서드

🔻.length

🔻.charAt( 수 ) 해당 번째 글자 추출

🔻.split(" ") 해당 데이터를 기준으로 나눈 배열을 생성해 출력

🔴배열의 프로퍼티와 메서드
🔻.length
🔻.push("딸기") 배열 뒤에 해당 데이터 삽입
🔻.unshift("레몬") 배열 앞에 해당 데이터 삽입
🔻.pop()) 배열 뒤의 데이터 제거
🔻.shift() 배열 앞의 데이터 제거
🔴Math의 수학 메서드
🔻Math.abs(수) 절대값
🔻Math.ceil(수) 반올림 아니고 그냥 올림
🔻Math.floor(수) 반내림 아니고 그냥 내림, 걍 버림
🔻Math.random( ) 임의 수 출력
🔴문자를 숫자로 변환하는 메서드
🔻parseInt( )
🔻parseFloat( )

변수

변수 선언: 데이터를 담을 공간을 생성

var fruit;

변수 초기화: 생성된 변수에 데이터를 전달하는 것

fruit(변수명) = "apple"(데이터)

변수 선언 및 초기화

var fruit = "apple"

변수 값 변경( 값이 변경되면서, 이전 데이터는 변수에서 제거됨 )

let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

console.log(message); // World!

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사

let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;

console.log(Hello); // Hello world!
console.log(message); // Hello world!

이때 주의! 변수는 한 번만 선언해야 한다. 두 번 선언하면 에러 발생!

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

// 1. admin과 name이라는 변수를 선언하세요.
let admin;
let name;

// 2. name에 값으로 "John"을 할당해 보세요.
name = "John";

// 3. name의 값을 admin에 복사해 보세요.
admin = name;

console.log(name);  // John
console.log(admin);  // John

변수명은 숫자로 시작할 수 없음
변수명은 최대한 자세하게 작성
변수명에 의미가 불명확한 단어들의 조합은 피해야 함

document.write( ); 은 변수의 데이터를 웹 화면에 출력할 때 사용하는 명령어
var fruit = "apple";
var box = "banana"

document.write(fruit); // apple
document.write(box); // banana

box = 'tomato';
document.write(box); // tomato

// applebananatomato -> 공백❌
document.writeln( );을 사용하면 출력값 사이에 공백을 넣을 수 있다.
var fruit = "apple";
var box = "banana"

document.writeln(fruit); // apple
document.writeln(box); // banana

box = 'tomato';
document.writeln(box); // tomato

// apple banana tomato -> 공백⭕

<script src="app.js"> </script>

데이터 타입

string(문자열)

"", ''안에 작성된 데이터 'He'\s a boy' -> 역 슬래쉬로 해결가능 그냥 "He's a boy"

// ❌
// var str1 = 'He's a boy'; ❌❌
// console.log(str1); ❌❌

// ⭕
var str2 = 'He\'s a boy';
console.log(str2); // He's a boy

Function_함수
변수에 함수를 선언해주거나 함수 자체에 이름을 붙여주거나 둘 다 함수의 이름은 func1

// 변수로 지정
var func1 = function(){ 

}

// 함수로 바로 지정
function func1(){

}

함수 호출시, 함수 안에 있는 코드를 실행시키겠다는 의미로 ( )까지 붙여주어야 실행이 된다.

function func1(매개변수){
    return A + B;
}
func1(인자);

function func1(A, B){
    return A + B;
}
console.log(func1(2, 3));
// 5

매개변수: 인자로부터 전달받은 값이 들어가는 통로로 상황에 따라 생략도 가능하다.
인자: 함수에게 전달하는 데이터
return: 함수 안에 데이터를 저장할 때 사용

Array_배열
데이터의 좌표값(index)작성으로 원하는 데이터 추출 가능

Object_객체
프로퍼티: 이름/값
메서드: 함수
> sum_함수로 사용할 이름: function (){}

var student = {
    name: "inkwon",
    age: 15,
    skills: ["JS", "CSS", "HTML"],
    func: function(num1, num2){
        return num1 + num2;
    }
}

// 객체명.프로퍼티명로 데이터 추출
console.log(student.name); // inkwon
// 객체명["프로퍼티명"]로 데이터 추출
console.log(student["name"]); // inkwon

console.log(student.skills);
console.log(student["skills"]);
// ['JS', 'CSS', 'HTML']

console.log(student.func); 
console.log(student["func"]);
/* 
ƒ (num1, num2){
    return num1 + num2;
}
*/

var student = {
  name: 'Elice',
  age: 20,
  skills: ['Java', 'HTML', 'CSS', 'JavaScript'],
};

// ✔️프로퍼티 추가 = 으로 추가 즉, 변수의 초기화랑 같은 것
student.sum = function(num1,num2){ 
                return num1 + num2;
                };
console.log(student);
/*
{
  name: 'Elice',
  age: 20,
  skills: [ 'Java', 'HTML', 'CSS', 'JavaScript' ],
  sum: [Function (anonymous)]
}
*/
console.log(student.sum(10, 20)); // 30

// ✔️프로퍼티 값 바꾸기 = 으로 변경 즉, 변수의 초기화랑 같은 것
student.name = "park";
console.log(student);

console.log(student.name); // park
console.log(student["name"]); // park

undefined_정의되지 않음
데이터가 없는 것, 변수 안에 데이터를 입력하지 않은 상태(어이쿠 실수!)

null
빈 데이터 값을 지정한 것, 임의로 변수 안에 빈 데이터를 삽입한 상태(일부러 그런거얌!)

프로퍼티와 메서드

문자열 프로퍼티와 메서드

.length

.charAt( 수 ) 해당 번째 글자 추출

.split(" ") 해당 데이터를 기준으로 나눈 배열을 생성해 출력

var str1 = "Hello World";

str1.length; // 11(문자열 길이)
str1.charAt(0); // H추출
str1.charAt(5); // 공백추출(띄어쓰기도 포함된다는 의미)
str1.split(" ") // [Hello, World]출력 공백을 기준으로 문자를 나눈 후 배열로 출력

배열의 프로퍼티와 메서드

.length

.push("딸기") 배열 뒤에 해당 데이터 삽입
.unshift("레몬") 배열 앞에 해당 데이터 삽입
.pop()) 배열 뒤의 데이터 제거
.shift() 배열 앞의 데이터 제거

var fruit = ["사과", "배", "포도"];

console.log(fruit.length); // 3_데이터의 갯수

console.log(fruit.push("딸기")); // 4_배열 뒤에 해당 데이터 삽입, 그래서 데이터 갯수가 4가 됨
console.log(fruit) // [ '사과', '배', '포도', '딸기' ]

console.log(fruit.unshift("레몬")); // 5_배열 앞에 해당 데이터 삽입
console.log(fruit) // [ '레몬', '사과', '배', '포도', '딸기' ]

console.log(fruit.pop()); // 딸기_배열 뒤의 데이터 제거
console.log(fruit) // [ '레몬', '사과', '배', '포도' ]

console.log(fruit.shift()); // 레몬_배열 앞의 데이터 제거
console.log(fruit) // [ '사과', '배', '포도' ]

Math의 수학 메서드

Math.abs(수) 절대값
Math.ceil(수) 반올림 아니고 그냥 올림
Math.floor(수) 반내림 아니고 그냥 내림, 걍 버림
Math.random( ) 0~1 사이의 임의 난수 출력

console.log(Math.abs(-3)); // 3_절대값 출력
console.log(Math.ceil(0.3)); // 1_반올림 아니고 그냥 올림
console.log(Math.floor(10.9)); // 10_반내림 아니고 그냥 내림, 걍 버림
console.log(Math.random()); // 임의 숫자 출력

문자를 숫자로 변환하는 메서드

parseInt( )
parseFloat( )

console.log(parseInt("20.6")); // 정수 형태의 20 변환_소숫점 내림, 즉 버림
console.log(parseFloat("20.6")); // 실수 형태의 20.6 변환

이중배열 데이터 출력

var arrTest = [
    [100, 200, 300],
    [1000, 2000, 3000],
    [1111, 2222, 3333]
];
document.write(arrTest[1][2]);  // 3000 출력