SK networks AI Camp - JavaScript(자료 구조)

Networks/HTML & CSS & JS

SK networks AI Camp - JavaScript(자료 구조)

코딩하는 Español되기 2024. 8. 1. 18:30

javascript 자료 구조

1. 배열(Python기준 : 리스트로 생각하면 편함)

○ 배열 선언

let arr = new Array();
let arr = [];

○ 확인, 수정, 추가

let fruits = ["사과", "오렌지", "자두"];

// 확인
alert( fruits ); // 사과,오렌지,자두
alert( fruits[0] ); // 사과
alert( fruits[1] ); // 오렌지
alert( fruits[2] ); // 자두

// 수정
fruits[2] = '배'; // 배열 : ["사과", "오렌지", "배"]로 바뀜
alert( fruits );

// 추가
// 배열 : ["사과", "오렌지", "배"]

fruits[3] = '자두'; 
alert( fruits ); // 배열 : ["사과", "오렌지", "배", "자두"]

○ 배열 요소의 자료형엔 제약이 없음

// 요소에 여러 가지 자료형이 존재
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력
alert( arr[1].name ); // 이보라

// 인덱스가 3인 요소(함수)를 실행
arr[3](); // 안녕하세요.

○ length : 데이터 길이 확인

let fruits = ["사과", "오렌지", "자두"];

alert( fruits.length ); // 3

○ pop & push

● pop : 배열 끝 요소 제거 & 제거 요소 반환

let fruits = ["사과", "오렌지", "배"];

alert( fruits.pop() ); // 배열에서 "배"를 제거 & 제거된 요소를 띄움

alert( fruits ); // 사과,오렌지

● push : 배열 끝에 요소 추가

let fruits = ["사과", "오렌지"];

fruits.push("배");

alert( fruits ); // 사과,오렌지,배

○ shift & unshift

● shift : 배열 앞 요소 제거 & 제거 요소 반환

let fruits = ["사과", "오렌지", "배"];

alert( fruits.shift() ); // 배열에서 "사과"를 제거 & 제거된 요소를 얼럿창에 띄움

alert( fruits ); // 오렌지,배

● unshift : 배열 앞에 요소 추가

let fruits = ["오렌지", "배"];

fruits.unshift('사과');

alert( fruits ); // 사과,오렌지,배

○ slice

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스 1 ~ 3인 요소까지 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스 -2 ~ 제일 끝 요소까지 복사)

○ concat

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열 생성
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열 생성
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열 생성
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

○ indexOf

: 요소를 발견하면 인덱스 반환

발견 못하면 -1 반환

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

○ find

: true가 반환되면 반복 stop & 요소 반환

조건에 해당하는 요소 없으면 undefined 반환

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

○ filter

: 조건 충족하는 요소들을 반환

조건 충족하는 요소 없으면 빈 배열 반환

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

○ map

: 배열 요소 전체를 대상으로 함수 호출

요소가 아닌 정의된 값을 반환

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

○ sort & reverse

● sort : 배열의 요소 정렬, 요소가 문자형 변환 이후 재정렬됨

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();
// 문자형으로 정렬됨!!
alert( arr );  // 1, 15, 2

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15

● reverse : 요소 역순 정렬

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

○ split

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

○ join

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합칩니다.

alert( str ); // Bilbo;Gandalf;Nazgul

○ 배열 반복

● forEach

// for each element call alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

● for

let arr = ["사과", "오렌지", "배"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}

let fruits = ["사과", "오렌지", "자두"];

// 배열 요소를 대상으로 반복 작업을 수행합니다.
for (let fruit of fruits) {
  alert( fruit );
}

let arr = ["사과", "오렌지", "배"];

for (let key in arr) {
  alert( arr[key] ); // 사과, 오렌지, 배
}

● 다차원 배열

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

2. 객체 (Python의 딕셔너리 느낌)

○ 객체 생성

● 빈 생성 방법 : 객체 생성자, 객체 리터럴

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

● 키 : 값 형태로 프로퍼티(데이터) 넣기 가능

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

○ 프로퍼티 값/키 조회

// 프로퍼티 값 얻기 1
alert( user.name ); // John
alert( user.age ); // 30

// 프로퍼티 값 얻기 2
alert( user["name"] ); // John
alert( user["age"] ); // 30

// 프로퍼티 값 얻기 3
key_name = "name"
alert( user[key_name] ); // John

// 키 확인

// let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

