[Codeit boost 1기] JS 프로그래밍 기초 (5)

김서윤·2024년 5월 31일

2024 Codeit boost JavaScript 기록

[Codeit boost 1기] 파워부스트 프론트엔드

목록 보기

3/8

Ch5. 프로그래밍과 데이터 in JavaScript

1️⃣ 객체

01~02. 객체와 프로퍼티

→ 객체 (object) : 다양한 값을 저장할 수 있음

{
	brandName: '코드잇',
	bornYear: 2017,
	isVeryNice: true,
	worstCourse: null
	// 값의 이름(key, property name): 값(value, property value) -> 속성(property)
}

*️⃣ Property Name 주의 사항!

첫 번째 글자는 반드시
문자, 밑줄(_), 달러 기호($) 중 하나로 시작!
띄어쓰기 금지!
하이픈(-) 금지!
But ‘1stCousre’처럼 따옴표로 감싸준다면 가능 → 문자열이기 때문

#️⃣ Property Value

모든 자료형 가능
값에 객체도 가능 (객체 안에 객체)

03. 객체에서 데이터 접근하기

점 표기법 (objectName.propertyName) → 위의 1~3번을 지키지 않았을 경우 사용이 어려움

ex. console.log(codeit.bornYear);
대괄호 표기법 (objectName[’propertyName’])

ex. console.log(codeit[’born Year’]); & console.log(codeit.bestCourse[’title’]);

없는 값을 표기하려고 한다면 undefined 출력

04. 영어 단어장 1

실습 코드

let myVoca = {
	// 여기에 코드를 작성하세요
  function: '함수',
  variable: '변수',
  constant: '상수',
  local: '지역의',
  global: '전반적인'
};

console.log(myVoca);
console.log(myVoca.local);
console.log(myVoca.constant);
console.log(myVoca.function);

05. 객체 다루기

값 재할당 codeit.name = ‘codeit’;
추가 가능 (마지막에 추가) codeit.ceo = ‘강영훈’;
삭제 가능 delete codeit.worstCourse;
객체 내부에 property 값 여부 확인하여 불린형 출력 console.log(’name’ in codeit); → true

06. 영어 단어장 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'])

07. 객체와 메소드

메소드 (Method) : property 값으로 함수를 넣은 것

let greetings = {
	sayHello: function (name) {
		console.log(`Hello ${name}!`);
	},
	sayHi: function () {
		console.log('Hi!');
	},
	sayBye: function () {
		console.log('Bye!');
	},
}

greetings.sayHello('Codeit');
greetings['sayHello']('Codeit');

08. 영어 단어장 3

실습 코드

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca: function (eng, kor) {
    myVoca[eng] = kor;
  },
  deleteVoca: function (eng) {
    delete myVoca[eng];
  },
  printVoca: function (eng) {
    console.log(`"${eng}"의 뜻은 "${myVoca[eng]}"입니다.`);
  }
};

// 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');

09~10. for…in 반복문

let codeit = {
	name: '코드잇',
	bornYear: 2017,
	isVeryNice: true,
	worstCourse: null,
	bestCourse: '자바스크립트 프로그래밍 기초'
}

for (let k in codeit) {
	console.log(k);
	console.log(codeit[k]);
}

11. 순이들의 시험 결과

실습 코드

let hyesoonScore = {
	'데이터 모델링의 이해': 10,
	'데이터 모델과 성능': 8,
	'SQL 기본': 22,
	'SQL 활용': 18,
	'SQL 최적화 기본 원리': 20,
};

let minsoonScore = {
	'데이터 모델링의 이해': 14,
	'데이터 모델과 성능': 8,
	'SQL 기본': 12,
	'SQL 활용': 4,
	'SQL 최적화 기본 원리': 16,
};

function passChecker(scoreObject) {
	// 여기에 코드를 작성하세요]
	let scoreTotal = 0;
	
  for (let key in scoreObject) {
    scoreTotal += scoreObject[key];
  }
  
  if(scoreTotal >= 60) {
    console.log('축하합니다! 합격입니다!');
  } else {
    console.log('아쉽지만 불합격입니다..');
  }
}

passChecker(hyesoonScore);
passChecker(minsoonScore);

