JS 기초 in 코드잇

손명근·2020년 8월 27일
CodeitJavaScript
0

별찍기 문제

파이썬과 다른 점 : 문자열 곱하기가 안된다.

해결 - triangle에 매 회 star를 더해주는 것이다. 

function printTriangle(height) {
	for (let i=0; i<height; i++) {
	  let triangle = ''
	  for (let j=0; j<=i; j++) {
	    star = '*'
	    triangle += star
	  }
	  console.log(triangle);
	}
}
// 테스트 코드
console.log('높이: 1');
printTriangle(1);

console.log('높이: 3');
printTriangle(3);

console.log('높이: 5');
printTriangle(5);

// 실행결과
높이: 1
*
높이: 3
*
**
***
높이: 5
*
**
***
****
*****

While문 더 연습하기 문제

const N = 180;
let i = 1;
let count = 0;

while (i <= N) {
  if (N % i === 0) {
    console.log(i);
    count++;
  }
  i++;
}

console.log(`${N}의 약수는 총 ${count}개입니다.`)

피보나치 수열

let num1 = 1;
let num2 = 1;
let count = 1;

while (count <= 50) {
  if (count < 3) {
    console.log(num1);
    count++;
  }
  if (count >= 3) {
    let result = num1 + num2;
    console.log(result);
    num1 = num2;
    num2 = result;
    count++;
  }
}

해설

let current = 1;
let previous = 0;
let i = 1;

while (i <= 50) {
  console.log(current);
  let temp = previous;  // previous를 임시 보관소 temp에 저장
  previous = current;
  current = current + temp;  // temp에는 기존 previous 값이 저장돼 있음
  i++;
}

알아야할 객체 개념.💥

객체의 프로퍼티 네임(key)의 자료형은 문자열이지만,
반드시 따옴표로 감싸줘야 할 필요는 없다. 다만
1. 첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않는 경우
2. 띄어쓰기를 해야하거나
3. 그리고 하이픈을 써야 하는 경우에는
따옴표로 감싸주어야 한다.

객체 표기법.

예시 💬) 객체 chocopie에서 이름을 호출해보자.

let chocopie = {
  // 객체 내 값은 key: value 이며, 이들을 묶어 Property(속성)이라고 칭한다.
  name: '초코파이',
  'born year': 1974, // 이런 경우 말하는 것.
  taste : 'good',
  chocolate : true,
  mashmellow: true,
  bisket: false
};
  1. 점 표기법
console.log(chocopie.name);
  1. 대괄호 표기법
console.log(chocopie['name'];

보통 점 표기법만 쓰는데, 대괄호 표기법도 알아 두기.🍟

프로퍼티 속성

존재하지 않는 프로퍼티에 접근하려고 하는 경우, 에러가 나지 않고, undefined로 표기됨.📍

console.log(chocopie['size']) >> undefined로 출력.

이를 통해 프로퍼티가 객체 내에 존재하는지 알고 싶다면

console.log('size' !== undefined); 이나
console.log('size' in chocopie); 해보면 알 수 있다. (in 연산자)

프로퍼티 수정(추가, 삭제)

let chocopie = {
  // 객체 내 값은 key: value 이며, 이들을 묶어 Property(속성)이라고 칭한다.
  name: '초코파이',
  'born year': 1974, // 이런 경우 말하는 것.
  taste : 'good',
  chocolate : true,
  mashmellow: true,
  bisket: false
};

초코파이의 사이즈 값을 추가하고 싶다면 간단히 이렇게 하면 된다.

chocopie.size = '8cm'
console.log(chocopie) 하면 추가 되어 있을 것.

삭제하고 싶다면 delete연산자를 사용한다.✨

delete chocopie.size;
console.log(chocopie) 하면 삭제 되어 있을 것.

예시 💬 : 영어 단어장에서 외운 단어 삭제하고 외울 단어 추가하기.

let myVoca = {
	function: '함수',
	variable: '변수',
	constant: '상수',
	local: '지역의',
	global: '전반적인'
}

// 이미 외운 단어 (function, constant, local)3개를 삭제해 주세요.
delete myVoca.function;
delete myVoca.constant;
delete myVoca.local;


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


// 오늘 외울 단어 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'])

객체와 메소드

연관성 있는 값들을 묶을 때 객체를 활용했던 것처럼
연관성 있는 ✨함수✨들을 하나로 묶고 싶은 경우도 있다.
이때도 객체를 활용할 수 있다.
객체 내의 프로퍼티 값에 함수를 넣으면 되는데,
이런 함수를 🎆메소드🎆라고 부른다.

함수 이름은 🎠프로퍼티 네임🎠이 대신한다.

함수에 접근하려면 똑같이 점 표기법이나 대괄호 표기법을 사용하고
함수처럼 소괄호()를 끝에 추가하면 된다.
파라미터가 있을 경우에는 소괄호 안에 입력하면 된다.

메소드는 함수에 의미를 부여할 수 있다.

💢 아!
console.log('안녕하세요') 또한 메소드 인데,
console이라는 객체에 log라는 메소드가 있는 것이며
'안녕하세요'를 파라미터로 전달한 것이다.

let myVoca = {
  addVoca: function(voca, mean) {
    myVoca[voca] = mean;
  },
  deleteVoca: function(voca) {
    delete myVoca[voca];
  },
  printVoca: function(voca) {
    console.log(`"${voca}"의 뜻은 "${myVoca[voca]}"입니다.`);
  }
}

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

for in 반복문💥 - 객체를 다루는 for문

객체 안에 있는 프로퍼티를 가지고 반복문을 실행한다.

동작원리
변수는 자신이 원하는 임의의 이름을 지어주면 되고, 
그 변수에는 객체에 있는 프로퍼티 네임이 들어간다.
반복은 프로퍼티 네임 개수만큼 한다.

for (변수 in 객체) {
  동작부분
}

예시 💬
for (let key in chocopie) {
  console.log(key) >> 초코파이 객체의 모든 키 값이 출력된다.
  console.log(chocopie[key]) 초코파이 객체의 모든 값이 출력된다.
}

for in 주의사항

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초'
};

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

