Javascript 자바스크립트 데이터 개념정리

객체와 프로퍼티

객체 (object) : 여러 가지 값을 한번에 저장한다.

 

▶ name: 'hyogi'  →  속성 (Property)

property name → name (문자열 string)

property Value → 'hyogi'

 

▶Property Name 주의 사항

1. 첫 번째 글자는 반드시 문자, 밑줄( _ ), 달러 기호($) 중 하나로 시작

2. 띄어쓰기 금지

3. 하이픈(-) 금지

→ property name에 따옴표 ( ' ) 를 추가하면 숫자도 사용가능   ex) '1stHyogi'

 

▶Property Value

1. 모든 자료형 사용가능

2. 객제 안에 객체를 넣을 수 있다.

 

// 객체(Object)

let hyogi = {
    name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
    year: '25',
    'mybirth year': 1999,
    GoodJoob: 'false',
    SoSo: 'null',
    greatCourse: {     // 객체 안에 객체
    	title: 'hello World',
        language: 'Python'
    }
  }

 

객체에서 데이터 접근

// 점 표기법 (ObjectName.propertyName)
console.log(hyogi.name);   // hyogi
console.log(mybirth year);   // 불가능 x
console.log(hyogi.greatCourse.title);  // hello World



// 대괄호 표기법 (ObjectName['propertyName'])
console.log(hyogi['mybirth year']);     // 1999
console.log(hyogi['mybirth' + 'year']);      // 1999
console.log(hyogi.greatCourse['title']);  // hello World

let propertyName = 'hyogi';
console.log(hyogi[propertyName]);     // hyogi

// 존재하지 않는 property에 접근하면 undefined처리가 됨. (오류 x)

 

객체 다루기

객체의 프로퍼티 수정방법 (변수의 값을 재할당 방법과 유사)

// 객체(Object)

let hyogi = {
  name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
  year: '25',
  'mybirth year': 1999,
  GoodJoob: 'false',
  SoSo: 'null',
  greatCourse: {
    title: 'hello World',
      language: 'Python'
  }
}

// 객체의 프로퍼티 수정방법 (변수의 값을 재할당 방법과 유사)
console.log(hyogi.name);    // 수정전 : hyogi
hyogi.name = '효기';
console.log(hyogi.name);     // 수정후 : 효기


// 객체의 프로퍼티 추가방법
console.log(hyogi.study);     // 객체에 존재하지 않는 프로퍼티 undefined 출력
hyogi.study = 'javascript';
console.log(hyogi.study);     // javascript


// 객체의 프로퍼티 삭제방법
console.log(hyogi.greatCourse);   // { title: 'hello World', language: 'Python' }
delete hyogi.greatCourse;
console.log(hyogi.greatCourse);   // undefined


// in 연산자 (안전하게 프로퍼티 유무 확인하려면 in 연산자 사용)
console.log(hyogi.name !== undefined);    // 객체에 프로퍼티 존재 유무 확인 true
console.log('name' in hyogi);    // true

if('year' in hyogi){    // hyogi 객체 안에 'year 프로퍼티 존재 유무 확인
  console.log('ok');    // ok

} else {
  console.log('not ok');

}

 

객체와 메소드

메소드 : 객체의 고유한 동작으로써 함수의 의미를 부여할 수 있다.

// 메소드 (Method)
let hyogi = {
  sayA: function (name) {
    console.log(`A ${name}!`);
  },

  sayB: function () {
    console.log('B');
  },

  sayC: function () {
    console.log('C');
  }
};

hyogi.sayA('hyogi');   // A hyogi!
hyogi.sayB();      // B
hyogi['sayA']('hyogi');    // A hyogi!

 

for..in 반복문

객체의 프로퍼티를 가지고 반복적인 동작을 한다.

 

▶주의사항 

1. 숫자형 (양수) 프러퍼티 네임

    숫자형key값은  문자열(string)이며 대괄호 표기법으로만 접근이 가능하다.

2. 정수형 프로퍼티 네임

    정수형 네임을 오름차순으로 먼저 정렬하고 추가 순서대로 정렬하는 특징이 있다.

let hyogi = {
  name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
  year: '25',
  'mybirth year': 1999,
  GoodJoob: 'false',
  SoSo: 'null',
  greatCourse: {
  title: 'hello World',
  language: 'Python'
  }
}

for (let key in hyogi){
  console.log(key);

}

/* 
출력결과
name
year
mybirth year
GoodJoob
SoSo
greatCourse
*/

for (let key in hyogi){
  console.log(hyogi[key]);
}

/*
출력결과
name
hyogi
year
25
mybirth year
1999
GoodJoob
false
SoSo
null
greatCourse
{ title: 'hello World', language: 'Python' }
*/

 

Date 객체

▶ month는 0부터 시작

▶틀린 Date객체의 날짜를 수정하면 자동으로 날짜 수정

▶Date.new() 메소드는 이 메소드가 호출된 시점 타임스템프를 반환한다.

// Date
let my1Date = new Date();
console.log(my1Date);   // 2023-03-22T02:58:35.881Z (오늘시간 출력)



//1970년 1월 1일 00:00:00 UTC + 1000밀리초
let my2Date = new Date(1000);
console.log(my2Date);   // 1970-01-01T00:00:01.000Z



// 문자열로 시간을 할당
let my3Date = new Date('2023-03-22');
console.log(my3Date);   // 2023-03-22T00:00:00.000Z

// 시간 분 초까지 할당
my3Date = new Date('2023-03-22T09:11:12');
console.log(my3Date);   // 2023-03-22T00:11:12.000Z

// 소괄호 안에 여러 값을 할당 (month는 0부터 시작)
let my5Date = new Date(1999, 08, 06, 12, 11, 50, 12);  // yyyy, MM, DD, hh, mm, ss, ms
console.log(my5Date);   // 1999-09-06T03:11:50.012Z



// Date.getTime() → 몇밀리초가 지났는지 계산
let my6Date = new Date(1999, 08, 06, 12, 11, 50, 12);  // 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초가 지났는지
console.log(my6Date.getTime());   // 936587510012 (타임스탬프)



// 지금으로부터 몇 밀리초, 초, 분, 시간이 차이나는지 계산
let today = new Date();   // 오늘 시간 출력
let timeDiff = my6Date.getTime() - today.getTime();
console.log(timeDiff + '밀리초');   // -742867634694밀리초
console.log(timeDiff / 1000 + '초');       // -742867712.473초
console.log(timeDiff / 1000 / 60 + '분');     // -12381128.541216668분
console.log(timeDiff / 1000 / 60 / 60 + '시간');   // -206352.14235361113시간

let my7Date = new Date(2014, 6, 12, 13, 17, 15);
console.log(my7Date.getFullYear());  // 2014
console.log(my7Date.getMonth());   // 6  (0부터 시작)
console.log(my7Date.getDate());   // 12  (일)
console.log(my7Date.getDay());    // 6   (요일)
console.log(my7Date.getHours());  // 13
console.log(my7Date.getMinutes());   // 17
console.log(my7Date.getSeconds());    // 15
console.log(my7Date.getMilliseconds());   // 0



// set 으로 생성된 Date 객체 정보 수정

my7Date.setFullYear(1999);
my7Date.setMonth(2);
my7Date.setDate(30);
console.log(my7Date);    // 1999-03-30T04:17:15.000Z (변경 값)



// 브라우저에 설정된 국가 표기에 맞춰 날짜와 시간을 보여줌
let myDate = new Date();
console.log(myDate.toLocaleDateString()); // 2023. 3. 22. (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // 오후 12:30:19 (시:분:초)
console.log(myDate.toLocaleString()); // 2023. 3. 22. 오후 12:30:19 (년. 월. 일 시:분:초)



// Date객체의 형변환
console.log(typeof myDate); // object
console.log(Boolean(myDate)); // true
console.log(Number(myDate)); // 1679456110776  (타임스탬프 값)



// 두 객체 사이의 시간차이 확인도 가능
let myDate1 = new Date(1999, 8, 6);
let myDate2 = new Date(2023, 3, 22);

let timeDiff2 = myDate2 - myDate1;
console.log(timeDiff2); // 745545600000 (ms)
console.log(timeDiff2 / 1000); // 745545600 (sec)
console.log(timeDiff2 / 1000 / 60) // 12425760 (min)
console.log(timeDiff2 / 1000 / 60 / 60) // 207096 (hour)
console.log(timeDiff2 / 1000 / 60 / 60 / 24) // 8629 (date)



// 날짜를 표현하는 다양한 문자열
let date1 = new Date('8/6/1999 06:00:00');
let date2 = new Date('August 6, 1999 06:00:00');
let date3 = new Date('Aug 6 1999 06:00:00');
console.log(date1, date2, date3);  // 1999-08-05T21:00:00.000Z * 3

 

배열 (Array)

랭킹처럼 순서가 있는 값을 만들때는 객체보다 배열을 활용하는것이 좋다.

 

▶배열은 객체다.

▶배열은 바뀔 수 있는 자료형, 문자열은 바뀔 수 없는 자료형

// 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];

// 인댁스 == 프로퍼티 이름
console.log(foodRanking[0]);   // 인덱싱(Indexing) // 출력 : 짜장면
console.log(foodRanking[1 + 2]);   // 한우



console.log(foodRanking.length);   // 4 (배열의 요소 총개수) 
console.log(foodRanking['length']);    // 4 (배열의 요소 총개수)
console.log(foodRanking[foodRanking.length - 1]);    // 한우 (배열의 마지막 요소)
console.log(foodRanking[5]);   // undefined



foodRanking[5] = '순대국';   // 요소 값 수정
console.log(foodRanking[5]);    // 순대국 

foodRanking[7] = '카레';
console.log(foodRanking[6]);    // 6번이 empty로 비어있음

foodRanking[2] = '초밥';
console.log(foodRanking[2]);    // 돼지국밥에서 초밥으로 수정(덮어쓰기)



console.log(foodRanking);   // [ '짜장면', '짬뽕', '초밥', '한우', <1 empty item>, '순대국', <1 empty item>, '카레' ]
delete foodRanking[3];  // 배열 삭제
console.log(foodRanking);  // [ '짜장면', '짬뽕', '초밥', <2 empty items>, '순대국', <1 empty item>, '카레' ]

 

배열의 메소드

splice : 할당된 숫자 이후부터의 배열의 값을 완벽하게 삭제

// 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];


// splice (할당된 숫자 이후부터의 배열의 값을 완벽하게 삭제)
foodRanking.splice(2);
console.log(foodRanking);   // [ '짜장면', '짬뽕' ]


// splice(StartIndex, DeleteIndex)
foodRanking.splice(2, 1);   // 2번인덱스 부터 1개 완벽하게 삭제
console.log(foodRanking);   // [ '짜장면', '짬뽕', '한우' ]


// splice(StartIndex, DeleteIndex, Item) 삭제된 index값에 item 추가
foodRanking.splice(2, 1, 'hyogi');   // 2번인덱스 부터 1개 완벽하게 삭제
console.log(foodRanking);     // [ '짜장면', '짬뽕', 'hyogi', '한우' ]




// splice 활용 정리

// 배열의 첫 요소 삭제
foodRanking.splice(0, 1);

// 배열의 마지막 요소 삭제
foodRanking.splice(foodRanking.length - 1, 1);

// 배열의 첫 요소에 값 추가
foodRanking.splice(0, 0, 'hyogi');

// 배열의 마지막 요소에 값 추가
foodRanking.splice(foodRanking.length, 0, 'hyogi2');




// 배열의 첫 요소 삭제
foodRanking.shift();

// 배열의 마지막 요소 삭제
foodRanking.pop();

// 배열의 첫 요소에 값 추가
foodRanking.unshift();

// 배열의 마지막 요소에 값 추가
foodRanking.push();




// 배열의 특정 값 찾기 (포함되어 있다면 인덱스 위치가 리턴 없다면 -1)
console.log(foodRanking.indexOf('짜장면'));  //-1 
// 배열의 특정 값 찾기를 뒤에서부터 탐색함.
console.log(foodRanking.lastIndexOf('짜장면'));  //-1




// 배열에 특정 값이 있는지 확인 (includes) 있으면 true 없으면 false
console.log(foodRanking.includes('짜장면'));  // false




// 배열 뒤집기 (reverse)
foodRanking.reverse();

 

for...of 반복문

// 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];


for (let element of foodRanking){
  console.log(element);   // 짜장면 짬뽕 돼지국밥 한우
}

for (let index in foodRanking){
  console.log(foodRanking[index]);  // 짜장면 짬뽕 돼지국밥 한우
}

 

다차원 배열

// 다차원 배열 (multidimensional array)
let foodRanking = [[1, 2], [3, 4], [4, 5]];

console.log(foodRanking[0]);    // [ 1, 2 ]
console.log(foodRanking[0][1]);  // 2

 

다양한 숫자 표기법

// 숫자 표기법
let millionaire = 1000000000;
let num = 1e9;   // 지수 표기법

console.log(millionaire);   // 1000000000
console.log(num);     // 1000000000
console.log(millionaire === num);    // true

// 숫자 표기법
console.log(13e5 === 1300000);  // true
console.log(4.2e3 === 4200);   // true
console.log(-2.1e8 === -210000000);   // true

// 16진법
let hexOne = 0xff;
let hexTwo = 0xFF;

// 8진법
let oct = 0o377;

// 2진법
let binary = 0b11111111;

console.log(hexOne);   // 255
console.log(hexTwo);   // 255
console.log(oct);    // 255
console.log(binary);    // 255

 

숫자형 메소드

▶JS는 숫자도 객체

// number
let num = 0.1234;

// toFixed(0 ~ 100)
console.log(num.toFixed(3));  // 소수를 다룰때 사용하는 메소드, 숫자만큼 소수점 아래 자리수를 고정해줌 string  0.123
console.log(+num.toFixed(2));   // 0.12   (+ 는 num으로 형변환해줌)

// toString (2 ~ 36) 진법으로 숫자를 변환해줌
console.log(num.toString(2));  // 2진수
console.log(num.toString(8));  // 8진수
console.log(num.toString(16));  // 16진수
console.log(4..toString(2));   // 100 (4 숫자 그대로 2진법으로 변환)
console.log((16).toString(8));   // 20

 

Math 객체

// 절댓값 (Absolute Number)
console.log(Math.abs(-300));  // 300

// 최댓값 (Maximum)
console.log(Math.max(3, 4, 5, 11, 7, 3, 9));  // 11

// 최솟값 (Minimum)
console.log(Math.min(5, 6, 11, 32, 12, 1, 2));  // 1

// 거듭제곱 (Exponentiation)
console.log(Math.pow(4, 2));   // 16

// 제곱근 (Square Root)
console.log(Math.sqrt(81));   // 9

// 반올림 (Round)
console.log(Math.round(5.7));   // 6

// 버림과 반올림 (Floor and Ceil)
console.log(Math.floor(8.4));   // 8 (버림)
console.log(Math.ceil(4.9));   // 5 (올림)

// 난수 (Random)
console.log(Math.random());    // 0.20732508994709398

 

미세한 값의 차이가 있는 JS

▶컴퓨터는 0과 1로 처리하다 보니까 가끔 오차가 있는 경우가 있는데

toFixed() 를 사용한뒤 형변환을 해주면 해결된다.

 

▶round() 사용한다.

 

문자열 심화

// String
let hyogiString = 'hyogi';

// 문자열 길이
console.log(hyogiString.length);  // 5 (공백 포함)

// 요소 접근
console.log(hyogiString[2]);  // o 대괄호 표기법
console.log(hyogiString.charAt(3)); // g  charAt 메소드

// 요소 탐색
console.log(hyogiString.indexOf('h'));   // 0 0번인댁스에 h가 존재함 (존재하지 않으면 -1 출력)
console.log(hyogiString.lastIndexOf('y'));   //1 뒤부터 접근

// 대문자 변환
console.log(hyogiString.toUpperCase());  // 대문자 HYOGI
console.log(hyogiString.toLowerCase());  // 소문자 hyogi

// 양 끝 공백 제거
console.log(hyogiString.trim());   // hyogi에 공백이 없으므로 hyogi 출력함

// 부분 문자열 접근 slice(start, end)
console.log(hyogiString.slice(0, 3));   // hyo 0~2번 인덱스까지 출력
console.log(hyogiString.slice(2));  // ogi 2번 인덱스부터 출력
console.log(hyogiString.slice());  // hyogi 전부 출력

 

기본형과 참조형

기본형 : number, string, boolean, null, undefined ( 변수 = 값 )

참조형 : object ( 변수 = 주소값 )

 

참조형 복사하기

// 참조형 복사하기
let num1 = [1, 2, 3, 4, 5];
let num2 = num1.slice();

num2.push(6);

console.log(num1);   // [ 1, 2, 3, 4, 5 ]
console.log(num2);   // [ 1, 2, 3, 4, 5, 6 ]



// 객체
let hyogi = {
  title: 'hyogi blog',
  language: 'Java'
};


// <1>
let hyogi2 = Object.assign({}, hyogi);

hyogi2.title = 'hyogi it blog';

console.log(hyogi);   // { title: 'hyogi it blog', language: 'Java' }
console.log(hyogi2);  // { title: 'hyogi it blog', language: 'Java' }


// <2>
for (let key in hyogi){
  hyogi2[key] = hyogi[key];
}

hyogi2.title = 'hyogi tistory blog';

console.log(hyogi);   // { title: 'hyogi it blog', language: 'Java' }
console.log(hyogi2);  // { title: 'hyogi tistory blog', language: 'Java' }


// <3>
function hyogiObject(Object) {
  let temp = {};

  for (let key in Object){
    temp[key] = Object[key]
  }

  return temp;
};

let hyogi1 = {
  title: 'hyogi it blog',
  language: 'python'
}

let hyogi3 = hyogiObject(hyogi1);

hyogi3.title = 'hyogi tistory blog';
console.log(hyogi3);   // { title: 'hyogi tistory blog', language: 'python' }

 

const, 변수와 상수 사이

가끔 변수를 상수로 쓰라는 경우도 있는데 그 이유는 변수는 언제 어디서나 변경될 수 있는 위험성이 있기 때문이다.

따라서 상수를 써서 변경 못하게 함으로써 안전성에 확보를 생각한 것이다.

 

변수 ( variable) : hyogiName

상수 (constant) : HYOGINAME

 

변수 더 나아가서

var : let과 const처럼 변수 선언할 수 있다.

▶중복된 변수값을 에러발생 시키지 않고 덮어써 버린다.

▶var변수는 scope가 function에서만 구분되어 있다. (전역번수 역할을 하게 된다)

▶끌어올림 : var 변수는 함수 스코프 기준으로 선언되기 이전에도 변수에 접근이 가능하다.

 

 

본 포스팅은 codeit; 스터디를 하며 요약했으며
강의에 있는 예제를 저자가 알아보기 쉽도록 변경하여 포스팅 했습니다.