[코드잇] 프로그래밍 기초 in JavaScript / 토픽 2 (완강)

  토픽2. 프로그래밍 핵심 개념 in JavaScript  

  2-1. 자료형  

01. 숫자형

 

• 나머지 연산: %
• 거듭제곱: **
• 소수점 없애기: const a = Math.trunc(4 / 3), console.log(typeof a, a)

02. [퀴즈] 숫자 연산 익히기

 

• 사칙연산 우선순위 해결

03. 문자열 기본

 

• "문자열"

04. 문자열 활용

 

• 문자열: '문자열', "문자열", `문자열`
• 많은 자바스크립트 가이드에서 백틱이나 이스케이프 코드를 불필요한 곳에 사용하는 것을 지양.

05. [실습] 문자열 연습 1

 

• 작은 따옴표 안에 큰 따옴표 넣기. 반대도 가능.

06. [실습] 문자열 연습 2

 

• 따옴표 앞에 역슬래시(\) 붙이기
• 백틱(`) 활용하기

07. 불 대수

 

• 불 대수: 일상적인 논리를 수학적으로 표현한 것
• 불 대수의 값은 진리값이다. 진리값으로 가능한 값은 참, 거짓만 있음.
• 불 대수의 연산: AND, OR, NOT
• 명제: 참, 거짓이 확실한 문장

08. 불린형

 

• 불린형(Boolean): 자바스크립트에서 참, 거짓을 표현하는 자료형.
• 자바스크립트에서는 true, false 임.
• 일치: ===(자료형까지 비교), 불일치: !==
• AND 연산자: &&
• OR 연산자: ||
• NOT 연산자: !
• 불린형으로 변환하는 방법 중 하나가 !!(null) 이런 식.
• AND 연산이 OR 연산보다 우선순위가 높음.

09. [설명] 불린형 연습

 

• 정리 끝~

10. [퀴즈] 불린 익히기

 

• 해결~

11. typeof 연산자

 

• typeof: 사용하는 값의 자료형을 간편히 확인할 수 있음.
• 예시: console.log(typeof 'Hello')
• 자료형을 문자열로 반환함. 예) 'string'
• typeof 연산자는 기본적으로 사칙연산자들보다 우선순위가 높음.
• console.log('a'.repeat(3)); // aaa

12. [퀴즈] typeof 연산자 익히기

 

• 통과~

13. [설명] 연산자 우선순위

 

• 정리 끝~

14. 형 변환 1

 

• 형변환(Type conversion)
• Number('10'), String(10)
• console.log(Number(false)): 0
• '', 0, NaN 값은 false로 변함. -> falsy 값이라고 부름.

15. [퀴즈] 형 변환 익히기 1

 

• 통과~

16. 형 변환 2

 

• 자바스크립트에서는 자동으로 형 변환이 되어 연산된다.
• 산술연산자: console.log('4' - true); // 3
• +: 덧셈 < 문자열 더하기
• Nan은 어떤 값과 연산해도 NaN 값이 나옴.
• 관계 비교 연산자:
• ===: 일치(형 변환 X), ==: 동등(형 변환 O)

17. [퀴즈] 형 변환 익히기 2

 

• Boolean(2) // true

18. 템플릿 문자열

 

• 템플릿 문자열(template strings): 특별한 형식을 가진 문자열
• let year=2018; let month=3; let day=11;
• console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`)

19. [실습] 템플릿 문자열 연습하기

 

• `${변수}`

20. null과 undefined

 

• '값이 없다'를 표현하는 2가지 방법
• null: 의도적으로 표현할 때 사용하는 값. 변수에 직접 null을 지정해준다.
• undefined: 처음부터 값이 없다는 것을 확인하는 값. 변수 선언하고 지정안했을 때.
• 동등: true, 일치: false.

21. [퀴즈] null과 undefined 익히기

 

• 통과~

22. [실습] 자료형 응용하기

 

• 통과~

  2-2. 추상화  

01. 할당 연산자

 

• 할당 연산자(Assignment operator): 오른쪽에 있는 피연산자를 왼쪽의 피연산자에 할당함.
• 예시: let x = 5;

02. [설명] 복합 할당 연산자

 

• 복합 할당 연산자(Compound assignment operators): +=, -=, *=, /=
• 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산자.
• 증가(increment), 감소(decrement) 연산자: ++, --
• 1++: 작성된 코드 줄을 실행한 뒤에 증가시킴.
• ++1: 작성된 코드 줄을 실행할 때 1 증가시킨 상태로 코드 실행함.

03. 함수의 실행 순서

 

• 코드는 위에서 아래로, 왼쪽에서 오른쪽으로.

04. [실습] 함수 부려먹기 1

function logParticipant(name) {
  console.log(`${name}(이)가 대화에 참여했습니다.`)
}