--- 출력 ---
자바스크립트 프로그래밍 기초
알고리즘의 정석
컴퓨터 개론
  1. 숫자형(양수) 프로퍼티 네임
let myObject = {
  300: '정수',
  1.2: '소수'
};

다만 실제로 사용될 때는 문자열로 형 변환
300의 자료형은 string입니다.
1.2의 자료형은 string입니다.

console.log(myObject['300']);
console.log(myObject['1.2']);
console.log(myObject.300) // Error!🤶
console.log(myObject.1.2) // Error!👲
  1. 정수형 프로퍼티 네임

객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있습니다.🎅

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

처음에 살펴봤던 것처럼 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도,
정렬방식은 동일하게 처리됩니다.🧛‍♂️

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

그래서 for in 을 사용할 때는 주의해야합니다🌈🌈🌈🌌

예시 💬 시험 결과 - 60점 이상 합격

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

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

function passChecker(scoreObject) {
	let totalScore = 0;
	for (let key in scoreObject) {
	  totalScore += scoreObject[key]
	};
  if (totalScore >= 60) {
    console.log("축하합니다! 합격입니다!");
  }
  else {
    console.log("아쉽지만 불합격입니다..");
  }
}

passChecker(hyesoonScore);
passChecker(minsoonScore);

Date객체💥

let myDate = new Date();
console.log(myDate);
하면 이 변수를 생성한 시각을 myDate에 넣는다.
//출력
The August 31 2020 00:00:00 GMT+0900 (대한민국 표준시)

new Date(특정한 값); 우리가 원하는 날짜 생성가능

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

/* 1970년 1월 1일 00:00:00 UTC + 1000밀리초! === 1초!
밀리초 = 1초를 1000으로 나눈 값.
원하는 날짜 생성하기엔 너무 큰 값이 들어가야 하기에
원하는 날짜를 하려면 문자열로 입력하면 된다. */

let myDate1 = new Date('YYYY-MM-DD')
let myDate2 = new Date('YYYY-MM-DDThh:mm:ss')
let Today = new Date('2020-08-31T10:34:22')

let Yesterday = new Date(YYYY, MM, DD, hh, mm, ss, ms);
// 년도와 월까지는 필수 입력
// month = 0부터 시작 === January

이렇게 생성한 객체에서 메소드로 필요한 값만 따로 가져오면 된다.

myDate.getTime()
getTime() 메소드는 myDate객체가 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초 지났는지..? 계산해준다
이를 타임 스탬프(Time Stamp)라고 칭한다.
getDate() 일자를 알려줌. ex 31일자.
getDay() 요일을 알려줌. (일요일 부터 0 ~ 6 까지)\

이 개념으로 D-day 계산기 만들 수 있음

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부터 밀리초 이후를 나타내는 날짜를 설정)

Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환.

예시

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

function workDayCalc(startDate) {
  let timeDiff = today.getTime() - jaeSangStart.getTime();
  timeDiffDate = (timeDiff / 1000 / 60 / 60 / 24 / 1) + 1; //입사한 날도 포함이니 1을 더해준다.
  console.log(`오늘은 입사한 지 ${timeDiffDate}일째 되는 날 입니다.`);
}

