728x90
<프로그래밍과 데이터 in JavaScript>
1. 객체
객체와 프로퍼티
객체
• key-value 한 쌍을 객체의 속성, property 라고 한다
property name (string)
• 문자열로 이루어짐
• 주의 사항
→ 첫 번째 글자는 반드시 문자, 밑줄, 달러 기호중 하나로 시작할 것
→ 띄어쓰기 금지
→ 하이픈 금지
property value
• 모든 자료형 값을 사용할 수 있다 (문자열, 숫자, 불린, null 등 )
• 객체 안에 객체를 넣을 수도 있다
객체와 프로퍼티 익히기
객체의 프로퍼티 네임의 자료형은 문자열이지만, 반드시 따옴표로 감싸줘야 할 필요는 없다.
다만
- 첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않는 경우
- 띄어쓰기를 해야하거나
- 그리고 하이픈을 써야 하는 경우에는
따옴표로 감싸주어야 한다.
객체 다루기
💡객체도 결국 값이기 때문에 먼저 변수에 할당해 주면서 이름을 만들어줘야 함
// 객체 (Object
let codeit = {
name: '코드잇' ,
'born Year': 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
// 점 표기법 (objectName.propertyName)
console.log(codeit.bornYear); //객체이름.속성이름으로 접근!
// 대괄호 표기법(objectName['propertyName'])
console.log(codeit['born Year'])
let propertyName='name';
console.log(codeit[propertyName]);
객체의 프로퍼티를 수정하는 법
→ 해당 프로퍼티에 접근해서 새로운 값을 할당해 주면 된다
객체의 프로퍼티를 추가하는 법
→존재하지 않는 프로퍼티에 새로운 값을 할당하면 객체를 추가할 수 있다
객체의 프로퍼티를 삭제하는 법
→delete 키워드 다음에 객체에 접근을 하면 객체를 삭제할 수 있다
객체의 존재여부를 확인하는 법
존재하지 않는 프로퍼티의 값은 undefined이다
→ 따라서 프로퍼티 값과 undefined를 불일치 비교해서 객체의 프로퍼티 존재여부를 확인할 수 있다.
console.log('name' in codeit); // in 키워드를 사용해서도 존재여부를 확인 할 수 있다in 키워드는 좀 더 안전하게 프로퍼티 값을 확인할 수 있다
객체와 메소드
객체의 메소드
• 연관성이 있는 여러 함수들을 하나로 묶고 싶은 경우도 있을 때 사용한다
// 메소드 (Method)
let greetings = {
sayHello: function (name) {
console. log('Hello ${name}!');
},
sayHi: function() {
console. log('Hi!');
},
sayBye: function() {
console. log('Bye!');
}
};
greetings.sayHello();
for…in 반복문
for..in 반복문
객체 안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할 때 사용
for (변수 in 객체){
동작부분
}
for(let k in codeit){
console.log(k);
console.log(codeit[k]);
}
숫자형(양수) 프로퍼티 네임
let myObject = {
300: '정수',
1.2: '소수',
};
for (let key in myObject) {
console.log(`${key}의 자료형은 ${typeof key}입니다.`);
}
//출력
300의 자료형은 string입니다.
1.2의 자료형은 string입니다.
프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수도 있다 → 다만 실제로 사용될 때는 문자로 형변환 됨
let myObject = {
300: '정수',
1.2: '소수',
};
console.log(myObject['300']);
console.log(myObject['1.2']);
console.log(myObject.300); // Error!
console.log(myObject.1.2); // Error!예외적인 파라미터 네임은 접근할 때도 대괄호표기법으로만 접근이 가능
정수형 프로퍼티 네임
💡객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징
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
birthDay
Date 객체
내장 객체
• console.log 처럼 자바스크립트가 가지고 있는 함수
Date 객체 → 날짜와 관련된 객체
let myDate =new Date();
console.log(myDate);
let myDate = new Date(1000);
- date 객체를 생성할 때 소괄호 안에 숫자 값을 넣어주면 utc 기준 넣어준 숫자값만큼의 밀리초만큼 지난 객체가 만들어진다!
- 문자열을 넣어주기도 한다 → 년 월 일 등으로
- 소괄호 안에 여러 값을 넣어주기도 한다 → 연도 월, 일 ,시 ,분,초 ,밀리초 순서대로 입력한다(년도와 월까진 필수 나머진 생략가능)
💡우리가 생각하는 1월은 컴퓨터에겐 0월 따라서 4를 입력하면 5월으로 입력됨
myDate 객체가 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초 지났는지 → 타임스탬프라고 부름
간단하게 시간 정보 알아내기!
let myDate = new Date();
console.log(myDate.toLocaleDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); // myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)
지금 이 순간..!?
Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환
let myDate = new Date();
console.log(Date.now() === myDate.getTime()); // true
실습정리
영어 단어장 2
let myVoca = {
function: '함수',
variable: '변수',
constant: '상수',
local: '지역의',
global: '전반적인',
};
// 1. 이미 외운 단어 3개를 삭제해 주세요
// 여기에 코드를 작성하세요
delete myVoca.function;
delete myVoca.constant;
delete myVoca.local;
console.log(myVoca);
console.log(myVoca.constant);
// 2. 오늘 외울 단어 4개를 추가해 주세요
// 여기에 코드를 작성하세요
myVoca.extend ='확장하다';
myVoca.export='내보내다';
myVoca.import='불러오다';
myVoca['default value']='기본값';
console.log(myVoca);
console.log(myVoca.export);
// 3. default value의 뜻을 출력해 주세요
// 여기에 코드를 작성하세요
console.log(myVoca['default value']);
영어단어장3
💡파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 함
위 메소드에서 만약 점 표기법으로 key값에 접근을 하게 되면, 파라미터 key를 가리키는 것이 아니라, myvoca에 문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문
let myVoca = {
// 코드를 작성해 주세요.
addVoca: function(name,value){
myVoca[name]=value;
},
deleteVoca: function(name){
delete myVoca[name];
},
printVoca: function(name){
console.log(`"${name}"의 뜻은 "${myVoca[name]}"입니다.`);
},
parameter: '매개 변수',
element: '요소',
property: '속성'
};
// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);
// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);
// printVoca메소드 테스트 코드
myVoca.printVoca('property');
2. 배열
배열
// 배열 (Array)
let courseRanking = [
'자바스크립트 프로그래밍 기초',
'Git으로 배우는 버전 관리',
'컴퓨터 개론',
'파이썬 프로그래밍 기초'
]; // 각 값들을 요소라고 부른다
//인덱스 (0~..)
console.log(배열이름[index]);
배열 인덱싱 연습
let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];
for (let i = 0; i < 6; i++) {
console.log(dataType[i]);
}
배열 다루기
배열도 자바스크립트에서 만들어진 조금 특별한 객체의 한 종류
• length로 배열안에 몇 개의 프로퍼티가 있는지 파악할 수 있다
• **배열이름[’length’]**로도 활용할 수 있다
• delete 배열이름[인덱스] ;
배열 메소드
💡splice
배열의 요소를 삭제할 때 사용되는 메소드
배열.splice(인덱스) → 인덱스 이후에 모든 요소들이 삭제되어버림
배열.splice(인덱스1, deleteCount) → 인덱스1부터 요소 deleteCount개가 삭제 됨
배열.splice(인덱스1, deleteCount,item) → 삭제한 요소 자리에 그 값이 추가가 됨
splice 연습하기
let fruits = ['레몬', '토마토', '딸기', '바나나'];
let ages = [20, 24, 25, 29, 30, 33];
let numbers = [];
// fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도' 를 추가해 주세요
fruits.splice(1,1,'사과','청포도')
// fruits 배열의 첫 번째 요소를 삭제해 주세요
fruits.splice(0,1);
// ages 배열에 마지막 요소를 삭제해 주세요
ages.splice(5,1);
// ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요
ages.splice(2,2,26,28);
// numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요
numbers.splice(0,0,1,2,3,5,8,9);
// 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 !== 0) {
numbers.splice(i, 1);
i--;
}
}
// 테스트 코드
console.log(fruits[1]);
console.log(fruits[0]);
console.log(ages[ages.length - 1]);
console.log(ages[3]);
console.log(numbers[3]);
console.log(numbers);
여러 메소드
// 배열의 메소드 (Array's Method)
let members = ['쿤갈레', 'Zerrard66', '우리생각해써' ,
'흙토끼', 'End Miracle'];
console. log(members);
// 배열의 첫 요소를 삭제: shift()
members.shift();
console. log(members);
// 배열의 마지막 요소를 삭제: pop()
members. pop();
console. log(members);
// 배열의 첫 요소로 값 추가: unshift(value)
members.unshift('NiceCodeit');
console. log(members);
// 배열의 마지막 요소로 값 추가
members.push('HiCodeit');
console. log(members);
배열에서 특정 값 찾기 (indexOf / lastIndexOf)
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao'));
console.log(brands.indexOf('Daum'));
//만약 포함되어 있다면, item이 있는 인덱스가 리턴
//포함되어 있지 않다면, -1이 리턴
//여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴
//lastIndexOf라는 메소드가 있는데요. indexOf와는 반대로 탐색을 뒤에서 부터 하게
배열에서 특정 값이 있는지 확인하기 (includes)
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao'));
console.log(brands.includes('Daum'));
//array.includes(item)을 하게되면 array배열에 item이 있을 경우 true를,
//없을 경우 false를 리턴합니다.
배열 뒤집기 (reverse)
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands);
brands.reverse();
console.log(brands);
for…of 반복문
배열을 다루는 for문
for(변수 of 배열){
동작부분;
}
// 투표 결과 리스트
let votes = [
'이재식', '이재식', '이규하', '이규하', '이규하',
'이재식', '이재식', '이규하', '이규하', '이재식',
'이규하', '이규하', '이규하', '이규하', '이재식',
'이재식', '이규하', '이재식', '이재식', '이재식',
'이재식', '이재식', '이규하', '이규하', '이규하',
'이규하', '이규하', '이재식', '이규하', '이규하',
'이규하', '이규하', '이재식', '이규하', '이규하',
'이규하', '이재식', '이재식', '이재식', '이규하',
];
// 후보별 득표수 객체
let voteCounter = {};
// votes 배열을 이용해서 voteCounter 객체를 정리하기
for (let name of votes) {
// 여기에 코드를 작성하세요
if (name in voteCounter) {
voteCounter[name]+= 1;
} else {
voteCounter[name] = 1;
}
}
// 후보별 득표수 출력
console.log(voteCounter);
다차원 배열
// 다차원 배열 (multidimensional array)
let twoDimensional = [[1, 2], [3, 4]];
console. log(twoDimensional[0]) // [1,2] 출력
console. log(twoDimensional[0][1])//2 출력
3. 자료형 심화
다양한 숫자 표기법
단위가 큰 정수나 자릿수가 많은 소수의 경우 알파벳 e를 표현해서
간단하게 표현 가능
→ 지수 표기법 (10의 거듭제곱)
// 숫자 표기법
console. log(25e5 === 2500000);
console. log(5.3e3 === 5300);
console. log(-6.1e8 === -610000000);|
// 숫자 표기법
// 16진법 (Hexadecimal)
let hex1 = 0xff; // 255
let hex2 = 0xFF; // 255
// 8진법 (0ctal)
let octal = 00377; // 255
// 2진법 (binary numeral system)
let binary = 0b11111111; // 255
숫자형 메소드
자바스크립트에서 숫자형 메소드가 있다
toFixed 메소드
→ 소수점 아래의 자릿수를 고정해주는 메소드
// Number
let myNumber = 0.3591;|
// toFixed(0 ~ 100)
console. log(myNumber.toFixed(3)); //0.359
//초과하는 경우엔 0으로 채운다💡toFixed 메소드를 사용하면 string 형이 되어버리니까 연산할 때주의
*Number 함수 말고도 앞에 + 를 붙이면 숫자형이 된다
toString 메소드
→ 파라미터로 전달하는 숫자의 진법 , 숫자를 변환해주는 메소드
// Number
let myNumber = 255;
// toString(2 ~ 36)
console.log(255..toString(2));
console.log((255).toString(2));
console. log(myNumber.toString(2)); //11111111
console. log(myNumber.toString(8)); //377
console. log(myNumber.toString(16));//ffstring 형이기 때문에 형변환에 주의할 것
Math객체
//절댓값 (Absolute Number)
console.log(Math.abs(-10));
console.log(Math.abs(10));
//최댓값 (Maximum)
console.log(Math.max(2, -1, 4, 5, 0)); //5
//최솟값 (Minimum)
console.log(Math.min(2, -1, 4, 5, 0)); //-1
//거듭제곱 (Exponentiation)
console.log(Math.pow(2, 3)); //8
console.log(Math.pow(5, 2)); //25
//제곱근 (Square Root)
console.log(Math.sqrt(25)); //5
console.log(Math.sqrt(49)); //7
//반올림 (Round)
console.log(Math.round(2.3)); //2
console.log(Math.round(2.4)); //2
//버림과 올림 (Floor and Ceil)
console.log(Math.floor(2.4)); //2
console.log(Math.floor(2.49)); //2컴퓨터의 모든 코드는 0과 1로 이루어진다
→ 따라서 계산할 때 미세한 차이가 발생한다
let sum = 0.1 + 0.2;
console. log (Number(sum. toFixed(1)));
console. log(+sum. toFixed(1));
console.log(Math. round(sum * 10) / 10);
이자계산기 (실습)
function interestCalculator(r,v,n){
let interset;
interset= v * n * (n+1) / 2 * r / 12;
console.log(+interset.toFixed(1));
}
// 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
interestCalculator(0.043, 800000, 24);
// 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
interestCalculator(0.043, 600000, 24);
문자열 심화
// String
let myString = 'Hi Codeit';
// 부분 문자열 접근 slice(start, end)
console. log(myString.slice(0, 2)); // Hi
console. log(myString.slice(3)); // Codeit
console.log(myString.slice()); // 문자열 전체를 가지고 옴
// 양 끝 공백 제거
console. log(myString.trim()); // trim 메소드 (양쪽 공백 제거)
// 대소문자 변환
console. log(myString. toUpperCase()); // 대문자 HI CODEIT
console. log(myString.toLowerCase()); // 소문자 hi codeit
// 요소 탐색
console. log(myString. indexef('i')); // 앞 부터 1
console. log(myString. indexef('a')); // 없는 요소를 찾으려고하면 -1 출력
console. log(myString. lastIndex0f('i')); // 뒤 부터 7
// 요소 접근
console. log(myString [3]); // 대괄효 표기법 C
console. log(myString.charAt(3)); // charAt 메소드 C
// 문자열 길이
console. log(myString. length); // length 프로퍼티 9
문자열과 배열 사이
비슷한 점
let myString = 'Codeit';
for (let str of myString) {
console.log(str);
}
C
o
d
e
i
t
다른 점
let myString = 'Codeit';
let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
console.log(typeof myString); //string
console.log(typeof myArray); //object
mutable vs. immutable
바뀔 수 있는 vs 바뀔 수 없는
// 배열은 mutable
let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
myArray[0] = 'B';
console.log(myArray);
// 문자열은 immutable
let myString = 'Codeit';
myString[0] = 'B';
console.log(myString);
//(6) ["B", "o", "d", "e", "i", "t"]
//Codeit
💡배열은 요소에 접근해서 할당연산자를 통해 요소를 수정가능
문자열은 한 번 할당된 값을 수정할 수 없다
그래 우리 함께 (실습)
let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와";
let hyungdon = null;
// 여기에 코드를 작성하세요
let startIndex = lyrics.indexOf('[형돈]');
let endIndex = lyrics.indexOf('[길]');
console.log(startIndex);
console.log(endIndex);
기본형과 참조형
기본형 → Number String Boolean Null Undefined
• 변수이름 = 기본형 값
💡참조형→Object
• 변수이름 = 주소값
• 주소값을 참조해서 그 값에 접근하게 된다
• 따라서 결과적으로 한 쪽을 수정하면 다른 한쪽도 같이 수정된다
참조형 복사하기
// 참조형 복사하기 (Reference Type Copy)
let numbers1 = [1, 2, 3];
let numbers2 = numbers1.slice();
numbers2. push(4);
console. log(numbers1);
console. log(numbers2);
number2만 변경되길 원할 대 slice를 사용해서 배열을 복사한다
// 참조형 복사하기 (Reference Type Copy)
let course1 = {
title: '파이썬 프로그래밍 기초',
language: 'Python'
};
//let courese2 = course1;
let course2 = {};
for (let key in course1) {
course2 [key] = course1[key];
} //서로 독립적인 개체로 복사를 할 수가 있다
course2.title = '자료 구조';
console. log(course1);
console. log(course2);
💡함수로 만들어서 사용한다
// 참조형 복사하기 (Reference Type Copy)
function cloneObject(object) { //파라미터로 복사할 객체를 전달 받는다
let temp = {};
for (let key in object) {
temp[key] = object [key];
}
return temp; //임시 객체 리턴
};
레시피 만들기
let espresso = ['espresso'];
let americano = espresso.slice();
americano.push('water');
let caffeLatte = espresso.slice();
caffeLatte.push('milk');
// 여기에 caffeMocha와 vanillaLatte 레시피를 만들어 주세요
let caffeMocha = caffeLatte.slice();
caffeMocha.push('chocolateSyrup');
let vanillaLatte = caffeLatte.slice();
vanillaLatte.push('vanillaSyrup');
// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);
console.log(caffeMocha);
console.log(vanillaLatte);
const, 변수와 상수 사이
변수 const로 선언하는 이유
→ 코드를 좀 더 안전하게 작성하기 위해서
const 변수와 const 상수를 구분하는 방법
→ 이름을 짓는 방식으로도 구분할 수가 있다
💡객체의 프로퍼티나 배열의 요소들이 변경되는 경우는 변수가 가진 주소값을 변경하는 게 아니기 때문에 const키워드로 변수를 선언했다 하더라도 값이 충분히 변할 수도 있다
☑️const와 참조형 익히기
2번
let team1 = ['Drum', 'Bass', 'Saxophone'];
const team2 = team1;
team1.splice(2, 1, 'Trumpet');
team2.splice(2, 1, 'Piano');
console.log(team1);
console.log(team2);
//const 키워드로 변수를 선언하게 되면 값을 재할당할 수 없지만,
// 할당된 값이 객체나 배열일 경우 메소드를 통해서 그 값을 변경할 수가 있는데요.
//그렇기 때문에 제시된 코드는 아무런 Error 없이 실행되서,
//2번 인덱스 값이 'Piano'로 변경이 됩니다.
//그래서 team1, team2가 같은 배열을 가리키고 있기 때문에,
//결과적으로 두 변수가 가리키는 배열의 모습은 [ 'Drum', 'Bass', 'Piano' ]이 됩니다
팰린드롬 실습
function isPalindrome(word) {
// 여기에 코드를 작성하세요
for(i=0;i<=word.length/2;i++){
if (word[i]!==word[word.length-1-i]){//math.floor
return false;
} // 문자의 양끝에서부터 비교
}
return true;
}
// 테스트 코드
console.log(isPalindrome("racecar"));
console.log(isPalindrome("stars"));
console.log(isPalindrome("기러기"));
console.log(isPalindrome("123321"));
console.log(isPalindrome("hello"));
console.log(isPalindrome("kayak"));
728x90
'🏃♀️ 대외활동 > Codeit Boost-Node.js' 카테고리의 다른 글
| 3주차 컴퓨터 구조 이해하기 [코드잇 부스트 백엔드 스터디 ] (0) | 2024.05.20 |
|---|---|
| 3주차 소프트웨어 이해하기 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.20 |
| 2주차 프로그래밍 핵심 개념 in JavaScript [코드잇 부스터 백엔드 스터디] (2) | 2024.05.12 |
| 1주차 프로그래밍 언어 이해하기 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.08 |
| 1주차 프로그래밍 시작하기 in JavaScript [코드잇 부스트 백엔드 스터디] (0) | 2024.05.08 |
