프로그래밍과 데이터 in JavaScript
- Javascript
- 2021. 9. 25. 16:51
프로그래밍과 데이터 in JavaScript
해당 내용은 코드잇의 '프로그래밍과 데이터 in JavaScript' 를 보고 정리한 내용입니다.
문제가 될 시 삭제하겠습니다.
01. 객체
01. 객체와 프로퍼티
- 객체는 {} 로 만들 수 있음
- property name 작성 시 따옴표로 감싸지 않을 수 있지만, 그러려면 아래의 조건을 만족해야 함
- 첫번째는 글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작해야 함
- 띄어쓰기 금지
- 하이픈(-) 금지
{
키 : value,
property name : property value
}03. 객체에서 데이터 접근하기
let codeit = {
name: '코드잇',
'born Year': 2017,
isVeryNice : true,
wortCourse: null,
bestCourse: {
title: '자바스크립트',
language: 'JavaScript'
}
};- 점표기법으로 접근
- property name 에 띄어쓰기가 있거나 하이픈(-) 이 있는 경우 사용할 수 없음
console.log(codeit.bornYear);- 대괄호 표기법
console.log(codeit['born Year']);
console.log(codeit['born'+' Year']);
let propertyName = 'name';
console.log(codeit[propertyName]);- 객체 안의 객체 접근
- 존재하지 않은 property 에 접근하려고 하면 undefined가 출력됨
console.log(codeit.bestCourse['title']);05. 객체 다루기
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice : true,
wortCourse: null,
bestCourse: {
title: '자바스크립트',
language: 'JavaScript'
}
};
codeit.name = 'codeit'; // 변경
codeit.ceo = '강영훈'; // 새로운 property 추가
delete codeit.worstCourse; // 삭제
// property 가 있는지 확인
console.log(codeit.name !== undefined);
console.log('name' in codeit);
07. 객체와 메소드
let greetings = {
width:30,
height:50,
sayHello: function (name) {
console.log(`Hello! ${name}! `);
},
sayHi: function () {
console.log('Hi!');
},
sayBye: function () {
console.log('Bye!');
}
};
greetings.sayHello('minimi');
greetings['sayHello']('minimi');
09. for ... in 반복문
for (변수 in 객체) {
동작부분
}
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice : true,
wortCourse: null,
bestCourse: {
title: '자바스크립트',
language: 'JavaScript'
}
};
for (let key in codeit) {
console.log(key);
console.log(codeit[key]);
}- 주의사항 : 객체의 key 를 for문으로 출력 시, 순서대로 출력되는 것이 아님
let myObject = {
'3': '정수3',
name: 'codeit',
'1': '정수1',
birthDay: '2017.5.17',
'2': '정수2',
};
for (let key in myObject) {
console.log(key);
}1
2
3
name
birthDay12. Date 객체
내장객체 : 자바스크립트가 미리 가지고 있는 객체
// Date
let today = new Date(); // Date.now()
// new Date(milliseconds)
let myDate = new Date(1000); // 1970년 1월 1일 00:00:00 UTC + 1초
// new Date('YYYY-MM_DD')
let myDate = new Date('2017-05-18'); // 1970년 1월 1일 00:00:00 UTC + 1초
// month 는 0부터 시작
// new Date('YYYY-MM_DDThh:mm:ss')
// new Date(YYYY, MM, DD, hh, mm, ss, ms); //YYYY, MM만 필수요소
let myDate = new Date(2017, 4, 18, 19, 11, 16);
// myDate 객체가 1970년 1월 1일 00:00:00 UTC 부터 몇밀리초 지났는지
console.log(myDate.getTime());
let timeDiff = myDate.getTime() - today.getTime();
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 /60 + '시간');
- 시간 차이 구하기
let myDate1 = new Date(2017, 4, 18);
let myDate2 = new Date(2017, 4, 19);
let timeDiff = myDate2 - myDate1;
console.log(timeDiff); // 86400000 (ms)
console.log(timeDiff / 1000); // 86400 (sec)
console.log(timeDiff / 1000 / 60) // 1440 (min)
console.log(timeDiff / 1000 / 60 / 60) // 24 (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24) // 1 (date)02. 배열
01. 배열
- 배열은 객체와 다르게 순서대로 출력됨
let courseRanking = [
'1',
'2',
'3',
'4'
];
// indexing (0 ~ ... )
console.log(배열이름[index]);
console.log(courseRanking [0]);03. 배열 다루기
let members = ['a', 'b', 'c'];
// 몇개의 요소가 들어있는지
console.log(members.length); // 3
console.log(members['length']); // 3
// 요소 추가하기
console.log(members[4]); // undefined
members[4] = 'nice';
console.log(members.length); // 4
// 요소 삭제하기05. 배열 메소드 1
let members = ['a', 'b', 'c', 'd', 'e'];
// splice(시작 index(0부터 시작), deleteCount, item(값추가))
members.splice(1, 1, 'NiceCodeit', 'HiCodeit');
// ['a', 'NiceCodeit', 'HiCodeit', 'c', 'd', 'e']
// 배열 특정 위치에 추가만 하고 싶은 경우
members.splice(1, 0, 'NiceCodeit', 'HiCodeit');
// ['a', 'NiceCodeit', 'HiCodeit', 'b', 'c', 'd', 'e']
// 값을 대체하고 싶은 경우
members.splice(2, 1, 'NiceCodeit');
// ['a', 'b', 'NiceCodeit', 'd', 'e']
// 배열의 첫 요소를 삭제
members.splice(0, 1);
// 배열의 마지막 요소를 삭제
members.splice(members.length -1, 1);
// 배열의 첫 요소로 값 추가
members.splice(0, 0, 'NiceCodeit');
// 배열의 마지막 요소로 값 추가
members.splice(members.length, 0, 'HiCodeit');// 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.
numbers = [1, 2, 3, 5, 8, 9];
for (let i=0; i < numbers.length; i ++){
if (numbers[i] % 2 == 1 ){
numbers.splice(i,1)
i --;
}
}07. 배열 메소드2
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
members = [1, 2, 3, 4, 5, 6];
// 배열의 첫 요소를 삭제: shift()
members.shift();
console.log(members); // [2, 3, 4, 5, 6]
// 배열의 마지막 요소를 삭제: pop()
members.pop();
console.log(members); // [2, 3, 4, 5]
// 배열의 첫 요소로 값 추가: unshift(value)
members.unshift('Nice');
console.log(members); // ['Nice', 2, 3, 4, 5]
// 배열의 마지막 요소로 값 추가: push(value)
members.push('Hi');
console.log(members); // ['Nice', 2, 3, 4, 5, 'Hi']
- 배열에서 특정 값이 있는지 확인 : array.indexOf(item)
- 포함되어 있다면 item 이 있는 index return
- 포함되어 있지 않다면 -1 return
- 여러번 포함되어 있으면, 처음 발견된 인덱스 return
- 뒤에서 부터 탐색하려면 array.lastIndexOf(item)
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao')); // 1
console.log(brands.indexOf('Daum')); // -1- 배열에서 특정 값이 있는지 확인 : array.includes(item)
- array에 item이 있을 경우 true를, 없을 경우 false를 return
let brands = ['Google', 'Kakao', 'Naver', 'Kakao']; console.log(brands.includes('Kakao')); // true console.log(brands.includes('Daum')); // false
- 배열 뒤집기 (reverse)
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands);
brands.reverse(); // ['Google', 'Kakao', 'Naver', 'Kakao']
console.log(brands); // ['Kakao', 'Naver', 'Kakao', 'Google']10. for ... of 반복문
- for ... in 과 다른 점은 배열을 돌린다는 점, 배열에는 활용하지 않는 것이 좋음
for ( 변수 of 배열 ) {
동작부분;
}
for (변수 in 객체) {
동작부분
}
for (let element of influencer) {
console.log(element);
}12. 다차원 배열
// 다차원 배열
let twoDimensional = [[1, 2], [3, 4]];
console.log(twoDimensional[0][1]) // 2
03. 자료형 심화
01. 다양한 숫자 표기법
// 숫자 표기법
let millionaire = 1000000000;
let myNumber = 1e9; // 지수표기법
console.log(millionaire === myNumber); // true
// 16진법 (Hexadecimal)
let hex1 = 0xff; // 255
let hex2 = 0xFF; // 255
// 8진법 (Octal)
let octal = 0o377; // 255
// 2진법 (binary numeral system)
let binary = 0b11111111; // 2502. 숫자형 메소드
let myNumber = 0.3591;
// toFixed(0 ~ 100)
console.log(myNumber.toFixed(3)); // 0.359
console.log(myNumber.toFixed(7)); // 0.3591000
console.log(typeof myNumber.toFixed(3)); // string
console.log(typeof +myNumber.toFixed(3)); // Number
// toString(2 ~ 36)
console.log(myNumber.toString(2)); // 2진법 숫자로 변환
console.log(myNumber.toString(8)); // 8진법 숫자로 변환
console.log(myNumber.toString(16)); // 16진법 숫자로 변환
let myNumber = 255;
console.log(255..toString(2)); // 숫자를 그냥 쓰면 에러가 나서 .. 을 붙임
console.log((255).toString(2)); // 숫자 양옆에 괄호를 붙이면 에러가 안남
console.log(myNumber.toString(2));
04. Math 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math
Math.abs(x) // 절대값
Math.max(2,-1) // 최대값 2
Math.min(2,-1) // 최솟값 -1
Math.pow(2,3) // 거듭제곱 8
Math.sqrt(25) // 제곱근 5
Math.round(2.3) // 반올림 2
Math.floor(2.4) // 버림 2
Math.ceil(2.4) // 올림 3
Math.random()
05. 바보 자바스크립트?
- 0.1+0.2 를 0.3이라고 계산 못하는 멍충이
let sum = 0.1 + 0.2; // 0.3000000000000000000004
// 올바르게 계산되도록 하기 위해서 아래와 같이 사용함
console.log(+sum.toFixed(1)); // 0.3
console.log(Math.round(sum * 10) / 10); // 0.3
07. 문자열 심화
// String
let myString = 'Hi Codeit';
// 요소탐색
console.log(myString.indexOf('i')); // 1 앞 부터
console.log(myString.lastIndexOf('i')); // 7 뒤 부터
// 요소 접근
console.log(myString[3]); // C 대괄호 표기법
console.log(myString.charAt(3)); // C charAt 메소드
// 문자열 길이
console.log(myString.length); // 9
// 대소문자 변환
console.log(myString.toUpperCase());
console.log((myString.toLowerCase());
// 양 끝 공백 제거
console.log(myString.trim());
// 부분문자열 접근 slice(start, end) 끝 인덱스 바로 직전까지의 index를 가져옴
// end 생략 시 문자열 끝까지
console.log(myString.slice(0, 2));
console.log(myString.slice(3));
console.log(myString.slice());
10. 기본형과 참조형
기본형 : Number, String, Boolean, Null, Undefined
참조형 : Object (list도 Object)
12. 참조형 복사하기
let numbers1 = [1, 2, 3]
let numbers2 = numbers1;
numbers2.push(4);
console.log(numbers1); // [1, 2, 3, 4]
console.log(numbers2); // [1, 2, 3, 4]
let course1 = {
title: '미니미 기초',
language: '파이썬'
};
// 객체를 복사하는 방법
let course2 = Object.assign({}, course1);
course2.title = '알고리즘';
console.log(course1);
console.log(course2);// 참조형 복사하기
function cloneObject(object) {
let temp = {};
for (let key in object) {
temp[key] = object[key];
}
return temp;
};
let course1 = {
title : '파이썬 기초',
language: '파이썬'
pre : []
}
let course2 = cloneObject(course1);
course2.pre.push('파이썬2'); // 객체이기 때문에 course 1,2 에 다들어가도록 됨
// 그러므로 아래와 같이 코드를 변경해줌
function cloneObject(object) {
if (object === null || typeof object !== 'object') {
return object;
}
let temp;
if (Array.isArray(object)) {
temp = [];
} else {
temp = {};
}
for (let key of Object.keys(object)) {
temp[key] = cloneObject(object[key])
}
return temp;
};
14. const, 변수와 상수 사이
- let 으로 선언한 변수는 재할당이 가능함 (변수명은 camelcase로 myName)
- const 로 선언한 상수는 재할당이 불가능함 (변수명은 대문자로 MY_NAME)
- 참조형 객체나 배열의 경우에는 값이 변할 수 있음
- 재할당 시 에러가 발생함
16. 변수, 그땐 그랬지
- var 키워드로 선언한 변수의 첫 번째 문제는, let과 const와는 다르게 중복 선언이 가능하다는 것
- 똑같은 이름으로 변수를 한 번 더 선언하게 되면 에러가 발생하는 것이 아니라 그냥 기존의 변수를 덮어써 버림
- var는 Scope가 자칫 전역변수 역할을 하게 될 수 있음
let과 const 키워드로 선언한 변수는 if, for, function 등등 어떤 키워드와 관계없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 갖게 되지만,
var 키워드로 선언한 변수는 scope가 function에서만 구분되어 있음
let이나 const 키워드의 경우에는 중괄호로 감싸진 경우라면 모두 중괄호 밖에서는 지역 변수에 접근할 수 없음
하지만 var 변수는 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할을 하게 될 수 있음 - let과 const는 선언되기 이전에 사용할 수 없지만 var 는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능함
- 끌어올림 (Hoisting)
console.log(myVariable);
let myVariable;
Uncaught ReferenceError: Cannot access 'myVariable' before initializationconsole.log(myVariable);
var myVariable;
undefined변수의 선언이 끌려 올라가서 마치, 2번째 줄과 첫 번째 줄이 바뀐 것처럼 동작함
var myVariable;
console.log(myVariable);이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부름
호이스팅은 선언과 동시에 값을 할당하더라도, 선언문만 올려지기 때문에 값은 그대로 두 번째 줄에 남아있는 데요.
console.log(myVariable);
var myVariable = 2;
console.log(myVariable);undefined
2하지만 이런 식으로 동작하는 방식은 코드의 흐름을 방해하기에 충분해 보이죠? 한 가지 주의해야 될 부분은, 함수를 선언할 때도 이 호이스팅이 적용됨
sayHi();
function sayHi() {
console.log('hi');
}이렇게 코드를 작성하더라도 실행해보면,
hi당연한 듯 함수가 잘 실행되는 모습을 확인할 수 있음
이런 현상은 함수를 한 번 선언하고 나면 어디서든 유연하게 사용할 수 있다는 장점이 있지만, 코드의 흐름에는 부정적인 영향을 끼칠 수 있습니다. 그래서 함수를 선언할 떄는 가급적 코드 윗부분에 선언하거나, 호출을 항상 아래쪽에서 한다거나 나름대로 규칙을 세워서 코드를 작성하시기를 권장함