Written by java-style
on 2021-09-24

프로그래밍 핵심 개념 in javascript

해당 내용은 코드잇 '프로그래밍 핵심 개념 in javascript'을

보면서 정리한 내용입니다. 문제가 될 시 삭제하겠습니다.

1. 자료형

01. 숫자형

// 나머지 console.log(7 % 3); // 1 // 거듭제곱 consloe.log(2 ** 3); // 8 // 덧셈 console.log(1 + 8); // 9 // 뺄셈 console.log(6 - 7); // -1 // 곱셈 console.log(2 * 2* 2); // 8 // 나눗셈 console.log(5 / 2); // 2.5 // 사칙연산에 맞게 계산 됨 console.log(2 + 3 * 2); // 8 console.log((2 + 3) * 2); // 10

03. 문자열 기본

// 문자열 // 문자열은 같은 따옴표로 작성해야 함 '코드잇' "코드잇" console.log('코드잇');

04. 문자열 활용

console.log("He said \"I'm Iron man\""); console.log('He said "I\'m Iron man"'); console.log(`He said "I'm Iron man"`); console.log('3' + '5'); // 35

07. 불대수

AND OR NOT

명제 : 참과 거짓이 확실한 문장

AND 연산은 두개가 모두 참이어야 참

OR 연산은 둘 중 하나만 참이어도 참

NOT 은 반대로 뒤집는 역할

08. 불린형

console.log(2>1); // True console.log(2<1); // False // 등호는 항상 부등호 뒤에 써야 함 console.log(3>=2); // true console.log(3<=3); // true console.log(3===3); // true consloe.log(3!==3); // false consloe.log('Codeit' === 'Codeit'); // true console.log(true && true); // true 두 값이 모두 true 여서 true console.log(true || false); // true console.log(!true); // false console.log(!!true); // true

11. typeof 연산자

console.log(type of 101); // number console.log(type of 'Codeit'); // string console.log(type of true); // boolean function sayHello(){ console.log('Hello'); } console.log(typeof sayHello); // function

NaN = not a number

14. 형 변환 1

// String, Number, Boolean console.log('10' + '5'); // 105 cnosole.log(10 + 5); // 15 console.log(Number('10') + Number('5')); // 15 cnosole.log(String(10) + String(5)); // 105 // '', 0, NaN은 boolean 시 false가 나옴 <- falsy 라고 부름 Number(true); // 1 Number(false); // 0

console.log(4+'2'); // 42 한쪽이 문자열일 경우, 양쪽 다 문자열로 변환하여 문자열 덧셈 console.log(4+2); // 6 console.log(4-true); // 3 console.log(4*false); // 0 console.log(4/'2'); // 2 나누기 연산이기 때문에 2가 숫자로 변환되었다고 함 console.log('4'** true); // 4 true가 1이어서 console.log(4%'two') // NaN값은 어떤 값과 연산해도 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'); // 일치, 불일치(!==) false console.log(1 === true); // false console.log(1 == '1'); // 동등, 부등(!=) true console.log(1 == true); // true

18. 템플릿 문자열

// template: 일정한 틀, 형식 let year = 2018; let month = 3; let day = 11; console.log('생년월일은 ' + year + '년 ' + month + '월 ' + day + ' 일 입니다.'); console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`); // 생년월일은 2018년 3월 11일 입니다.

let myNumber = 3; function getTwice(x) { return x * 2; } console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);

20. null과 undefined

null : 값이 없다는 것을 의도적으로 표현할 때 사용 (의도적인 없음) undefined : 값이 없다는 것을 확인하는 값 (처음부터 없음)

let codeit; console.log(codeit); // undifined codeit = null; console.log(codeit) // null console.log(null == undefined); // true console.log(null === undefined); // false

2. 추상화

01. 할당 연산자

오른쪽의 연산을 왼쪽에 할당한다

let name = '코드잇'; let x = 5; x = x - 2 ; // 3

02. 복합 할당 연산자

// 다음 두 줄은 같습니다 x = x + 1; x += 1; // 다음 두 줄은 같습니다 x = x + 2; x += 2; // 다음 두 줄은 같습니다 x = x * 2; x *= 2; // 다음 두 줄은 같습니다 x = x - 3; x -= 3; // 다음 두 줄은 같습니다 x = x / 2; x /= 2; // 다음 두 줄은 같습니다 x = x % 7; x %= 7; // 다음 세 줄은 같은 의미입니다. x = x + 1; x += 1; x++; // 다음 세 줄은 같은 의미입니다. x = x - 1; x -= 1; x--;

03. 함수의 실행 순서

function sayHello() { console.log('Hello'); console.log('welcome to Codeit!'); } console.log('함수 호출 전'); console.log('sayHello'); console.log('함수 호출 후');

06. return 문 제대로 이해하기

함수 호출의 값을 되돌려 줌

함수 내부에서 return 이 나오면 함수 중단함

functino square(x) { return x * x; } conole.log(square(3));

07. return 과 console.log의 차이

