자바스크립트¶

최근에 웹은 자기자신을 홍보하는 용도로 많이사용되어지고 있습니다. 초기 웹과 비교해서 현재 많은 발전이 이루어져 왔습니다.

웹사이트를 만들고 싶다면 반드시 배워야 하는 프로그래밍 언어라고 할 수 있습니다.

2015년에는 기존에 있는 인식을 뒤집을 정도로 현재 인기가 많이 사용되어 지고 있습니다. 그래서 점점 범용적인 부분으로 활용이 많아지게 되었습니다.

세미콜론을 통해 문장을 구분 할 수 있다. 처음에는 세미콜론을 의식적으로 사용하자

개발자들 사이에서 세미콜론을 쓰지말자 그냥 명시적으로 사용하자 의견 논란이 있음

console.log¶

파이썬의 print 함수로 생각하면 된다.

코멘트 - 주석처리¶

'//' 코드에 인식하지 안도록 하는 것 - 줄바꿈을 하면 풀리기 때문에 '/* * /' 별과 별 사이에 코멘트를 적으면 줄바꿈이 일어나더라도 괜찮다.

추상화¶

복잡한 것들을 목적에 맞게 단순화 하는 것

변수 선언 var let const

작명가이드¶

camelCase 변수명에는 띄어쓰기가 불가능 하기 때문에 띄어쓰기를 대신 할 무언가가 필요합니다. 그 중 하나가 camelCase라는 것이다. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표시

예시

let bad_variable_name; //비추천 방식 
let goodVariableName;  // 추천 방식

함수¶

function 함수이름() {작성할 명령들을 작성}

console.log(파라미터) - 한국어로 매개변수

and연산 && or연산 || not연산 !

typeof 연산자' - 파이썬의 type 함수¶

typeof 값 값을 확인한 후에 문자열로 리턴함 typeof도 연산자이기 때문에 다른 연산자와 같이 사용할때 주의해서 사용해야 한다.

형변환 시에¶

String, Number, Boolean

falsy = 빈문자, 0, NaN - 빈문자 불린 값

증가 감소 연산자¶

x = x+ 1 x += 1 x++

x = x -1 x -=1 x--

if문¶

if (조건){
실행문;
} else if (조건){
실행문
} else {
실행문}

switch 문¶

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

switch 어떤 대상과 조건값이 일치하는지를 확인하고 그 결과에 따라 다른 동작이 필요한 경우 사용 switch문은 break문을 만나기 전까지 계속 반복해서 조건문을 진행한다.

if문과 switch문¶

어떤 대상과 조건값이 일치하는 가를 확인 하는 경우에는 if문으로도 충분히 가능하다. 그럼 두 구문의 차이는 어떤 것일까?

if문을 사용하고자 할때에는 더욱 넓은 범위를 만족하는 조건을 사용해야 할 때 좋고 특정한 값에 일치하고자 할때에는 switch문을 사용하는 것이 더욱 좋다.

한 가지 주의할 점은 조건식에서 등호를 반드식 3개를 입력해 주어야 한다는 점이다. switch문은 암시적 형 변환을 허용하지 않기 때문입니다.

쉽게 이야기 하자면, 조건문을 걸때 문자열 2,와 숫자열2를 넣게 되면 switch문을 실행 했을 때에는 바로 default문이 실행이 되고,

if문을 사용해서 조건을 걸 경우 등호를 2개를 쓰면 문자열, 숫자열 구분이 없어지고, 등호를 3개를 쓰게 되면 엄격하게 구분을 하기 때문에 등호는 무조건 3개를 사용한다.

for문¶

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

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

초기화 부분은 단 한번만 실행이 된다. for문의 i는 로컬변수라서 for문 바깥에서 사용하려고 하면 오류가 난다. 추가 동작 부분을 꼭 채울 필요는 없다. 초기화 부분을 꼭 채울 필요는 없다. 하지만 ;은 생략해서는 안된다.

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

반드시 for문의 소괄호 안에는 세미콜론이 두 개가 들어가 있어야 한다.

객체¶

자바스크립트의 모든 것이 다 객체다.
{
brandName : '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null
}
key(Property Name) - 문자열 따옴표를 생략하더라도 문자열을 자동으로 인식
- 만약 따옴표를 붙히지 않으면 첫 번째 글자는 반드시, 문자 밑줄 달러 기호 중 하나로 시작
- 띄어쓰기 금지!
- 하이픈 금지!: brandName,bornTear, isVeryNice, worstCourse value(Property Value): '코드잇', 2017, true, null