workDayCalc(jaeSangStart);

배열💥

언제 사용하나?

여러 값의 묶음이나, 순서를 굳이 표기할 필요가 없는 경우에는
객체보다 배열을 쓰는게 효과적임!

  • 사용방법
let 배열이름 [ 쉼표로 구분]

배열[index] -인덱싱

예시 💬

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

for (let i = 0; i < dataType.length; i++) {
  console.log(dataType[i])
}

배열도 객체다

length는 배열이라는 객체의 프로퍼티 값임.

console.log(members.length);
console.log(members['length'];

추가 시 주의 할 점 🤸‍♂️

let members = ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']
//members의 길이는 6, members[5]가 마지막
members[7] = '기분좋은하루'

members[6]의 값을 주지 않은 채
7번 인덱스 값을 추가하면
memers[6]은 undefined === empty로 자동 생성된다.🍣

예시 💬 - 섭씨온도 화씨로 변환하기 

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

삭제 시 알아야 할 점 🤸‍

객체에서는 delete 연산자를 사용했지만, 배열에서는 delete연산자로 삭제하지 않는다.
delete members[5]로 삭제하면 

(6) ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']
(6) ['하늘', '바람', '태양', '공기', 흙토끼', empty]

처럼 길이가 변하지 않고 empty로만 바뀌기 때문이다!🥩

삭제하고 싶을 땐 splice 메소드⛹️‍♀️

delete는 완전삭제가 안되기 때문에 splice를 사용하는데
members.splice(삭제하고 싶은 인덱스 번호) 적으면 된다.

let members = ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']
//members[5]가 마지막
members.splice(5);
(5) ['하늘', '바람', '태양', '공기', 흙토끼']

다만 splice(2)이라고 하면 index 2부터 다 날아가게 된다.😅

(2) ['하늘', '바람']

그래서 splice(2, 삭제할 개수) 해서 개수를 정해줄 수 있다.😙

members.splice(1,1);
["하늘", "태양", "공기", "흙토끼", "백룡"]
console.log(members);

splice 메소드 - 삭제기능부터 추가기능까지

splice(startIndex, deleteCount, item)

let members = ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']
members.splice(1, 1, '행복해요', '맛있는거 주세요')

---출력---
(7) ['하늘', '행복해요', '맛있는거 주세요', '태양', '공기', 흙토끼', '백룡']

삭제할 개수를 0개라고 하면 삭제 없이 추가만 할 수도 있다!⚡🌊🔰🔰
삭제없이 1번 인덱스에 추가되고 뒤로 밀린다!

members.splice(1, 0, '행복해요', '맛있는거 주세요')
['하늘', '행복해요', '맛있는거 주세요', '바람', '태양', '공기', 흙토끼', '백룡']

이걸로 요소 수정도 된다는 건 말 안해도 알 것이다

  1. 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)

// 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 배열의 요소들 중 홀수를 모두 삭제해 주세요.
let i = 0;
while (i < numbers.length) {
  if (numbers[i] % 2 !== 0) {
    numbers.splice(i, 1);
  }
  else{
    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);

해설

// numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.
// 여기에 코드를 입력해 주세요.
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 != 0) {
    numbers.splice(i, 1);
    i--;
  }
}

배열 메소드 - 삭제기능부터 추가기능까지

// 배열의 첫 요소 삭제
shift()
// 배열의 마지막 요소 삭제
pop()
// 배열의 찻 요소로 추가
unshift()
// 배열의 마지막 요소로 추가
push()

배열 메소드 - 값 찾기 indexOf / lastIndexOf / includes

  • indexOf
    array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있습니다.
    만약 포함되어 있다면, item이 있는 인덱스가 리턴됩니다.
    포함되어 있지 않다면, -1이 리턴됩니다.
    여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴됩니다.

  • lastIndexOf
    indexOf와는 반대로 탐색을 뒤에서 부터 하게 됩니다.

  • 배열에서 특정 값이 있는지 확인하기 (includes)
    indexOf/lastIndexOf 는 특정 값을 찾아서 해당 값의 index를 알려줍니다.
    하지만, 때로는 그냥 그 값이 배열안에 있는지, 그 여부만 확인하고 싶을 수도 있는데요.
    그럴때는 includes 라는 메소드를 활용하면 됩니다.
    array.includes(item)을 하게되면
    array배열에 item이 있을 경우 true, 없을 경우 false를 리턴합니다.

배열 메소드 - 리버스

배열 뒤집기 (reverse)
array.reverse()하면 배열을 뒤집는다.

배열에서 반복문 사용하기.

  1. for .. of 반복문

예시

let members = ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']

// 사용방법
for (변수 of 배열) {
	문장.
}

// 실제 사용법 
for (let element of members) {
	console.log(element);
}
  1. 객체 때 사용했던 for .. in 반복문 (권장 x)
let members = ['하늘', '바람', '태양', '공기', 흙토끼', '백룡']

for (let index in members) {
	console.log(members[index];
    (객체에서 index 자리에 프로퍼티 네임이 들어갔었다.)
}

예시

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

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

// votes 배열을 이용해서 vote_counter 객체를 정리하기
for (let name of votes) {
  if (voteCounter[name] === undefined) {
    voteCounter[name] = 1
  }
  else {
    voteCounter[name] += 1
  }
}

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

다차원 배열
예시

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

let teams = [
	[],
	[]
];

for (let element of groups) {
  teams[0].push(element[0])
  teams[1].push(element[1])
}


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

다양한 숫자 표기법

25e5 === 2500000
5.3e3 === 5300
-6.1e8 === -610000000

16e-5 === 0.00016
3.5e-3 === 0.0035
-9.1e-5 === -0.00091

hex1 = 0xff; // 255
hex2 = 0xFF; // 255

octal = 0o377; // 255

binary = 0b11111111; // 255

숫자도 객체다.
//Number
let myNumber = 0.3591;
console.log(myNumber.toFixed(3));
toFixed 소수에게 사용한다. 소수점아래의 자릿수를 고정해주는 메소드.
toFixed(n) n자리수까지 고정해준다. 반올림해준다. 대신 이건 문자형식으로 바꾼다는 단점이 있다.
문자형식에서 숫자로 바꿀 때
Number()로 감싸거나
사칙연산 기호들 (+를 앞에다가 붙여주기 or * 1)을 해주면, 알아서 문자를 숫자로 바꿔준다.

toString() 메소드
(파라미터 값)진법으로 바꿔준다.
let myNumber = 255;
myNumber.toString(2); 2진법으로 바꿔준다. // 11111111
myNumber.toString(8); 8진법으로 바꿔준다. // 377
myNumber.toString(16); 16진법으로 바꿔준다. // ff
변수(myNumber)에 말고 숫자에 메소드를 사용할 때는 점을 2개 찍어주면 된다.
255..toString(2)

예시

let myNumber = 2.37e-2

console.log(myNumber.toFixed(2));

2.37e-2 === 0.0237
0.0237..toFixed(2) === 0.02

Math 객체

절댓값 (Absolute Number)
Math.abs(-10)
최댓값 (Maximum Number)
Math.max(2, -1, 4, 5, 0);
최솟값 (Minimum Number)
Math.min(2, -1, 4, 5, 0);
제곱 (Power)
Math.pow(2, 3);
루트 (Square)
Math.sqrt(25);
반올림 (Round)
Math.round(2.49);
Math.round(2.5);
버림과 올림 (Floor and Ceil)
Math.floor(x)을 하면 x의 버림 값이,
Math.ceil(x)을 하면 x의 올림 값이 리턴된다.
이 경우, 소수 부분이 얼마 인지와는 상관이 없다.
난수 생성(Random)
Math.random()

// 반올림
console.log(Math.round(2.49));
console.log(Math.round(2.5));

// 버림과 올림
console.log(Math.floor(2.4));
console.log(Math.floor(2.49));
console.log(Math.floor(2.8));
console.log('-');
console.log(Math.ceil(2.4));
console.log(Math.ceil(2.49));
console.log(Math.ceil(2.8));

// 난수 생성
Math.random()

0.1 + 0.2 = 0.3?
컴퓨터는 숫자를 2진법 0과 1로 바꾸어 계산하는데
0.1을 2진법으로 바꾸면 무한소수가 되어버린다.
그래서 컴퓨터는 어느 자릿수에서 반올림해서 그 값을 가지고 있어
우리가 알고 있는 숫자와는 다르게 값을 가지고 있는 것이다.
그래서 오류가 발생한다.
이건 컴퓨터에서 하는 모든 프로그램(계산기 제외)에서 발생한다.

예시

// 여기에 코드를 작성해 주세요.
function interestCalculator(r, v, n) {
  interest = v * n * (n+1) / 2 * r / 12;
  //console.log(Math.round(interest) * 10 / 10);
  console.log(+interest.toFixed(1));
}
// 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
interestCalculator(0.043, 800000, 24);

// 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
interestCalculator(0.043, 600000, 24);
profile
손명근
프론트엔드, 번역개발, 춤, 여행, 영어를 좋아하는 개발자입니다 :>
이전 포스트

Listening English DAY 3

다음 포스트

자연언어처리 이해

0개의 댓글