[JS 기초] CODEIT POWER BOOST 1주차

프로그래밍 오버뷰

01 동작 원리 

• 클라이언트(웹 브라우저)의 요청에 따라 서버가 알맞은 주소를 찾아 html, css, js코드를 클라이언트에 주면 브라우저가 이를 해석하여 사용자에게 보여줌 
• 서버는 데이터베이스에 데이터를 저장하기도함 

02 개발분야

• 웹 클라이언트

 

• 모바일 클라이언트

• 서버 

 

 

프로그래밍 시작하기 in JavaScript

프로그래밍의 원리, 기본개념에 중점을 두자 ! 

01 프로그래밍 기본개념 

세미콜론

문장 끝이 ;작성하는 습관을 들이자

 

코멘트

코멘트 쓰는 습관 들이자 ( //, /**/)

 

자료형(Data Type)

• 숫자(Number) : 정수형(Interger), 소수형( floating point) 
• 문자열(String): "Hello", 'hello'
• 불린(Boolean) : True&False , 어떤 조건에 의한 결과값으로 많이 사용 

추상화 (Abstraction)

:복잡한 것들을 의미에 맞게 단순화하는 것 = 목적 명확히, 불필요한 것 숨기기, 핵심만 드러내기

 

변수  

let 변수이름;

• 문자, 밑줄(_), 달러($)로 시작해야함
• 대문자와 소문자 구별됨
• 예약어(if, for, let ..) 사용하면 안됨 
• 의미 없는 이름 (a,b,c)등은 좋지 않음
• 너무 추상적인 이름은 좋지 않음 
• camelCase : 첫번째글자는 소문자로하고 띄어쓰기가 있는 각 단어의 첫문자를 대문자로 표기하면 좋음

vscode 들여쓰기 space 2칸으로 설정하는 법 
Step1: 상단의 검색창에서 editor tab 이라고 검색한 다음.
Step2: Editor: Detect Indentation 은 체크 해제
Step3: Editor: Tab Size 는 2로 변경
Step4: 기본 값이라 변경할 필요는 없지만 Editor: Insert Spaces 부분이 체크 되어 있는지만 한 번 확인

 

함수 

복잡한 내용은 함수 내부에 숨기고 핵심내용은 함수 이름으로 드러냄 

//함수 정의
function 함수이름(){
  명령;
  명령;
};

//함수 호출
함수이름();

 

파라미터

함수 내에서 변수처럼 사용 가능 

function 함수이름(파라미터){
  console.log(파라미터)
};

함수이름(값);

 

여러 개의 파라미터

function 함수이름(파라미터, 파라미터){
  console.log(파라미터)
}

함수이름(값);

 

retrun문

함수가 실행된 자리에 값을 돌려줄 수 있음 

function getTwo(){
  return 2;
};

console.log(getTwo());

 

프로그래밍 핵심 개념 in JavaScript

01 자료형

숫자형 

거듭제곱은 곱셈보다 우선순위가 높음

//거듭제곱 2^3
console.log(2**3)

 

문자열

에디터가 자동으로 닫는마침표를 찍어줌

 

console.log("I'm Iron man");
console.log(\'I\'m Iron man\');
console.log(`He said "I'm Iron man"`);

 

불대수

일상적인 논리를 수학으로 표현하는 것

• AND 연산
• OR 연산 
• NOT 연산 

불린형

console.log(3 === 3) //일치
console.log(3 !== 3) //불일치

 

typeof 연산자

해당 자료형을 문자열로 되돌려줌 => 다른 연산과 함께 사용할 때는 연산의 우선순위를 고려해야함

console.log(typeof 1);

console.log(typeof 4 -2); // number-2 => NaN

 

형변환(Type Converesion)

처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것 

boolean도 형변환 가능 => 숫자로 바꾸면 1(True)과 0(False)으로 표현

console.log(Number('10') + Number('5')); //15
console.log(String(10) + String(5)); //105

 

js는 규칙에 따라 자동으로 형변환 해줌 

• 숫자와 문자를 연산할 때 +는 문자로 형변환 후 연결
• 나머지 연산자는 문자를 숫자로 형변환 후 연산
• 불린도 숫자로 형변환하여 연산 
• 관계 연산자도 숫자 연산과 동일한 규칙 적용 
• ===은 형변환이 일어나지 않고 ==는 형변환이 일어남 

템플릿 문자열

특정한 형식을 가진 문자열 

console.log(`${변수명}입니다.`);

 

null과 undefined

null은 값이 없다는 것을 의도적으로 표현할 때 사용하는 값 

undefined는 값이 없다는 것을 코드를 실행하면서 확인하는 값

 

02 추상화

할당 연산자

할당 연산자의 오른쪽부터 계산하여 왼쪽 변수에 할당 

 

return과 console.log의 차이 

function printSquare(x){
  console.log(x*x);
};

console.log(printSquare(3)); //undefined

 

옵셔널 파라미터 

파라미터 있는 함수를 호출할 때 아무 값도 전달하지 않으면 undefined로 출력됨 

function introduce(nation='한국'){
  console.log(`국적은 ${nation}입니다.`);
};

introduce('미국');// 국적은 미국입니다.
introduce(); //국적은 한국입니다.

 

변수의 scope

변수에는 유효범위가 있어서 그 범위를 벗어나면 오류가 남 

함수와 같이 블록문(중괄호로 감싸진 문) 안에 있는 로컬 변수들은 블록문 안에서만 유효함 

 

상수

절대 변하지 않고 항상 일정한 값 , 선언할 때 값을 할당해야 오류가 나지 않음 

대문자와 밑줄로 작성 for 변수와 구분을 쉽게 하기 위해 

ex) pi

const PI = 3.14;

 

 

03 제어문

if문

//if문
if(조건부분){
  동작부분
}

 

else if문

if(조건){
  동작
}else if(조건){
  동작
}else{
  동작
}

 

switch문

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

 

for 반복문

for(초기화부분;조건부분;추가동작부분){
  동작부분
}

• 추가동작 부분을 꼭 채울 필요는 없음
• 초기화 부분에서 생성한 변수는 for문의 로컬 변수 
• 초기화 부분도 반드시 채울 필요는 없음 

while 반복문

while(조건부분){
  동작부분
}

글로벌변수로 조건비교할 때에는 while문을 쓰는 것이 좋음

 

break와 continue

continue문 만나면 그 뒤 문장은 실행하지 않고 건너뜀

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

//홀수만 출력

 

프로그래밍과 데이터 in JavaScript

01객체

key-value 쌍 = 속성(property)

//자료형: object
let codeit={
  brandName: '코드잇',
  bornYear: 2017
  isVeryNice: true
}

 

객체에서 데이터 접근하기

1. 점표기법

cosnsole.log(codeit.bornYear);

 

2. 대괄호표기법

console.log(codeit['born Year']);

 

객체 다루기 

해당 속성에 접근해서 값을 변경하면 됨

//수정
console.log(codeit.ceo);
codeit.ceo = '강영훈';
console.log(codeit.ceo);

//삭제
delete codeit.worstCourse;

//in 연산자 : property이름 in 객체 => boolean형태로 결과 제공
console.log('name' in codeit);

 

객체와 메소드

메소드는 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있음 

let greetings = {
  sayHello: function{name}{
    console.log(`Hello ${name}`);
  }
}

greetings.sayHello('codeit');

 

for...in반복문

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

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

• 객체의 preoperty이름이 숫자이면 오름차순으로 정렬되어 출력됨
• 나머지는 추가한 순서대로 정렬

02배열

03 자료형 심화

04 과제로 복습하기