key와 value 값을 합쳐서 property 라고 합니다.

합니다.

let codeit = { 'name': '코드잇', 'bornYear' : 2017, 'isVeryCourse': true, 'worstCourse': null, 'bestCourse' : { 'title': '자바스크립트 프로그래밍 기초', 'language' : 'JavaScript' } };

객체 접근하기위해서는 점 표기법 : 가장 기본적이고 console.log(codeit.bornYear) - 따옴표를 생략하는 객체에 접근 하지 못한다. 대괄호 표기법 console.log(codeit['name'])

만약 존재하지 않은 프로퍼티에 접근하려고 하면 undefined가 나옵니다.

연관성 있는 여러 함수들을 묶는다. 이때도 객체를 사용하면 된다.

메서드¶

어떤 객체의 고유한 동작으로써 함수에 의미를 부여할 수 있다.

for in 문의 순서¶

for in 반복문이 실행될 때 따로 정해진 순서 없이 객체에 추가한 순서를 따라서 반복문이 수행된걸 볼 수 있습니다.

정수형 key값을 먼저 정렬한 뒤에 나머지 프로퍼티들을 추가한 순서대로 정렬하는 특징이 있다. 그래서 정수형 프로퍼티 네임은 가급적이면 사용하지 않는 것을 추천한다.

member = ['가','나','다','라','마']¶

배열¶

배열 메소드¶

1. splice(startIndex, deleteCount, item)¶

배열의 데이터 삭제하기 객체를 삭제 할때 처럼 delete를 사용하게 되면 배열의 데이터가 삭제는 되지만 empty라는 부분이 남게 된다. 그래서 이를 방지하기 위해 splice를 사용한다.

splice는 전달된 값 이후의 모든 값을 지우게 된다. members.splice(1)이라고 하면 ['가'] 출력이 된다. 그래서 splice('삭제를 시작할 인덱스', '몇개를 지울것인지','삭제할 자리에 추가할 값')형식으로 사용하면 된다.

사용예시 배열의 첫 요소를 삭제 members.splice(0,1) 배열의 마지막 요소를 삭제 members.splice(members.length-1,1) 배열의 첫 요소로 값 추가 members.splice(0,0, 'NiceCodeit'); 배열의 마지막 요소로 값 추가 members.splice(memberslength,0,'Hicodeit')

2. shift - 배열의 첫 요소를 삭제¶

members.shift() 맨 앞의 값을 삭제하고 배열을 뒤로 미룬다.

3.pop() - 배열의 마지막 요소를 삭제¶

members.pop()

4. unshift 배열의 첫 요소로 값 추가¶

members.unshift()

5. push() - 배열의 마지막 요소로 값을 추가¶

members.push()

for .... of 반복문¶

for (변수 of 배열) { 동작부분; }

for in, for of 반복문의 차이¶

for in - 객체에서 key를 뽑아서 사용 for of - 배열에서 각각 value를 뽑아서 사용한다.

기본형과 참조형¶

기본형(Primitive Type) - Number, String, Boolean, Null, Undefined - 변수 = 값

참조형 (Reference Type) - 객체, 배열 - 변수 = 주소값

변수의 객체값을 할당한 경우에는 객체값이 어딘가에 만들어지고 변수에는 그 주소가 만들어 진다.

let x = {name = '1111'} let y = x;

y.birt = 2222

이런식으로 만들어 준 뒤 console.log를 x,y를 통해 출력하게 되면 y에 출력을 하더라도 x도 같이 변하게 된다.

변수는 const으로 선언하세요 왜? ----? 좀 더 공부가 필요 const와 let의 큰 차이는 재할당의 가능 여부 이다.

객체는 변수에 주소값이 저장이 된다. 할당연산자는 변수가 가진 주소값이 변경되는 것이 아니기 때문에 객체의 값이 변할 수 도 있다.

var¶

예전에는 var을 사용하기도 했다. 하지만 let과 const와는 다르게 중복선언이 가능하기 때문에 길고 복잡한 코드를 작성할 때 실수를 할 가능성이 커지고, 상황에 따라서는 치명적인 오류가 발생할 수 있습니다.

var는 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할을 하게 될 수 있다는 것이다.

Hoisting이 가능하다. var변수는 함수 스코프를 기준으로 선언되기 때문에 이전에도 변수에 접근이 가능하다.

코드를 짜고 사용함에 있어 혼란을 야기 하는 이 세가지 특성 때문에 현재 var보다는 const와 let이 많이 사용이 되고 있습니다.

작성자: 이동근

작성일: 2021-07-18