05. [실습] 함수 부려먹기 2

function expressMultiplication(x, y) {
  console.log(`${x} * ${y} = ${x * y}`);
}

06. return문 제대로 이해하기

 

• return문의 역할:
• 1. 함수 호출부분에 결괏값을 반환함
• 2. 함수 내부에서 리턴 키워드 나오면 함수 실행은 그 지점에서 중단됨.
• return 이후의 코드를 Dead code라고 함.

07. return과 console.log의 차이

 

• return문이 없는 함수를 실행하면, 함수 호출부분은 undefined 값을 리턴 받음. -> console.log
• return문: 함수를 실행하고 어떤 값을 돌려주는 것.
• console.log: 콘솔에 어떤 것을 출력해주는 함수.

08. [실습] 함수 부려먹기 3

function calculateRectangleArea(width, height) {
  return width * height;
}

09. 옵셔널 파라미터

 

• undefined 값이 나오는 경우:
• 1. 변수를 선언하고 아무런 값도 할당하지 않을 때.
• 2. 함수를 호출했는데 리턴문이 작성되어있지 않은 경우.
• 3. 파라미터가 있는데 함수를 호출할 때 아무런 값도 전달하지 않을 경우.

 

• 옵셔널 파라미터: 함수 호출할 때 파라미터 값을 전달해도 되고 생략해도 됨. 선택적으로 전달 받음.
• 옵셔널 파라미터는 생성한 후 맨 뒤에 설정해둬야 함. (일반 파라미터가 앞으로 오도록)

function introduce(name, age, nationality = '한국') {
}

10. [실습] 세트메뉴 주문하기

 

• 통과~

11. 변수의 scope

 

• 블록문(Block Statement): 자바스크립트에서 중괄호로 감싼 코드
• 로컬 변수, 지역 변수: 블록문 안에 선언된 변수들
• 글로벌 변수, 전역 변수: 블록문 밖에 선언된 변수들은 파일 전체 어디에서나 사용 가능.

12. [퀴즈] scope 익히기

 

• 통과~

13. 상수

 

• 상수(constant): 절대 변하지 않고 항상 일정한 값
• const, 선언하면서 초기화해야 함.
• 표기 예시: MY_NUMBER

14. [퀴즈] 상수 익히기

 

• 통과~

15. [실습] 함수 변수 복습하기

 

• 통과~

  2-3. 제어문  

01. if문

if (temp <= 0) {
	console.log('물이 업니다.');
} else {
	console.log('물이 얼지 않습니다.');
}

02. [실습] 롤러코스터, 탈 수 있을까?

 

• 통과~

03. else if문

 

• 패스~

04. [실습] 학점 계산기

 

• 통과~

05. [실습] 서열 정리

 

• 통과~

06. switch문

switch (비교할 값) {
	case 조건값_1:
    	동작부분;
        break;
    case 조건값_2:
    	동작부분;
        break;
    default:
    	동작부분;
    }

07. [설명] switch문 vs if문

 

• switch문: 특정한 값에 일치하는 조건을 만들 때.
• if문: 어떤 넓은 범위를 만족하는 조건식을 만들 때.
• 조건식에서 등호 3개 입력해야 함.

08. [실습] 등급별 티켓 가격

 

• 통과~

09. for문

for ((초기화)let i = 1; (조건)i <= 10; (추가)i++) {
 (동작)console.log(`${i} 코드잇 최고!`);
}

10. [설명] for문 Tip

 

• 1. 추가동작부분을 꼭 채울 필요가 없다.
• 2. 초기화 부분에서 생성된 변수는 for문의 로컬 변수이다.
• 3. 초기화 부분도 반드시 채울 필요는 없지만 for문 소괄호 안쪽 세미콜론 2개는 생략 X.

11. [실습] for문 연습하기

 

• 통과~

12. [실습] for문 더 연습하기

 

• 통과~

13. while문

let i = 1;

while (i <= 10) {
	console.log(`${i} 코드잇 최고!`);
}

• for문: 반복문 내부에서만 조건 비교에 사용되는 값 사용. 외부에서는 사용 X.
• while문: 글로벌 변수를 조건 비교에 사용하고 외부에서도 사용 가능.

14. [실습] while문 연습하기

 

• 통과~

15. [실습] while문 더 연습하기

 

• 통과~

16. break와 continue

 

• continue: 추가 동작 부분 넘어감.

for (let i = 1; i <= 10; i++) {
	if (i % 2 === 0) {
    	continue;
    }
    console.log(i);
}



while (i <= 10) {
	if (i % 2 === 0) {
    	i++;
        continue;
    }
    console.log(i);
    i++;
}

17. [퀴즈] break와 continue 익히기

 

• 통과~

18. [실습] 구구단 만들기

 

• 통과~

19. [실습] 피보나치 수열

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