12~13. Date 객체

내장 객체 : 자바스크립트가 기본으로 가지고 있는 객체

1️⃣

// Date
let myDate = new Date();

console.log(myDate);

→ Thu May 30 2024 00:00:00 GMT+0900 (대한민국 표준시)

→ 요일 월 일 년도 시간 시간대

2️⃣

new Date(특정한 값); // 원하는 날짜 생성

// new Date(milliseconds)
let myDate = new Date(1000);

→ 1970년 1월 1일 00:00:00 UTC + 1000밀리초

3️⃣

// new Date('YYYY-MM-DD')
let myDate = new Date('2024-05-30');

// new Date('YYYY-MM-DDThh:mm:ss')
let myDate = new Date('2024-05-30T18:30:59');

→ Thu May 30 2024 00:00:00 GMT+0900 (대한민국 표준시)

→ Thu May 30 2024 18:30:59 GMT+0900 (대한민국 표준시)

4️⃣

new Date(YYYY, MM, DD, hh, mm, ss, ms);

→ 년도와 월 필수, 나머지 생략 가능 : new Date(YYYY, MM, 1, 0, 0, 0, 0);

🚨 month는 0부터 시작

5️⃣

// Date.getTime()
let myDate = newDate(2024, 05, 30, 18, 30, 59);

console.log(myDate.getTime());

→ myDate 객체가 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초 지났는지? (타임스탬프 Time Stamp)

*️⃣ 지금으로부터 몇 초, 몇 분, 몇 시간이 차이나는지 계산

let myDate = newDate(2024, 05, 30, 18, 30, 59);
let today = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + '밀리초');
console.log(timeDiff + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 / 60 + '시간');

➕ 추가적인 메서드

myDate.getFullYear();
myDate.getMonth(); → 0부터 시작하는 것 주의
myDate.getDate(); → 일자
myDate.getDay(); → 요일 (일요일부터 0 ~ 6까지)
myDate.getHours();
myDate.getMinutes();
myDate.getSeconds();
myDate.getMilliseconds();
myDate.toLocaleDateString(); → myDate가 가진 날짜에 대한 정보 (년. 월. 일)
myDate.toLocaleTimeString(); → myDate가 가진 시간에 대한 정보 (시:분:초)
myDate.toLocaleString(); → myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)
Date.now() === myDate.getTime() → Date.now() 현 시점의 날짜 값

etc..

14. 우수사원 재상이

실습 코드

let today = new Date(2112, 7, 24);
let jaeSangStart = new Date(2109, 6, 1);

function workDayCalc(startDate) {
	// 여기에 코드를 작성하세요
	let timeDiff = today - startDate;
	let timeDate = timeDiff / 1000 / 60 / 60 / 24 + 1;
	console.log(`오늘은 입사한 지 ${timeDate}일째 되는 날 입니다.`);
}

workDayCalc(jaeSangStart);

2️⃣ 배열

01. 배열

// 배열 (Array)
let courseRanking = [
	'자바스크립트 프로그래밍 기초',
	'Git으로 배우는 버전 관리',
	'컴퓨터 개론',
	'파이썬 프로그래밍 기초'
]

// index == PropertyName (0~...)
console.log(배열이름[index])
console.log(courseRanking[0]);

→ 값 : 요소 (element)

02. 배열 인덱싱 연습하기

실습 코드

let dataType = ['number', 'string', 'boolean', 'null', 'undefined', 'object'];

// 여기에 코드를 작성하세요
for(let i = 0; i < 6; i++) {
  console.log(dataType[i]);
}

03. 배열 다루기

배열명.length, 배열명[’length’] 배열의 길이
배열명[없는 인덱스] = ‘새로운 값’ 배열에 요소 추가 → 없는 인덱스를 건너뛴다면 empty로 표시, 문제 발생 가능성 높음
배열명[수정할 값의 인덱스] = ‘수정 값’ 배열 값의 재할당 가능
delete 배열명[삭제할 값의 인덱스] empty로 값만 삭제되고 제대로된 삭제 X

04. 온도 바꾸기

실습 코드

let celsiusTemps = [27, 25, 26, 22, 28, 27, 21];
let fahrenheitTemps = [];

