✿∘˚˳°∘°
41일차 : JavaScript의 기본 본문
20230125
javascript
: 로컬의 브라우저에서 실행되는 인터프리터방식의 프로그래밍 언어
-> 하이퍼텍스트의 기능을 담당
: 웹브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어
: 자바스크립트는 ECMA Script표준을 따르는 대표적인 웹기술
<ul>
<li><a href="#">menu1</a></li>
</ul>
<div></div>
이 경우 li태그에 마우스를 올렸을 때(hover) a태그(동위선상 or 자식)에는 css를 줄수는 있음(li:hover>a{})그런데 동위선상도 자식도 아닌 div에게는 줄 수 없음.
-> 자바스크립트를 이용하여 가능하게 한다.
[자바]
public int test1(int a){
return a+1;
}
public void test2(){
String str = test1(); //이경우 에러발생 - 매개변수X / 반환int형으로
}
[자바스크립트] - 정의가 뚜렷하지 않다(에러발생 시 확인이 어렵다)
function test1(int a){
return a+1;
}
function test1(var a){ //var:데이터가 들어갈 때 자료형이 결정된다
var a = 1;//정수형
var b = 1.1;//실수형
var c = 가; //문자형
return a+1;
}
function void test2(){
test1(); //매개변수가 없어도, 여러개가와도 에러가 발생하지않고 사용가능
}
컴파일과 인터프리터의 차이
컴파일 : 컴파일하는 도중에 에러가 발생하면 실행이 되지 않는다(미리 에러체크)
인터프리터 : 에러가 발생하는 구간까지 간 후 실행이 되지않는다
1. 기본문법
1 - 1 ) 기본사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js기본문법</title>
<!-- 외부 스크립트 연결 -->
<script src="js/00_test.js"></script>
<script type="text/javascript">
function test1(){
alert("짠!!!!!!!!!");
}
</scrip>
</head>
<body>
<!-- head사이 body사이 아무데나 작성해도 되지만 순서를 주의해 줘야 한다 -->
<!-- 페이지에 작성하면 html코드가 길어지기 때문테 script의 경우 외부파일로 작성하는게 가장 많음!-->
<script>
</script>
<h1 onclick="alert('짠!');">자바스크립트 기본문법 테스트</h1>
<!-- 문제점 : 코드가 길어지면 어떻게 사용할 것인지 - 상단에 <script></script> 사용-->
<h1 onclick="test1();">자바스크립트 기본문법 테스트!!!</h1>
<h1 onclick="test2();">외부파일스크립트 테스트!!!</h1>
</body>
</html>function test2(){
alert("외부파일 테스트~!");
}
1 - 2 ) console.log
// 한줄주석
/* 여려줄 주석 */
//console.log(내용) : 개발자도구 화면의 콘솔에 내용을 출력
//순수하게 개발자가 현재상태를 보기위해 사용
//문자문자열구분X "" '' 아무거나 사용가능
console.log("hello javascript");
//콘솔로그에는 문자뿐만이 아닌 숫자가 들어가도 상관X
console.log(100);
//산술식도 사용가능
console.log(100+200);
//문자열+숫자 : java와 같이 문자열로 변환되어 출력
console.log("test"+100);
//콤마(,)를 사용하면 한칸씩 띄워져서 출력 여러개의 변수를 출력할 때 사용한다
console.log("hello", 100, "hi", 200);
//출력 시 문자열과 숫자의 색상이 다르다
1 - 2 ) alert(내용)
//alert(내용) : 내용을 메세지창(팝업창)에 출력
//console과 alert는 비슷하지만 같지않다
//console - 사용자 눈에 보이지 않음 개발자만 확인가능
//alert - 사용자눈에 보이는 팝업창
alert("hello javascript");
//위 창이 뜨고 확인을 누르면 아래동작
alert(100);
alert(100+200);
/*문자, 숫자, 산술식 다 잘 나오지만 콤마를 사용하여 여러개의 매개변수를 입력할 경우
첫번재 매개변수만 aleart으로 화면에 출력되고 나머지 매개변수는 버려진다.*/
alert("hello", 100, "hi", 200);
//하나만 사용하지만 에러가 발생하지않고 그냥 나머지를 버려버림
1 - 3 ) confirm(질문)
//confirm(질문) : 메세지창을 이용해서 사용자에게 질문을 하고 그 결과를 true/false로 받아옴
confirm("자바스크립트는 재미있나요?");
//확인을 누르면 true를 리턴, 취소를 누르면 false를 리턴
//true를 받았는지 false를 받았는지 모름 -> console.log사용
console.log(confirm("자바스크립트는 재미있나요?"));
//T/F가 리턴이 된다 > 문법에 사용가능
if(confirm("자바스크립트는 재미있나요?")){
console.log("GOOD!");
}else{
console.log("ㅜ.ㅜ");
}
1 - 4 ) prompt(질문)
//prompt(질문) : 메세지창을 이용해서 사용자에게 질문을 하고, 사용자에게 값을 입력받아서 그 결과를 문자열로 가져옴
console.log(prompt("내이름이 뭐지?"));
//숫자를 입력해도 문자열로 가져온다
2. 변수
2 - 1 ) var
var name1;
//값을 대입하지 않으면 undefined(정의되지않음)
console.log(name1);
name1 = "야호";
console.log(name1); //문자열로 들어감(검은색)
var age1 = 20;
console.log(age1); // 숫자로 들어감(파란색)
//변수 선언 후 값을 집어넣어야 자료형이 결정
{//{}는 코드블럭(코드덩어리)를 의미
var test1 = "test1";
console.log(test1);
}
console.log(test1);
/*
var로 선언된 경우 중괄호 안에서 생성된 test1이라는 변수가
중괄호밖에서도 사용이 가능함
--> 변수명이 동일하면 사용이 불가능 하다.
--> 이경우를 방지하기 위해 es6문법인 let과 const를 사용
*/2 - 2 ) let
//es6 변수 선언 방식
//2. let
let name2="호야";
let age2=25;
console.log(name2, age2);
{
let test2 = "test2";
console.log(test2); //test2출력
}
//console.log(test2); //error : test2 is not defined2 - 3 ) const
const name3 = "호호";
const age3 = 30;
console.log(name3, age3);
{
const test3="test3";
console.log(test3);
}
// console.log(test3); let과 만찬가지로 중괄호 밖에선 에러발생+ ) let과 const의 차이점
let name2="호야";
let age2=25;
console.log(name2, age2);
{
let test2 = "test2";
console.log(test2); //test2출력
}
name2 = "호야22";
console.log(name2);
//3. const
const name3 = "호호";
const age3 = 30;
console.log(name3, age3);
{
const test3="test3";
console.log(test3);
}
// let과 const의 차이점
// let변수는값을 바꿀 수 있지만 const변수는 값을 변경할 수 없다.
//name3 = "호호22";
//const는 상수형으로 한번 지정된 값을 바꿀 수 없음
//주의점
/*
let arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 5];
arr1[1] = 200;
arr2[1] = 200;
둘다 가능하다
이유 : 자바스크립트는 객체지향언어이기 때문에
arr[1], arr[2]는 주소가 들어가있으로 값이 변경되는건 가능!
*/
3. 데이터타입
3 - 1 ) 문자타입
const str = "JavaScript";
console.log(str);
console.log(typeof(str));//해당변수의 자료형을 알려주는 기능
console.log(typeof str);
//string타입에 사용되는 함수
console.log(str.length); //문자열 길이를 리턴
console.log(str.toLowerCase()); //해당 문자열을 모두 소문자로 변환하여 리턴
//핵심 - 변환해서 리턴을 하고, 원본데이터에는 영향X(원본데이터 변화없음)
console.log(str);
console.log(str.toUpperCase());//해당 문자열을 모두 대문자로 변환하여 리턴
console.log(str); //원본데이터 변화X
console.log(str.indexOf("a"));//앞에서부터 매개변수로 준 문자열의 위치를 찾아서 리턴
console.log(str.lastIndexOf("a")); //뒤에서부터 매개변수로 준 문자열의 위치를 찾아서 리턴
//찾는건 뒤에서부터 찾지만 절대위치는 앞에서부터이므로 3이나오는것
console.log(str.indexOf("z")); //없는데이터의 경우 -1이 리턴
console.log(str.charAt(4));//해당index에 존재하는 문자열 1개를 찾아서 리턴(n번째 글자 추출)
console.log(str.substring(3, 7)); //3번인덱스부터 7번 앞까지 문자열을 리턴
//for(int i=3; i<7; i++) 와 동일 aScr(7은포함X)
console.log(str.substring(3));//매개변수를 1개만 주게되면 끝까지 - 3번index부터 끝까지
const study = "java,oracle,jdbc,html,css,javascript";
const arr = study.split(","); //매개변수로 전달한 값(현재",")을 기준으로 문자열을 잘라서 배열형태로 리턴
console.log(study);
console.log(arr);
console.log(typeof(arr)); // object - 배열도 객체3 - 2 ) 숫자타입
//숫자타입
const num = 3.5;
console.log(num);
console.log(typeof(num)); //정수실수 상관없이 number타입
console.log(Math.abs(num)); //절대값
console.log(Math.abs(-10));
console.log(Math.random()); //0~1사이의 랜덤 실수 하나 추출
console.log(Math.round(num)); //반올림
console.log(Math.round(3.4));
console.log(Math.floor(3.9), Math.ceil(3.1));//버림, 올림3 - 3 ) 형변환
- 자동형변환
const userName = "유저일";
const userAge = 20;
const userGrade = "1";
console.log(typeof userName, typeof userAge, typeof userGrade);
//string number string : 들어간 데이터에 따라 자료형이 정해진다.
console.log(userName+userAge);//"유저일"+20 -> "유저일"+"20" = "유저일20"
console.log(userName+userGrade); //"유저일1"
console.log(userAge+userGrade); //20+"1" -> "20"+"1" = "201"
//더하기(+)를 제외한 산술연산은 모두 숫자연산
console.log(userAge-userName);//NaN : Not a Number(이거숫자아니야)
//제이름은 유저일이고, 나이는 20살 1학년입니다.
console.log("제 이름은 "+userName+"이고, 나이는 "+userAge+"살 "+userGrade+"학년입니다.");
//es6문법 - ``:백틱
console.log(`제 이름은 ${userName}이고, 나이는 ${userAge}살 ${userGrade}학년입니다.`);- 수동형변환
const test11 = "100";
console.log(test11, typeof test11);//100 string
const test22 = Number(test11);
console.log(test22, typeof test22);//100 number
const test33 = String(test22);
console.log(test33, typeof test33);//100 string
3 - 4 ) 연산자, 제어문, 조건문
//연산자 : 자바에서 사용했던 연산자(++, --, +=, -+)다 가능
const oper1 = "1";
const oper2 = 1;
console.log(oper1, typeof oper1);
console.log(oper2, typeof oper2);
console.log(oper1 == oper2); // true
// ==을 사용하게되면 자료형과 상관없이 값이 일치하면 true( 부정: != )
console.log(oper1 === oper2); // false
// ===을 사용하게되면 자료형과 값이 모두 일치해야 true( 부정: !== )
//제어문
const testNum = 10;
if(testNum%2 == 0){
console.log("짝수!");
}else{
console.log("홀수!");
}
//짧은 조건문
// &&(AND)연산과 ||(OR)연산의 동작방식을 이용하는 조건문
testNum%2 == 0 || console.log("홀수입니다");
testNum%2 == 0 && console.log("짝수입니다");
//OR의 경우 앞이 TRUE경우 뒤에 실행x
//AND의 경우 앞이 TRUE이어도 뒤에 실행
for(let i=0; i<5; i++){
console.log(`${i+1}번째 메세지 출력`);
}
//자바기준에서는 문제점이 없지만 자바스크립트에서는 int라는 자료형이 없기 때문에
// var, let을 사용해주면 된다.
// 단, const를 사용하면 i의 값을 변경할 수 업기 때문에 사용X
4. 배열
4 - 1 ) 배열 기본
//배열을 선언하는 방법 1
const arr1 = [1, 2, 3]; //길이가 3인 배열을 선언하고 값을 순서대로 대입
console.log(arr1);
console.log(arr1[1]);
arr1[2] = 100;
console.log(arr1);
//배열을 선언하는 방법 2
//const arr2 = []; //길이가 0인 배열을 선언
const arr2 = new Array();
console.log(arr2);
arr2[0] = 100;
console.log(arr2);
arr2[3] = 200;
console.log(arr2);
console.log(arr2[1]); //값을 주지않은 arr2[1]은 undefined 배열에 공간은 있는데 값을 넣지 않았을 뿐이다
const arr3 = new Array(1,2,3); //길이가 3인 배열을 선언하고 값을 순서대로 대입
console.log(arr3);
for(let i=0; i<arr3.length; i++){
console.log(arr3[i]);
}
//자바스크립트의 배열은 들어가는 값의 자료형이 무관
const arr4 = ["이름일", 100, true, [1, 2, 3]]; //어떤자료형이 들어가도 상관X
for(let i=0; i<arr4.length; i++){
console.log(arr4[i]);
console.log(typeof arr4[i]);
}
//배열의 기본 제공 함수
const arr = [1,2,3,4];
console.log(arr.indexOf(3));//매개변수로 전달한 값이 배열의 몇번째 인덱스에 있는지 리턴
console.log(arr.indexOf(5));//매개변수로 전달한 값이 배열에 없으면 -1 리턴
const fruits1 = ["딸기", "복숭아", "수박"]; //길이 3
const fruits2 = ["포도", "용과", "바나나"]; //길이 3
const testArr1 = [100, 25, 10, 50]; //길이 4
const testArr2 = [true, false, [1,3,4,9]]; //길이 3
const data1 = fruits1.concat(fruits2, testArr1, testArr2); //배열을 하나로 합쳐서 리턴 길이 13
console.log(data1);
console.log(fruits1); //하나의 배열로 합쳐졌다고 하더라도 원본데이터는 그대로 원본을 유지하고있다.
console.log(fruits2);
console.log(testArr1);
console.log(testArr2);
4 - 2 ) join
const data2 = fruits1.join(","); //배열내부의 데이터를 매개변수 기준으로 구분하여 하나의 문자열로 리턴
console.log(data2, typeof data2); //자료형이 object가 아닌 string이다
const data3 = fruits1.join(" ");
console.log(data3);
console.log(fruits1.join()); //join매개변수 생략 시 기본값 콤마(,)
console.log(fruits1.join("")); //모두 붙어서 나옴 딸기복숭아수박
/*
join의 사용처 예
<div>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</div>
const data4 = "<div><ul><li><a href='#'>메뉴1</a></li><li><a href='#'>메뉴2</a></li></ul></div>";
const data5 = [
"<div>",
" <ul>",
" <li><a href='#'>메뉴1</a></li>",
" <li><a href='#'>메뉴2</a></li>",
" </ul>",
"</div>"
].join("");
//join을 사용하면 data4와 data5의 구조가 동일
*/
4 - 3 ) sort / reverse
- 정렬은 DB에서 ORDER BY로 하는게 좋음
console.log(testArr1);
//sort() : 매개변수를 넣지않으면 유니코드 기준으로 정렬
testArr1.sort(); //자동정렬 -> 정렬된 데이터를 리턴X -> 원본배열을 정렬(원본데이터에 변화가 생긴다는 의미)
console.log(testArr1);
// 기본적으로 숫자타입으로 정렬한다가 없음 -> 문자형식으로 정렬
// 숫자로 정렬하는 방법(단, 정렬은 그냥 데이터베이스에서 하고 가져오는게 쉽다)
function sortASC(a, b){
return a-b;
}
function sortDESC(a, b){
return b-a;
}
const testArr3 = [1,3,2,7,10,9,8,6,4,5];
testArr3.sort(sortDESC);
console.log(testArr3);
testArr3.reverse(); //배열순서반전 -> 원본배열의 순서가 반전
console.log(testArr3);
4 - 4 ) push, pop
const testArr4 = [1, 2, "hello", true];
console.log(testArr4);
//push : 배열 가장 뒤에 값을 추가
testArr4.push(100);
console.log(testArr4);
testArr4.push('bye');
console.log(testArr4);
//pop : 배열 가장 뒤의 값을 제거
testArr4.pop();
console.log(testArr4);
4 - 5 ) unshift / shift
//unshift : 배열의 가장 앞에 값을 추가
testArr4.unshift("안녕");
console.log(testArr4);
//shift : 배열의 가장 앞의 값을 제거
testArr4.shift();
console.log(testArr4);
4 - 6 ) slice / splice
//slice, splice
//slice : 배열의 지정된 인덱스 번호를 복사해서 리턴 --> '원본배열변화X'
const testArr5 = testArr4.slice(1, 3); //testArr4배열의 1번인덱스부터 3번인덱스 전까지 복사해서 배열로 리턴
console.log(testArr4);
console.log(testArr5);
const testArr6 = testArr4.slice(3); //testArr4배열의 3번인덱스부터 끝까지 복사하여 배열로 리턴
console.log(testArr6);
//배열을 전체 복사 하고싶은 경우
//방법1
const testArr7 = testArr4.slice(0);
console.log(testArr7);
//방법2
const testArr8 = [...testArr4]; //전개연산자(es6문법) -> 깊은복사
console.log(testArr8);
//splice : splice를 통해서 잘라낸 데이터는 원본배열에서 사라짐
const testArr9 = testArr4.splice(2, 2); //testArr4배열의 2번인덱스부터 2개를 잘라내어 리턴 -> 원본데이터변화O
console.log(testArr4);
console.log(testArr9);
//splice 매개변수 3개인 경우
const testArr10 = testArr4.splice(1,1,'test'); //testArr4배열의 1번인덱스부터 1개를 잘라내어 리턴
//3번째 매개변수가 존재하면 잘려나간 자리에 매개변수가 삽입
console.log(testArr10);
console.log(testArr4);
testArr4.splice(1, 0, 'bye');//1번인덱스부터 0개삭제하고 그자리에 'bye'삽입
console.log(testArr4);즉, 원본데이터를 변화하지않고 사용할떼는 slice를 원본데이터에 변화를 주고 사용할때는 splice를 사용
+ 배열 심화
const arr1 = ["hi", "hello", 100, true, [1,2,3,4]];
for(let i=0; i<arr1.length; i++){
console.log(i, arr1[i]);
}
//위 배열을 확인하려면 for문을 사용해야함
1 ) forEach
// 1. forEach
// item : 반복하면서 접근하는 배열의 각 요소 -> arr1[i]
// index : 인덱스번호(반복번호) -> 위기준으로 i
// 매개변수 순서만 일치하면 이름은 상관없음 - item말고 content라고 index말고 i라고 이름을 바꿔도 상관없다는 뜻
arr1.forEach(function(item, index){
console.log(index, item);
});
// 만약에 인덱스번호가 필요없는 경우 생략 가능
arr1.forEach(function(item){
console.log(item);
});
2 ) map
// 2. map : forEach와 마찬가지로 배열을 순회하는 함수 + 리턴하는 값을 다시 배열로 생성
const arr2 = arr1.map(function(item, index){
const str = `${index}번째 아이템은 ${item}`;
console.log(str);
return str;
});
console.log(arr2);
3 ) filter
// 3. filter : 배열에서 특정 조건에 만족하는 데이터만 필터링할때 사용
const arr3 = [6,2,3,4,5,1];
const arr4 = arr3.filter(function(item, index){
return item>3; //3보다 큰 수만 return 하여 arr4에 배열로 저장
});
console.log(arr3);
console.log(arr4);
5. 함수(function)
5 - 1 ) 선언적함수
// 1. 선언적 함수
function func1(){
console.log("func1 함수 동작!");
//함수를 만들기만하고 실행을 하지 않았으므로 콘솔창에 뜨는게 없음
}
// 선언적 함수 실행
const test1 = func1();
//리턴을 하지않는 경우에는 그냥 func1(); 만 작성
console.log(test1); //undefined : func1은 리턴하는 데이터가 없으므로 아무것도 들어가지 않음
function func2(){
console.log("func2 함수 동작!");
return "리턴값";
}
const test2 = func2();
console.log(test2);
5 - 2 ) 익명함수
- 익명함수 1 : 함수를 변수에 저장
// 2.익명함수1(함수를 변수에 저장) - 함수자체에는 이름이 없음
const test3 = function(){
console.log("익명함수1 호출");
}
test3();
const test4 = function(){
console.log("익명함수2 호출");
return "익명함수 리턴값";
}
const test5 = test4();
console.log(test5);- 익명함수 2 : 스스로 실행되는 함수
// 3. 익명함수2(스스로 실행되는 함수) : 한번 실행되고 재사용하지 않는 경우
(function(){
console.log("스스로 동작하는 익명함수입니다.");
})();
//함수를 통째로 그룹핑을 해준다음에 ();로 사용 - 딱한번 동작하고 끝선언적함수와 익명함수의 차이점
: 선언적 함수는 js코드 실행(위에서아래로) 시 가장 먼저 생성
func2가 생성된 11라인보다 더 위에서 실행해도 사용이 가능하다.(함수 사용위치가 생성보다 먼저여도 상관X)
: 익명함수는 순서를 지켜야함 - 함수가 선언되어야 사용가능
5 - 3 ) 함수의 매개변수
//함수의 매개변수
function func3(num1, num2){
console.log(num1, typeof num1);
console.log(num2, typeof num2);
}
//매개변수로 전달하는 자료형은 무관(순서에 맞춰서 처리)
func3(100, "안녕");
func3(true, [1,2,3]);
//선언한 매개변수보다 부족하게 전다하는 경우, 전달되지 않은 매개변수는 undefined 처리
func3(200);
//선언한 매개변수보다 많이 전달하는 경우, 선언된 매개변수만 사용하고 나머지는 사용하지 않음
func3(100, 200, 300, 400);
function func4(){
console.log("func4 호출");
console.log(arguments);
for(let i=0; i<arguments.length; i++){
console.log(arguments[i]);
}
}
func4();
func4(100, 200, true, "hi", [1,2,3,4]);
function func5(str){
const test= str.charAt(0);
return test;
}
/*
const test6 = func5(100); // 숫자이므로 에러발생 문자열에만 charAt()가 잇기때문
console.log(test6);
//이런식으로 에러가 발생할수 있어서 생각보다 불편하다*/
5 - 4 ) 내장되어 있는 함수
- encodeURI / decodeURI
const url = "http://www.naver.com?query=코로나";
const str1 = encodeURI(url);//최소한의 문자만 인코딩하는 함수
console.log(str1);//http://www.naver.com?query=%EC%BD%94%EB%A1%9C%EB%82%98
//코로나라는 키워드가 인코딩된것(웹상에서 유니코드를 직접주고받으면 오작동을 일으킬확률이 높아짐)
const str2 = decodeURI(str1); //encodeURI를 통해서 인코딩된 데이터를 디코딩하는 함수
console.log(str2);//http://www.naver.com?query=코로나
const str3 = encodeURIComponent(url); //인코딩정도가 더 심하다 알파벳, 숫자, . 을 제외하고 전부 인코딩
console.log(str3); //http%3A%2F%2Fwww.naver.com%3Fquery%3D%EC%BD%94%EB%A1%9C%EB%82%98
//주의점 : 인코딩한거에 맞춰서 디코딩해줘야한다.
const str4 = decodeURIComponent(str3);//encodeURIComponent로 인코딩된 데이터를 디코딩하는 함수
console.log(str4);- isFinete() / isNaN()
//NaN : Not a Number
//isFinite() : 숫자인지 확인해주는 함수 - type이 number인걸 확인하는게아님 값이 숫자인지 확인해주는 것
//isNaN() : 숫자가 아닌지 확인해주는 함수
const num1 = 100;
const num2 = "100";
console.log(isFinite(num1)); //true
console.log(isFinite(num2)); //ture
console.log(isNaN(num1)); //false
console.log(isNaN(num2)); //false
if(isFinite(num1) && isFinite(num2)){
const result = Number(num1)+Number(num2);
console.log(result);
}else{
console.log("숫자끼리만 연산이 가능합니다");
}- eval()
//eval(문자열) : 문자열을 자바스크립트코드로 실행
const num3 = 100;
const num4 = 200;
const result0 = "num3+num4";
console.log(result0); //num3+num4라는 문자열이 나온다
const result1 = eval("num3+num4");
console.log(result1);//300
6. 객체(Object)
// Java -> HashMap과 비슷
// key1:value1, key2:value2, key3:value3
const obj1 = {
a:100,
b:"hi",
c:true,
d:[1,2,3,4]
};
//객체 내부 값 확인
console.log(obj1);
console.log(obj1.a); //객체이름.키값 - 추천방식
console.log(obj1["b"]); //객체이름["키값"]
console.log(obj1.c);
console.log(obj1.d);
//객체 내부 값 변경
obj1.a = "안녕"; //원래 a가 숫자라고 반드시 숫자데이터가 들어가야하는건 아님
obj1["b"] = 1000;
console.log(obj1);
const obj2 = {
a : 100,
b : 200,
c : function(){ //함수도 사용이 가능하다(자바에서 메소드의 역할을 함 )
console.log("객체 내부의 함수입니다.");
return "객체 내부 함수 리턴값";
}
}
console.log(obj2);
console.log(obj2.b);
console.log(obj2.c());
// 데이터관리를 key를 통해 한다 - key값 관리를 해줘야함
// -> in 연산자 : 해당객체에서 key값이 사용중인지 체크
console.log("a" in obj2); //obj2에 a가 key값으로 사용중이니? 사용중이므로 true가 나온다.
console.log("b" in obj2);
console.log("c" in obj2);
console.log("d" in obj2); //없는걸 물어보면 false
//obj2를 매번 사용해야할 때 객체이름을 계속 붙여줘야함 - 힘들다
//-> with : 객체를 계속 많이 사용하는 경우 객체이름을 생략할 수 있는 범위를 지정
with(obj2){
//이 중괄호범위 내에서는 obj2를 생략하고 사용가능하다
console.log(a); //obj2.a와 동일
console.log(b);
console.log(c());
}
obj2.a = 300;//이미존재하는 key를 사용하는 경우 기존데이터 수정
obj2.d = "bye"; //이미 생성된 객체에 새로운 속성을 추가(조건:존재하지않는 key를 사용해야함)
console.log(obj2);
//객체에서 속성을 삭제하는 방법
delete obj2.d;
console.log(obj2);
[ 후기 ]
CSS처음 배웟을 때랑 비슷한 느낌이난다..처음에 엄청쉽다가 갈수록 복잡해지고 양이 너무많다..!
또 CSS실습 때처럼 할때마다 잊어버리지않게 복습을 확실하게 해야겠다
'국비수업 > JavaScript' 카테고리의 다른 글
| 46일차 : [실습] 단계형 회원가입 만들기 (0) | 2023.02.02 |
|---|---|
| 45일차 : [실습] 상품상세페이지만들기 (0) | 2023.02.02 |
| 44일차 : EVENT (0) | 2023.01.30 |
| 43일차 : [실습]DOM / BOM (0) | 2023.01.30 |
| 42일차 : DOM (0) | 2023.01.26 |
'국비수업/JavaScript' Related Articles
more
Comments