let key = "age";
alert( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.

○ 프토퍼티 추가/삭제

// 추가
alert( user.isAdmin ); // undefined
user.isAdmin = true; 
alert( user.isAdmin ); // true

alert( user["isMan"] ); // undefined
user["isMan"] = true; 
alert( user["isMan"] ); // true

// 삭제

alert( user.isAdmin ); // true 
delete user.isAdmin;  
alert( user.isAdmin ); // undefined

○ 프로퍼티 확인(키 & 값)

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

○ isEmpty

: 객체에 프로퍼티가 하나도 없으면 true, 그렇지 않으면 false 반환

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

3. Map

○ 객체 : 키가 있는 컬렉션 저장

○ 배열 : 순서가 있는 컬렉션 저장

○ 주요 메서드 및 프로퍼티

메서드 및 프로퍼티	기능
new Map()	맵 생성
map.set(key, value)	key를 이용해 value 저장
map.get(key)	key값 반환 * 없으면 undefined 반환
map.delete(key)	key 값 삭제
map.clear()	모든 요소 제거
map.size()	요소 개수 반환

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체 = 키를 문자형으로 변환
// 맵은 키의 타입을 변환시키지 않고 그대로 유지. 따라서 아래의 코드는 출력되는 값이 다릅니다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

let john = { name: "John" };

// 고객의 가게 방문 횟수 세아리기
let visitsCountMap = new Map();

// john을 맵의 키로 사용
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

let john = { name: "John" };

let visitsCountObj = {}; // 객체 생성

visitsCountObj[john] = 123; // 객체(john)를 키로 해서 객체에 값(123)을 저장

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야합니다.
alert( visitsCountObj["[object Object]"] ); // 123

○ 체이닝(chaining)

: map.set을 호출할 때마다 맵 자신이 반환, 이를 이용해 map.set을 체이닝 가능

let map = new Map();

map.set('1', 'str1').set(1, 'num1').set(ture, 'bool1');

○ 맵의 요소에 반복 작업

● map.keys() : 각 요소의 키를 모은 반복 가능한 객체를 반환

● map.values() : 각 요소의 값을 모은 반복 가능 객체 반환

● map.entries() : 요소의 [키, 값]을 한쌍으로 하는 반복 가능 객체 반환

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 키(vegetable)를 대상으로 순회
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회
for (let entry of recipeMap) { // recipeMap.entries()와 동일
  alert(entry); // cucumber,500 ...
}

// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

4. Set

○ 중복을 허용하지 않는 값을 모아 놓은 컬렉션. 셋에 키가 없는 값이 저장

○ 주요 메서드

메서드	기능
new Set(iterable)	Set 생성, 이터러블 객체를 받아 값을 복사에 저장
set.add(value)	값 추가 & 셋 자신 반환
set.delete(value)	값 제거
set.has(value)	if 값 존재: true elif: false
set.clear()	set 비움
set.size	set에 있는 개수

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문 가능
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// set은 유일무이한 값 저장
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력됩니다.
}

○ set에 값 반복 작업

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

// forEach를 사용해도 동일 동작
set.forEach((value, valueAgain, set) => {
  alert(value);
});

5. Date

○ 생성

let now = new Date();
alert( now ); // 현재 날짜 및 시간

let date = new Date("2017-01-26");
alert(date);

● new Date(year, month, date, hours, minutes, seconds, ms)

: 주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체 반환(지역 시간대 기준)

* 첫 번째, 두 번째 인수만 필수값

- year : 반드시 4자리 숫자

- month : 1 ~ 12 사이 숫자

- date : 일 * 값을 안 넣으면 1

- hours/minutes/seconds/ms : 없으면 0으로 처리

new Date(2011, 0, 1, 0, 0, 0, 0); // 2011년 1월 1일, 00시 00분 00초
new Date(2011, 0, 1); // hours를 비롯한 인수는 기본값이 0이므로 위와 동일

let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 2011년 1월 1일, 02시 03분 04.567초

● UTC 기준 1970년 1월 1일 0시 0분 0초에서 1/1000초(밀리초) 후 시점이 저장된 Date 객체 반환

// 1970년 1월 1일 0시 0분 0초(UTC+0)를 나타내는 객체
let Jan01_1970 = new Date(0);
alert( Jan01_1970 );

// 1970년 1월 1일의 24시간 후는 1970년 1월 2일(UTC+0)임
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 );

○ 날짜 구성요소 얻기(Date 객체 메서드)