// 여기에 코드를 작성하세요
for (let i = 0; i < celsiusTemps.length; i++) {
  fahrenheitTemps[i] = ( celsiusTemps[i] * 9 / 5 ) + 32;
}

// fahrenheitTemps 테스트
console.log(fahrenheitTemps);

05~09. 배열 메소드

*️⃣ splice

members.splice(4); 배열의 5번째 값을 완전히 삭제 but 5번째부터 마지막 값까지 모든 값을 삭제한다는 문제
members.splice(2, 3); 삭제할 개수를 조절 가능 → 2번 인덱스부터 3개의 값 삭제
members.splice(2, 3, 'NiceCodeit', 'HiCodeit'); 삭제한 자리에 요소 추가 (여러개 가능 → 이때 뒤는 순서가 밀림)
members.splice(2, 0, 'NiceCodeit', 'HiCodeit'); 삭제되지 않고 2번 인덱스에 요소 추가
members.splice(2, 1, 'NiceCodeit'); 2번 인덱스의 값을 수정 (삭제하고 추가함으로써, 여러개 수정도 가능)

#️⃣ 경우에 따라 더 간편한 메소드

members.shift(); 배열의 첫 요소를 삭제
members.pop(); 배열의 마지막 요소를 삭제
members.unshift(추가할 값); 배열의 첫 요소로 값 추가
members.push(추가할 값); 배열의 마지막 요소로 값 추가

▶️ 추가 메소드

배열에서 특정 값 찾는 메소드
1. brands.indexOf('Kakao')
  1. 만약 포함되어 있다면, item이 있는 인덱스가 리턴
  2. 포함되어 있지 않다면, -1이 리턴
  3. 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴
2. brands.lastIndexOf('Kakao') 탐색을 뒤에서부터 진행
3. brands.includes('Kakao') true/false로 여부만 확인
배열 뒤집기
1. brands.reverse(); 배열의 순서를 뒤집는 메소드

10. for…of 반복문

// for...of

for (변수 of 변수) {
	동작부분;
}

let influencer = ['suwonlog', 'small.tiger', 'Minam.ludens', 'cu_convenience24']

for (let element of influencer) {
	console.log(element);
}

for (let index in influencer) {
	console.log(influencer[index]);
}

11. 투표 집계하기

실습 코드

// 투표 결과 리스트
let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

// 후보별 득표수 객체
let voteCounter = {};

// votes 배열을 이용해서 voteCounter 객체를 정리하기
for (let name of votes) {
  // 여기에 코드를 작성하세요
  if (voteCounter[name]) {
    voteCounter[name]++;
  } else {
    voteCounter[name] = 1;
  }
}

// 후보별 득표수 출력
console.log(voteCounter);

12. 다차원 배열

// 다차원 배열 (multidimenstional array)
let twoDimensional = [[1, 2], [3, 4]];

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

13. 팀 나누기

실습 코드

let groups = [
	['영준', '캡틴'], 
	['태순', '우재'],
	['재훈', '지웅'],
	['윤형', '동욱'],
	['규식', '소원'],
];

let teams = [
	[],
	[],
];

// 여기에 코드를 작성하세요
for(let i = 0; i < groups.length; i++) {
  for(let j = 0; j < groups[i].length; j++) {
    teams[j][i] = groups[i][j];
  }
}

// 테스트 코드
console.log(teams[0]);
console.log(teams[1]);

3️⃣ 자료형 심화

01. 다양한 숫자 표기법

let millionaire = 1000000000;
let myNumber = 1e9; 지수 표기법
let hex1 = 0xff; & let hex2 = 0xFF; // 255 16진법 (Hexadecimal)
let octal = 0o377; // 255 8진법 (Octal)
let binary = 0b11111111; // 255 2진법 (binary numeral system)

02~03. 숫자형 메소드

