<프로그래밍 핵심 in JavaScript>
1. 자료형
숫자형
숫자형
자바스크립트는 숫자 형태의 값에 기본적인 사칙 연산이 가능
• 나머지 연산
→ % 기호로 나머지를 구하는 연산이 가능하다
• 거듭 제곱
→ *를 두 개 쓰면 거듭 제곱의 연산이 가능하다
💡사칙 연산 우선순위는 일반적인 사칙 연산 우선순위를 따른다
괄호가 있으면 괄호 안부터 계산한다
☑️숫자형 퀴즈
- console.log(11+3*4);
→곱하기부터 먼저 계산 하기 때문에 11+12로 23이 정답이다
- console.log(25 / 5 + 15 % 4);
→15% 4는 15를 4로나눈 나머지의 값이기 때문에 3 이고
순서대로 계산하면 5+2 이기 때문에 답은 8이다
- console.log(33 - 5 ** 2);
→ 5**2는 5의 2 제곱이기 때문에 25이다 따라서 33-25는 8이다
- console.log((3 + 27) * 12 ** (5 % 3));
→ 괄호부터 먼저 계산하면 30*12**2이다 거듭제곱을 먼저 계산하면 12의 2제곱으로 144가 나온다
따라서 30 * 144를 계산하면 4320이 정답이다
문자열
문자열
• 우리가 사용하는 글자들을 값으로 표현할 때 쓰는 자료형
• 따옴표로 둘러싸인 것 (작은 따옴표,큰 따옴표는 차이가 없다)
• 양 끝으로 감싸는 따옴표가 서로 다르면 문자열이 될 수 없다
문자열 활용
• 문자 안에 작은 따옴표가 있을 때
→ 바깥을 큰 따옴표로 묶어준다
• 문자 안에 작은 따옴표 큰 따옴표가 둘 다 있을 때
→ 역슬래시 (\)를 활용해서 양 끝에 감싸는 따옴표와 중복되는 따옴표 앞에 써주면 문자열 안의 기호라고 이해한다
→ 양 끝을 감싸는 문자를 백틱 (`)으로 바꿔준다
💡문자열 덧셈은 문자열을 연결시킨다
문자열 실습
//실습 1번
console.log(`한국 영화 역사상 아카데미상을 받은 것은 '기생충'이 처음이다.
아리스토텔레스는 "인간은 사회적 동물이다."라고 말했다.
`); #백틱을 사용해서 풀었다
//실습 2번
console.log(`영화 '베테랑'에서 "어이가 없네~"라는 대사가 유명했다.`)
불
불 대수
• 일상적인 논리를 수학적으로 표현한 것
• 불 대수에서 사용하는 값들은 숫자가 아니라 진리값(어떤 명제가 참인지 거짓인지를 나타내는 것)
불 대수의 진리값 → True False
불 대수의 연산자→ AND OR NOT
AND 연산
• x,y가 모두 참일 때만 x AND y 가 참
OR 연산
• x와 y중 하나라도 참이면 x OR y는 참
NOT 연산
• 반대로 뒤집어 주는 역할 (참이면 거짓, 거짓이면 참으로)
불린형
• 자바스크립트에서 참과 거짓을 표현하는 자료형
• 자바스크립트에서 불린의 두 값은 모두 소문자로 true와 false
- 등호를 부등호 앞쪽에 사용하게 되면 에러가 발생한다
- ===→ 등호가 세 개가 있으면 값이 서로 일치한다는 의미
- ! == → 값이 불일치 한다는 의미
자바스크립트의 불린 연산
• AND 연산 → && 로 표현
• OR 연산→ || 로 표현
• NOT 연산 → ! 로 표현
💡AND 연산을 할 때 왼쪽이 false일 경우 오른쪽은 볼 필요도 없이 결과는 false
💡OR 연산의 경우에는 AND 연산과 반대로 왼쪽이 true라면, 오른쪽은 볼 필요도 없이 true
☑️불린형 퀴즈
- 문자열의 따옴표 모양이 달라도 같은 문자열이다 따라서 '코드잇' !== "코드잇" 은 서로 일치하기 때문에 false이다
- x < 4 || !(y === true)에서 y는 false이기 때문에 false와 true가 일치한다는 것은 false이다. 하지만 앞에 ! 가 있기 때문에 true가 되고 or 연산에선 하나라도 true가 있으면 ture이기 때문에 4번의 값은 true가 된다
typeof
💡typeof 연산자
• 어떤 자료형인지를 확인하게 해주는 연산자 , 즉 피연산자의 자료형을 문자열로 리턴해주는 연산
typeof 값 //자료형을 출력함
console.log(typeof 1); //number 출력
console.log(typeof 'Hello'+'Codeit'); //stirngCodeit 출력
console.log(typeof 8-3) //NaN 출력
NaN은 not a number로 숫자가 아닌 값을 표현하는 값이다
typeof 연산자는 기본적으로 사칙연산자들보다 우선순위가 높다
☑️typeof 연산자 퀴즈
- number인 경우 → console.log(typeof 2);
- console.log(typeof (3 * 3));
- console.log(typeof typeof (3 + 5));
→ typeof 8은 number , 따라서 console.log(typeof 'number'); 로 정리가 된다 따라서 출력값은 string
연산자 우선순위
우선순위 연산자 유형 기호
| 21 | 괄호 | (…) |
| 17 | 논리 NOT | ! ... |
| 17 | typeof | typeof ... |
| 16 | 거듭제곱 | ... ** ... |
| 15 | 곱셈 | ... * ... |
| 15 | 나눗셈 | ... / ... |
| 15 | 나머지 | ... % ... |
우선순위 숫자가 클수록 먼저 실행
순위가 같으면 대부분은 왼쪽부터 시작해서 오른쪽으로 연산이 수행
(간혹 = 이나 ** 같이 몇몇 연산은 반대로 하는 경우도 있음)
형 변환
형 변환
• 처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것을 말한다
• String(문자), Number(숫자) ,Boolean(불린)
*불린 true, false를 숫자로 형변환 하면 각각 1, 0으로 변환된다
💡빈 문자 그리고 0, NaN 값은 false로 형변환된다
자동 형변환
• 산술 연산 ( +, -, *, /, %, ** )
→ NaN값이 연산에 있으면 무조건 Nan값이 출력됨
console. log(4 + '2'); // 42 -> 자바스크립트에서는 숫자를 더하는 것보다 문자열을 연결하는
기능이 더 강함
console. log(4 - true); //3
console. log(4 * false);//0
console. log(4 / '2'); //2 -> 나누기 연산이기 때문에 2가 숫자로 계산됨
console. log('4' ** true); //4
console. log(4 % 'two'); // Nan -> two라는 문자열은 숫자로 형 변환 했을 때 NaN 값
• 관계 비교 연산 (<, ≤ ,>, ≥)
→ 특별한 경우를 제외하면 산술 연산자처럼 두 값을 모두 숫자형으로 바꿔서 비교함
console. log(2 < '3'); //true
console. log(2 > true); //true
console. log('2' <= false); //false
console. log('two' >=1); //false
• 같음 비교 연산 (===, !==, ==, !=)
→ 일치 비교는 형변환이 일어나지 않음 , 동등 비교는 숫자형태로 형비교가 일어난다
console. log(1 === '1'); // 일치, 불일치( !== ) fasle
console. log(1 === true);//false
console. log(1 == '1'); // 동등, 부등( != ) true
console. log(1 == true); //true
☑️형 변환 퀴즈
1-1
console.log(Number('1' + '2' + '3') - Number(true));
→ 문자열 1,2,3을 더하면 123, 이를 숫자형으로 바꿔주고 true를 숫자형으로 바꾸면 1이기 때문에 123-1은 122다
1-2
- Boolean("false") → 문자열이 안에 있기 때문에 결과는 true
- Boolean(NaN) || Boolean('0') → ‘0’은 문자열 0 이기 때문에 true
- Boolean(typeof false) → typeof false는 ‘boolean’이기 때문에 문자열을 불린형으로 변환함으로 ture
(불린형으로 변환할 때는, 보통 true가 나오지만, **빈문자(''), 0, 그리고 NaN**은 false로 변환된다)
2-1
- console.log(typeof (3 - true)); → 3 - ture 는 true 가 숫자 1로 형변환 되면서 값이 2가 나온다 따라서 number
- console.log(typeof (Boolean(5) * true)); → Boolean(5)는 true이므로 true * true는 1*1로 number
2-2
- console.log(Number(true) == String(1)); → 1==’1’일 대 동등 비교이기 때문에 두 값의 동등비교는 true가 반환된다
- console.log(5 % 2 === Boolean(2) * true); → 5%2의 값은 1, Boolean(2)*true의 값을 정리하면 1이기 때문에 true이다
템플릿 문자열
더하기 기호 말고도 문자열을 잇는 방법
템플릿 문자열
• 양 옆에 백틱(`)을 사용한다
• ${…} 안에 변수나 리턴 값이 있는 함수를 넣는 것
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다`);
let myNumber = 3;
function getTwice(x) {
return x * 2;
}
console. log('${myNumber}의 두 배는 ${getTwice(myNumber)}입니다. `);
☑️템플릿 문자열 실습
function calcWage(name, time, wage) {
let total = time * wage;
console.log(`${name}님의 근무 시간은 총 ${time}시간이며, 최종 급여는 ${total}원 입니다.`);
}
// 테스트 코드
calcWage('김윤식', 208, 11340);
calcWage('성규재', 175, 12160);
calcWage('손태웅', 161, 13070);
calcWage('허우선', 222, 10980);
null과 undefined
null, undefined
→ 둘 다 자바스크립트에서 값이 없다라는 의미를 가지고 있는 자료형
null
• 의도적으로 표현할 때 사용하는 값
undefined
• 코드를 실행하면서 값이 없다는 것을 확인하는 값
• 자바스크립트에서는 값이 주어지지 않은 변수에는 기본적으로 undefined 값을 가지고 있다
// null과 undefined
let cup;
console.log(cup); // undefined
cup = '물';
console.log(cup); // 물
cup = null;
console.log(cup); // null
자료형 응용하기
// 숫자형과 문자열 재료
let material1 = 3; //숫자형
let material2 = '3';
let material3 = 10;// 숫자형형
let material4 = '4';
let material5 = 4;//숫자형형
// 연산 결과
let result1 = material2+material4; //문자열 34
let result2= Number(material2+material4); //숫자형 34
// 연산을 통해 result1에 문자열 '34'를, result2에 숫자형 34를 할당
// 여기에 코드를 작성하세요
// 테스트 코드
console.log(result1);
console.log(typeof result1);
console.log(result2);
console.log(typeof result2);
2. 추상화
할당 연산자
오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다
=은 등호가 아닌 할당 연산자이다
복합 할당 연산자
// 다음 두 줄은 같습니다
x = x + 1;
x += 1;
// 다음 세 줄은 같은 의미입니다
x = x + 1;
x += 1;
x++;
// 다음 세 줄은 같은 의미입니다
x = x - 1;
x -= 1;
x--;
함수의 실행순서 , 부려먹기
💡함수는 선언을 하고 끝이 나는 것이 아니라 함수를 호출했을 때 실행이 되는 것
☑️함수 부려먹기 (실습)
function logParticipant(name){
console.log(`${name}(이)가 대화에 참여했습니다.`)
}
// 테스트 코드
logParticipant('동수');
logParticipant('윤하');
logParticipant('재준');
logParticipant('동훈');
logParticipant('영희');
logParticipant('신욱')
function expressMultiplication(num1, num2){
console.log(`${num1} * ${num2} = ${num1*num2}`)
}
// 테스트 코드
expressMultiplication(3, 4);
expressMultiplication(3, 2);
expressMultiplication(7, 5);
expressMultiplication(8, 9);
expressMultiplication(5, 5);
expressMultiplication(9, 9);
// 여기에 코드를 작성하세요
function calculateRectangleArea(width, height){
let res =width * height;
return res;
}
// 테스트 코드
let area1 = calculateRectangleArea(3, 4); // 가로 3, 세로 4인 직사각형의 넓이 계산
let area2 = calculateRectangleArea(5, 8); // 가로 5, 세로 8인 직사각형의 넓이 계산
let area3 = calculateRectangleArea(7, 2); // 가로 7, 세로 2인 직사각형의 넓이 계산
console.log(`Area1: ${area1}, Area2: ${area2}, Area3: ${area3}`);
return 문
return 문 두 가지 역할
• 어떤 값을 되돌려주는 아웃풋 역할
• 리턴문이 나오면 함수가 종료된다 따라서 리턴문 아래에 있는 코드는 실행될 수 없다
→dead code
💡return과 console.log의 차이
return은 함수를 실행하고 어떤 값을 돌려주는 것
console.log는 콘솔에 어떤 값을 출력해주는 것
*함수를 실행할 때 리턴문을 작성하지 않고 console로 출력하면 undefined 값을 리턴한다
☑️return과 console.log의 차이 실습
function first() {
let message = "코드잇";
return message;
}
function second() {
let message = "codeit";
console.log(message);
}
function third() {
let message = undefined;
console.log(message);
}
// 테스트 코드
console.log(first());
second();
console.log(third());
옵셔널 파라미터
파라미터가 있는 함수에 아무런 값도 전달하지 않고 함수를 호출하는 경우에는 undefined 값이 나온다
옵셔널 파라미터
• 함수를 호출할 때 파라미터 값을 전달해도 되고 생략해도 된다 (선택적으로 전달받음)
• 필요에 따라서 undefined가 아니라 다른 값이 자동으로 전달되게끔 파라미터에 기본값을 설정하는 것
// 옵셔널 파라미터 (Optional Paramet&rs)
function introduce(name, age, nationality = '한국'){ // 미리 할당한 값
console. log(`제 이름은 ${name}입니다. `);
console. log(`나이는 ${age}살 이고, `);
console. log(`국적은 ${nationality}입니다.`);
}
introduce('코드잇', 4, '미국'); // 값을 모두 전달한 경우
console. log('');
introduce('코드잇', 4); // 파라미터 값을 생략한 경우
💡옵셔널 파라미터는 반드시 생성한 다음 가장 뒤쪽으로 선언해줘야 한다
☑️옵셔널 파라미터 실습
// 여기에 코드를 작성하세요
function orderSetMenu(sandwich,drink ='스프라이트'){
console.log(`주문하신 ${sandwich}, ${drink} 세트 메뉴 나왔습니다!`)
}
// 테스트 코드
orderSetMenu('코드웨잇 클럽');
orderSetMenu('터키베이컨 아보카도', '코카콜라');
orderSetMenu('코드웨잇 멜트');
orderSetMenu('이탈리안 비엠티', '닥터페퍼');
orderSetMenu('에그마요', '환타 오렌지');
변수의 scope
scope → 범위 영역
둘을 나누는 기준은 중괄호로 감싸진 블록문
전역 변수 (글로벌 변수)
• 코드를 작성할 수 있는 파일 전체에서 어디서나 사용할 수 있다
지역 변수 (로컬 변수)
• 블록문 내에서만 유효한 범위를 갖는다
☑️scope 퀴즈
- 함수 내에서 정의한 x는 로컬 변수니까, 당연히 함수 내부에서만 사용할 수 있다 따라서 코드를 실행하면 오류가 발생한다.
- let x = 120; 은 전역변수, let x=20; 은 지역변수다
따라서 myFunction 함수를 실행하면 20이 출력되고 콘솔로 x를 출력하면 120이 출력된다
- let x = 100;은 전역변수, let y = 40;은 지역변수다
따라서 myFunction 함수를 실행하면 140이 출력되고 콘솔로 x를 출력하면 100이 출력된다
상수
• 절대 변하지 않고 항상 일정한 값
• const로 선언한다 (선언할 때 값을 할당해줘야 한다)
• 변수와 구분하기 위해서 대문자로 선언한다
☑️상수 퀴즈
- 상수의 값은 변하기 않기 때문에 오류가 발생한다 (값의 변경이 불가능)
- 소문자와 대문자로 구별되기 때문에 1000, 1500으로 출력된다
// 아래에 adultTag, teenagerTag, errorTag, transferTag라는 변수들을 작성해 주세요
let adultTag ='삑!';
let teenagerTag ='삑삑!';
let errorTag ='삑삑삑!';
let transferTag ='환승입니다.';
// 아래에 tagCase파라미터를 가지는 tagNotification() 함수를 작성해 주세요
function tagNotification(tagCase){
console.log(`${tagCase}`);
}
// 테스트 코드
tagNotification(adultTag);
tagNotification(teenagerTag);
tagNotification(transferTag);
tagNotification(errorTag);
tagNotification(adultTag);
3. 제어문
if 문
조건문
if(조건부분){
동작부분
}
☑️ 롤러코스터 탈 수 있을까? (실습)
function checkHeight(height) {
if(height>=140){
console.log('탑승이 가능합니다.');
}
else{
console.log('탑승이 불가능합니다.');
}
}
// 테스트 코드
checkHeight(140);
checkHeight(135);
checkHeight(170);
else if문
두 가지 이상의 조건문을 작성할 때 활용한다
if (temperature <= 0) {
console. log('물이 업니다. ');
} else if (temperature < 100) {
console. log('물이 얼지도 끓지도 않습니다.');
} else if (temperature < 150) {
console. log('물이 끓습니다.');
} else {
console. log('물이 모두 수증기가 되었습니다. ');
}
☑️학점 계산기 (실습)
function printGrade(midtermScore, finalScore) {
let totalScore = midtermScore + finalScore;
if (totalScore >= 90) {
console.log('A');
} else if (totalScore >= 80) {
console.log('B');
} else if (totalScore >= 70) {
console.log('C');
} else if (totalScore >= 60) {
console.log('D');
} else {
console.log('F');
}
}
// 테스트 코드
printGrade(25, 35);
printGrade(50, 45);
printGrade(29, 24);
printGrade(37, 42);
☑️서열 정리 (실습)
let myAge = 26;
let myGender = 'male';
// 호칭을 담은 변수
let callOlderBrother = '형';
let callOlderSister = '누나';
let callFriend = '친구';
let callYoungerSister = '여동생';
let callYoungerBrother = '남동생';
// 상대방의 나이와 성별에 따른 호칭을 리턴하는 함수 whatShouldICall를 완성하세요
function whatShouldICallYou(yourAge, yourGender) {
if(yourAge===myAge){
return callFriend ;
}else if(yourAge>myAge){
if(yourGender==='female'){
return callOlderSister;
}else{
return callOlderBrother;
}
}else{
if(yourGender==='female'){
return callYoungerSister;
}else{
return callYoungerBrother;
}
}
}
for 반복문
for(초기화부분; 조건부분; 추가동작부분){
동작부분
}- 추가 동작 부분을 꼭 채울 필요는 없다
- 초기화 부분에서 생성한 변수는 for 문의 로컬 변수다
- 초기화 부분도 반드시 채울 필요는 없다
☑️for 반복문 실습
function printTriangle(height) {
let message = '';
for (let i = 0; i < height; i++) {
message += '*';
console.log(message);
}
}
// 테스트 코드
console.log('높이: 1');
printTriangle(1);
console.log('높이: 3');
printTriangle(3);
console.log('높이: 5');
printTriangle(5);
while 반복문
while문과 for문은 대체 가능하다
while(조건부분){
동작부분
}while문과 for문은 대체 가능하다
for문은 보통 조건 비교에 사용되는 값을 반복문 내부에서만 사용하고 반복이 끝나면 외부에서는 사용할 수 없다
따라서 반복문이 종료된 다음에도 변수를 사용해야 될 때는 while문을 사용하는 것이 좋다
☑️while문 실습
const N = 180;
// 여기에 코드를 작성하세요
let i=1;
let cnt=0;
while(i<=180){
if(N%i==0){
console.log(i);
cnt++
}
i++
}
console.log(`180의 약수는 총 ${cnt}개입니다.`)
실습 피보나치 수열
let current = 1;
let previous = 0;
for (let i = 1; i <= 50; i++) {
console.log(current);
let temp = previous; // previous를 임시 보관소 temp에 저장
previous = current;
current = current + temp; // temp에는 기존 previous 값이 저장돼 있음
}
'🏃♀️ 대외활동 > Codeit Boost-Node.js' 카테고리의 다른 글
| 3주차 소프트웨어 이해하기 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.20 |
|---|---|
| 2주차 프로그래밍과 데이터 in JavaScript [코드잇 부스트 백엔드 스터디] (1) | 2024.05.12 |
| 1주차 프로그래밍 언어 이해하기 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.08 |
| 1주차 프로그래밍 시작하기 in JavaScript [코드잇 부스트 백엔드 스터디] (0) | 2024.05.08 |
| 1주차 프로그래밍 프리뷰 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.08 |