메서드	기능
getFullYear()	연도 반환
getMonth()	월 반환(0 이상 11 이하)
getDate()	일 반환(1이상 31이하)
getHours(), getMinutes(), getSeconds(), getMilliseconds()	시, 분, 초, 밀리초 반환
getDay()	일요일(0) ~ 토요일(6) 중 하나의 숫자 반환

○ 날짜 구성요소 설정

● setFullYear(year, [month], [date])
● setMonth(month, [date])
● setDate(date)
● setHours(hour, [min], [sec], [ms])
● setMinutes(min, [sec], [ms])
● setSeconds(sec, [ms])
● setMilliseconds(ms)
● setTime(milliseconds) (1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)

let today = new Date();

today.setHours(0);
alert(today); // 날짜는 변경되지 않고 시만 0으로 변경됩니다.

today.setHours(0, 0, 0, 0);
alert(today); // 날짜는 변경되지 않고 시, 분, 초가 모두 변경됩니다(00시 00분 00초).

○ 자동 고침

let date = new Date(2013, 0, 32); // 2013년 1월 32일은 없습니다.
alert(date); // 2013년 2월 1일이 출력됩니다.

// #######
let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);

alert( date ); // 2016년 3월 1일

// #######
let date = new Date();
date.setSeconds(date.getSeconds() + 70);

alert( date ); // 70초 후의 날짜가 출력됩니다.

// #######
let date = new Date(2016, 0, 2); // 2016년 1월 2일

date.setDate(1); // 1일로 변경합니다.
alert( date ); // 01 Jan 2016

date.setDate(0); // 일의 최솟값은 1이므로 0을 입력하면 전 달의 마지막 날을 설정한 것과 같은 효과를 봅니다.
alert( date ); // 31 Dec 2015

○ Date 객체를 숫자로 변경해 시간차 측정

let date = new Date();
alert(+date); // 타임스탬프(date.getTime()를 호출한 것과 동일함)

//##############
let start = new Date(); // 측정 시작

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = new Date(); // 측정 종료

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` );

//##################
let start = Date.now(); // 1970년 1월 1일부터 현재까지의 밀리초

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = Date.now(); // done

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` ); // Date 객체가 아닌 숫자끼리 차감함

○ Date.parse와 문자열

: 메서드 Date.parse(str)를 사용하면 문자열에서 날짜를 읽어올 수 있음

단, 형식을 지켜줘야 함(조건 맞지 않으면 NaN 반환) : YYYY-mm-DDTHH:mm:ss.ssZ

* T = 구분기호, Z = 옵션

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (타임스탬프)

//################
let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

alert(date);

6. JSON(JavaScript Object Notation)

○ JavaScript에서 사용할 목적으로 만들어진 포맷

○ JavaScript가 제공하는 JSON 관련 메서드

● JSON.stringify : 객체를 JSON으로 변환

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

alert(typeof json); // 문자열

alert(json);

let meetup = {
  title: "Conference",
  room: {
    number: 23,
    participants: ["john", "ann"]
  }
};

alert( JSON.stringify(meetup) );

● JSON.parse : JSON을 객체로

// 문자열로 변환된 배열
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1

let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1

○ reviver

아래의 코드는 meetup의 값은 Date 객체가 아닌 문자열이어서 발생한 에러

// 에러 발생한 코드

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

alert( meetup.date.getDate() ); // 에러!

해결 : JSON.parse의두 번째 인수 reviver 사용.

==> 모든 값은 "그대로" But date는 Date 객체를 반환하도록 함수 구현

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // 정상 작동

let schedule = `{
  "meetups": [
    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
  ]
}`;

schedule = JSON.parse(schedule, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( schedule.meetups[1].date.getDate() ); // 정상 작동

'Networks > HTML & CSS & JS' 카테고리의 다른 글

SK networks AI Camp - Javascript (0)	2024.08.01
SK networks AI Camp - CSS_flex (0)	2024.07.31
SK networks AI Camp - CSS기능 (4)	2024.07.31
SK networks AI Camp - HTML(tag) (0)	2024.07.31
SK networks AI Camp - HTML(기본 설명) (0)	2024.07.31

현재글SK networks AI Camp - JavaScript(자료 구조)

코딩에서 살아남기

스페인어, 일상, 코딩, SK networks AI Camp 관련 글 올립니다! 많이 봐주세요.

스페인어, 크롤링, playdata, MySQL, sk networks, encore, docker, 코딩, Crawling, 명령어, 회고록, django, 머신러닝, 프로젝트, Python, 딥러닝, db, AI, 데이터 전처리, 데이터,

Today :
Yesterday :

코딩에서 살아남기