myNumber.toFixed(3); 0~100 사이의 숫자만큼 소수점 아래의 자릿수를 고정 (반올림, 없는 숫자는 0으로 표시)
1. Number(myNumber.toFixed(3)); string 값으로 변환시키기 때문에 다시 number로 전환해주는 처리 필요 → 이때는 0 표시 X
2. +myNumber.toFixed(3); 위의 Number와 같은 역할
myNumber.toString(2); 파라미터에 전달하는 숫자(2~36 사이)의 진법으로 변환해주는 메소드
1. 255..toString(2); 위와 같은데 변수를 정의하지 않고 사용하는 방법
2. (255).toString(2); 위와 동일

04. Math 객체

Math.abs(10); && Math.abs(-10); // 10 절댓값
Math.max(2, -1, 4, 5, 0); 최댓값
Math.min(2, -1, 4, 5, 0); 최솟값
Math.pow(2, 3); 거듭제곱 (2의 3제곱)
Math.sqrt(25); //5 제곱근
Math.round(2.3); 소수점 부분 반올림
Math.floor(2.4); 소수점 부분 버림
Math.ceil(2.4); 소수점 부분 올림
Math.random(); 0 이상 1 미만의 값이 랜덤으로 리턴

05. 바보 자바스크립트?

→ 0과 1로 코드를 변환하면서 생기는 무한 소수 문제로 인해 오류 발생

06. 이자 계산기

실습 코드

// 여기에 코드를 작성하세요
function interestCalculator(rate, payment, term) {
  let interest = payment * term * (term + 1) / 2 * rate / 12;
  console.log(Math.round(interest));
}

// 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
interestCalculator(0.043, 800000, 24);

// 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
interestCalculator(0.043, 600000, 24);

07~08. 문자열 심화

myString.length; length 프로퍼티, 문자열의 길이 (공백 포함)
문자열 요소 접근
1. myString[3]; 대괄호 표기법
2. myString.charAt(3); charAt 메소드
문자열 요소 탐색
1. myString.indexOf(’i’); 앞 부터 탐색
2. myString.lastIndexOf(’i’); 뒤 부터 탐색
문자열 대소문자 변환 (통일)
1. myString.toUpperCase(); 대문자
2. myString.toLowerCase(); 소문자
양 끝 공백 제거
1. myString.trim(); trim 메서드
부분 문자열 접근 slice(start, end)
1. myString.slice(0, 2); 0~1번 인덱스의 문자열 접근
2. myString.slice(3); 시작 지점부터 끝까지 접근
3. myString.slice(); 문자열 전체 접근

→ 배열은 'mutable(바뀔 수 있는)' 자료형 VS 문자열은 'immutable(바뀔 수 없는)' 자료형

09. 그래, 우리 함께

실습 코드

let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와";

let hyungdon = null;

// 여기에 코드를 작성하세요
let startIndex = lyrics.indexOf('[형돈]');
let endIndex = lyrics.indexOf('[길]');

hyungdon = lyrics.slice(startIndex, endIndex);

// 테스트 코드
console.log(hyungdon);

10~11. 기본형과 참조형

기본형 (Primitive Type) → 변수 = 값 : Number, String, Boolean, Null, Undefined
참조형 (Reference Type) → 변수 = 주소값 : Object

12. 참조형 복사하기

// 참조형 복사하기 (Reference Type Copy) -> 복사하여 독립적으로 사용
let numbers1 = [1, 2, 3];
let numbers2 = numbers1.slice(); // slice의 특성을 이용하여 복사

numbers2.push(4);

console.log(numbers1);
console.log(numbers2);

// 객체의 경우 사용할 수 없는 slice를 대체
let course1 = {
	title: '파이썬 프로그래밍 기초',
	language: 'Python'
}

let course2 = {};

for (let key in course1) {
	course2[key] = course1[key];
}

course2.title = '알고리즘의 정석';

console.log(course1);
console.log(course2);

// 위의 for문을 함수로 만들어 효율적으로 작성
function cloneObject(object) {
	let temp = {};
	
	for (let key in object) {
		temp[key] = object[key];
	}
	
	return temp;
}

let course1 = {
	title: '파이썬 프로그래밍 기초',
	language: 'Python'
}

let course2 = cloneObject(course1);

course2.title = '알고리즘의 정석';

console.log(course1);
console.log(course2);

But 이 경우 객체 안에 배열이 있다면 참조형이 적용되어 course1에도 추가되는 문제 발생