function printSquare(x) { console.log(x * x); } function getSquare(x) { return x * x; } printSquare(3); // 9 getSquare(3); // 아무것도 출력되지 않음 console.log(getSquare(3)); // 9 console.log(printSquare(3)); // undifiend

09. 옵셔널 파라미터

옵셔널 파라미터 : 선택적으로 전달받는 파라미터

옵셔너 파라미터의 위치는 반드시 가장 뒷쪽으로 선언해야 함

옵셔널 파라미터를 여러개 넣을 수도 있으며, 옵셔널 파라미터 다음에 일반 파라미터만 주어지지 않으면 됨

function say(family_name, last_name, age=12, nation="korea", city="seoul") # O function say(family_name, age=12, nation="korea", city="seoul", last_name) # X

11. 변수의 scope

scope : 범위, 영역

모든 변수에는 scope가 있는데 크게 글로벌 변수, 로컬 변수로 나눌 수 있다.

// Scope: 범위, 영역 let x = 3; // 글로벌 변수, 전역변수 (어디에서나 유효한 범위) function myFunction() { // 블록문 let x = 5; // 로컬 변수, 지역변수 (블록문 내에서만 유효한 범위) console.log(x); } myFunction(); // 5 console.log(x); // 3

13. 상수

상수는 const 로 선언함

상수의 값을 변경하려고 하면 오류가 남

변수명은 대문자로 사용 (ex) MY_NUMBER

// 상수 const PI = 3.14; // 원주율 let radius = 0; // 반지름 // 원의 넓이를 계산하는 함수 function calculateArea() { return PI * radius * radius; } // 반지름에 따른 원의 넓이를 출력하는 함수 function printArea() { return `반지름이 ${radius}일 때, 원의 넓이는 ${calcaulateArea()}`; } radius = 4; console.log(printArea()); radius = 7; console.log(printArea()); radius = 8; console.log(printArea());

3. 제어문

01. if문

특정한 조건에 따라서 실행할 지 하지 않을 지를 결정

// 파라미터 height을 활용하는 checkHeight 함수를 완성하세요. function checkHeight(height) { // 여기에 코드를 작성해 주세요. if (height >=140){ console.log('탑승이 가능합니다.') } else { console.log('탑승이 불가능합니다.') } } // 테스트 코드 checkHeight(141); // 탑승이 가능합니다.

03. else if 문

06. swtich 문

조건에 일치하는 case를 찾고, break문이 없다면, 해당 조건에 일치하는 case 뒤로 전부 실행이 됨

break 문이 있다면, 조건을 만나면 뒤의 조건을 실행하지 않고 빠져나옴

if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있지만, 어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적임

switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 것과 if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야한다

switch (비교할_값) { case 조건값_1: 동작부분; break; // switch 문을 빠져나옴 case 조건값_2: 동작부분; break; default: // if else에서, else와 같은 의미 동작부분; }

let myChoice = 2; switch(myChoice) { case 1: console.log('토끼를 선택한 당신...'); break; case 2: console.log('고양이를 선택한 당신...'); break; default: console.log('1에서 4사이의 숫자를 선택해 주세요.'; }

09. for문

// 반복문 // 초기화부분은 딱 1번만 실행됨 // 조건부분이 만족되면, 추가동작부분을 실행함 for (초기화부분; 조건부분; 추가동작부분) { 동작부분 } for (let i = 1; i <= 10; i++){ console.log(`${i} 코드잇 최고!`); } // 1 코드잇 최고! // 2 코드잇 최고! ... // 10 코드잇 최고!

아래와 같이 사용하면 추가동작부분을 꼭 채우지 않아도 된다.

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

아래와 같이 사용하면 초기화 부분도 반드시 채우지 않아도 된다.

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

function printTriangle(height) { let stars = ''; for (let i = 1; i <=height; i ++) { stars = stars + '*'; console.log(stars) } } // 출력 결과 높이: 1 * 높이: 3 * ** *** 높이: 5 * ** *** **** *****

13. while 문

조건부분이 충족되지 않을 때까지 동작부분을 반복함

while (조건부분) { 동작부분 } let i = 1; while (i <= 10) { console.log(`${i} minimi 최고!`); i ++; } for (let i = 1; i <=10; i++) { console.log(`${i} minimi 최고!` ); }

let i = 30; while (i % 7 !== 0){ // 조건이 true일 때만 동작하므로, 7의 배수가 되는 순간 동작을 멈춤 i++; } conole.log(i); // 35

16. break와 continue

break 문을 만나면 반복문을 빠져나옴

let i = 1; while (i <= 10) { console.log(i); if (i === 7) { break; } i++; } for (let i = 1; i <=10; i ++){ console.log(i); if (i === 7){ break; } } // 1 2 3 4 5 6 7 1 2 3 4 5 6 7

continue는 동작을 건너띔

for (let i = 1; i <=10; i ++){ if (i % 2 === 0){ continue; } console.log(i); } // 1 3 5 7 9 let i = 1; while(i <= 10) { if (i % 2 === 0) { i ++; continue; } console.log(i); i++; }

from http://minimilab.tistory.com/69 by ccl(A) rewrite - 2021-09-24 01:01:43

Top