아래의 코드로 해결 가능

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;
}

13. 레시피 만들기

실습 코드

// 아래 코드중 잘못된 부분을 수정해 주세요
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);

14~15. const, 변수와 상수 사이

상수 (constant) → const → 변수 (variable)

변수로 입력받아서 상수로 사용하는 경우가 많음

변수 const

myName

상수 const

MY_NAME

16. 변수, 그땐 그랬지

var 변수

키워드 다음에 변수이름을 써서 선언
키워드와 변수이름, 그리고 할당연산자와 값으로 선언과 동시에 값을 할당 가능
중복 선언이 가능 → 값 재할당 X
Scope의 문제
- 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할
변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'

4️⃣ 과제로 복습하기

01. 팩토리얼

실습 코드

function factorial(n) {
  let result = 1;
	
	// 여기에 코드를 작성해 주세요.
  for(let i = 1; i <= n; i++) {
    result *= i;
  }
	
  return result;
}

// 테스트 코드
console.log(factorial(12));
console.log(factorial(6));
console.log(factorial(3));
console.log(factorial(0));

02. 거스름돈 구하기

실습 코드

function calculateChange(payment, cost) {
  // 여기에 코드를 작성하세요
  let leftMoney = payment - cost;
  let bigFive = 0, bigOne = 0, five = 0, one = 0;
  
  if (leftMoney % 50000 != 0) {
    bigFive += Math.floor(leftMoney / 50000);
    leftMoney -= 50000 * bigFive;
  }
  if (leftMoney % 10000 != 0) {
    bigOne += Math.floor(leftMoney / 10000);
    leftMoney -= 10000 * bigOne;
  }
  if (leftMoney % 5000 != 0) {
    five += Math.floor(leftMoney / 5000);
    leftMoney -= 5000 * five;
  }
  one += Math.floor(leftMoney / 1000);
  
  console.log(`50000원 지폐: ${bigFive}장`);
  console.log(`10000원 지폐: ${bigOne}장`);
  console.log(`5000원 지폐: ${five}장`);
  console.log(`1000원 지폐: ${one}장`);
}

// 테스트 코드
calculateChange(100000, 33000);
console.log('');
calculateChange(500000, 378000);

03. 팰린드롬

실습 코드

function isPalindrome(word) {
  // 여기에 코드를 작성하세요
  for (let i = 0; i < Math.floor(word.length / 2); i++) {
    let left = word[i];
    let right = word[word.length - 1 - i];
    if (left !== right) {
      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"));

김서윤

이전 포스트

[Codeit boost 1기] JS 프로그래밍 기초 (4)

다음 포스트

[Codeit boost 1기] JS 프로그래밍 기초 (5)

[Codeit boost 1기] 파워부스트 프론트엔드

Ch5. 프로그래밍과 데이터 in JavaScript

1️⃣ 객체

01~02. 객체와 프로퍼티

03. 객체에서 데이터 접근하기

04. 영어 단어장 1

05. 객체 다루기

06. 영어 단어장 2

07. 객체와 메소드

08. 영어 단어장 3

09~10. for…in 반복문

11. 순이들의 시험 결과

12~13. Date 객체

14. 우수사원 재상이

2️⃣ 배열

01. 배열

02. 배열 인덱싱 연습하기

03. 배열 다루기

04. 온도 바꾸기

05~09. 배열 메소드

10. for…of 반복문

11. 투표 집계하기

12. 다차원 배열

13. 팀 나누기

3️⃣ 자료형 심화

01. 다양한 숫자 표기법

02~03. 숫자형 메소드

04. Math 객체

05. 바보 자바스크립트?

06. 이자 계산기

07~08. 문자열 심화

09. 그래, 우리 함께

10~11. 기본형과 참조형

12. 참조형 복사하기

13. 레시피 만들기

14~15. const, 변수와 상수 사이

16. 변수, 그땐 그랬지

4️⃣ 과제로 복습하기

01. 팩토리얼

02. 거스름돈 구하기

03. 팰린드롬

[Codeit boost 1기] JS 프로그래밍 기초 (4)

[Codeit boost 1기] JS 중급 (1)

0개의 댓글

관련 채용 정보