자바스크립트 기초 강좌 : 100분 완성

GUNHEE LEE·2024년 2월 5일
js
0

JS

목록 보기
1/1
post-thumbnail

240204 - 240205
자바스크립트 기초 강좌 : 100분 완성 강의를 수강하고 공부한 내용을 정리한 것입니다.

240204

출력 함수

  • alert(): 브라우저 경고창 출력하기
  • console.log(): 콘솔창에 출력하기

변수의 자료형

  • let, const
  • 차이점: let은 변수에 다른 값을 재할당할 수 있지만, const는 상수로 한 번만 선언이 가능하며 값을 바꿀 수도 없다.

변수의 약속

    1. 변수는 문자와 숫자, $만 사용한다.
    1. 첫 글자는 숫자가 될 수 없다.
    1. 예약어는 사용할 수 없다.
    1. 가급적 상수는 대문자로 작성한다.
    1. 변수명은 읽기 쉽고 이해하기 쉽게 선언한다.

자료형

  • \뒤에 선언하면 특수문자로 인식한다.
  • ₩벡틱은 문자를 변수로 표현해줄 때 효과적이다.
    • ${변수명}
  • 숫자형은 사칙연산이 가능하다.
  • NaN = Not A Number
  • boolean = true, false
  • null = 값이 존재하지 않는다 / undefined = 값이 정의되지 않았다.
  • typeof 연산자는 변수의 자료형을 출력한다.
  • 숫자형을 문자형과 더할 수 있다. 다만 이 경우, 숫자형이 문자형으로 변환됨에 주의하자.

객체형

  • null ≠ 객체

주석

  • //

대화상자

  • alert, prompt, confirm
  • alert() = 일방적인 알림 용도
  • prompt() = 사용자에게 메세지를 보여주고, 어떤 값을 입력받을 때 사용한다.
    • 취소를 입력하면 null이 입력된다.
    • 인수 = 함수의 입력에 들어가는 값
    • 두 개 이상의 인수가 들어가면 마지막 인수가 디폴트 인수가 된다. 안내 사항을 전달할 때 좋다.
    • prompt()로 입력받은 값은 문자형으로 입력된다.
  • confirm() = 사용자로부터 확인 받을 때 사용한다.
    • alert()와 다른 점은 취소버튼이 추가되어 있음.

대화상자 예시코드

const name = prompt("메세지");
alert("안녕하세요" + name + "님.");
alert(`안녕하세요 ${name}님.`);

기본 알림창의 단점

  • 스크립트가 일시정지된다.
  • 스타일링이 불가능하다. 디자이너가 싫어한다.

자료형 변환

  • String() = 문자형으로 변환
  • Nubmer() = 숫자형으로 변환
    • true 와 false는 Number()로 형변환하면 1과 0이 나온다.
  • 사칙연산에는 자동형변환이 적용된다. 원인을 찾기 힘드니까 의도를 가지고 명시적 형변환을 해주는 것이 좋다.

암기: 자료형 주의사항

Number(null) // 0
Number(undefined) // NaN
        
Number(0) // false
Number('0') // true
Number('') // false
Number(' ') // true

연산자

  • 증감연산자
    • 앞에 붙이면 증가한 값을 반영, 뒤에 붙이면 값을 반영한 후 증가. C랑 똑같다.
  • === : 일치연산자, 자료형까지 검사한다. 동등연산자보다 일치연산자로 검사하는게 좋다.

조건문

if(조건문의 내용){
	조건을 만족하면 수행하는 부분
}

논리연산자

  • || : OR, 첫 번째 true를 발견하는 즉시, 평가를 멈춘다.
  • && : AND, 첫 번째 false를 발견하는 즉시, 평가를 멈춘다.
  • ! : NOT
  • 어떤 평가로 순서를 배치하는지도 중요하다. 성능 최적화를 위함.

반복문

// for
for(let i;i < 10;i++){
	// 반복할 코드
}

// while
let i = 0;
while(i<10){
	// code
	i++;
}

// do while
let i = 0;
do{
// code
	i++;
} while(i<10)

반복문 탈출 - break, continue

  • break = 멈추고 반복문 탈출
  • continue = 멈추고 다음 반복문

개발자는 항상 좀 더 쉽게 일하고, 코드를 줄이기 위해 노력해야 한다. 그래야 성능도 좋아진다.

Switch 문

  • if else 를 알고 있으면 몰라도 된다.
  • case가 많을 때 사용하기 유용하다는 것만 알면된다.
switch(평가){
	case A:
	// A일 때 코드
	case B:
	// B일 때 코드
	default:
	// code
}
  • switch는 case 이후 모든 문장을 출력한다. 각 case마다 break를 걸어주자.
  • case에 없는 입력값이 주어지면 제대로 동작한 건지, 오류가 난건지 사용자 입장에서 모르기 때문에 default를 사용한다.

함수(function)

  • 자주 사용하거나 여러 곳에서 사용하는 코드라면 하나로 만든 다음 재사용한다. 중복되는 코드도 줄어들고 재사용성도 좋아진다.
  • 브라우저 내장함수: console, alert, confirm
// 함수 선언 예시
function sayHello(name){
	console.log(`Hello, ${name}`);
}
  • 매개변수가 여러개라면 쉼표로 구분할 수 있다.
  • let으로 선언한 변수는 다시 let으로 선언할 수 없다.

240205

  • 전역변수와 지역변수는 서로 간섭을 받지 않는다.
  • 함수 선언시 매개변수의 디폴트 값을 선언해줄 수 있다.
// default value

function sayHello(name = 'friend'){
	let msg = `Hello, ${name}`
	console.log(msg)
}

sayHello() 
// result = friend
sayHello('Jane')
// result = Jane
// return으로 값 반환
function add(num1, num2){
	return num1 + num2;
}

const result = add(2,3);
console.log(result);
// 5
  • return 문이 쓰이거나 return만 단독으로 쓰이면, undefined를 반환한다.
  • return 만 선언해서 함수를 종료하는 목적으로도 사용한다.
  • 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍한다.

함수 선언문 vs 함수 표현식

  • 순차적으로 코드를 읽으면서 즉시 결과를 반환하는 언어를 인터프리터 언어라고 한다.
  • 함수를 함수 선언문으로 작성하면 어느 위치에서든 함수를 선언하고 사용할 수 있다.
  • 자바스크립트 내부 알고리즘은 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둔다. 함수의 사용 가능 범위는 코드보다 높아진다. 이를 Hoisting이라고 한다.
  • 함수 표현식은 코드에 도달했을 때 함수가 생성된다. 함수 표현식으로 함수를 작성할 경우, 함수 표현식 이후에만 해당 함수를 사용할 수 있다.
  • 함수 선언문이 함수 표현식보다 더 자유롭다.

화살표 함수(arrow function)

  • 한 줄씩 존재하는 건 대부분 생략 가능하다.
  • return 문 하나만 작성되는 경우, 소괄호로 나타낼 수 있다.
// 화살표 함수 변환 전
const sayHello = function(name) {
}
// 화살표 함수 변환 후
const sayHello = (name) => {
}

// 전
const add = function(num1, num2) {
	const result = num1 + num2;
	return result;
}

// 후
const add = (num1, num2) => num1 + num2;
  • 화살표 함수는 ES6 이후 활발하게 사용되고 있기 때문에 필수로 알고 있어야 한다.

객체(object)

  • 객체는 key와 value인 property로 구분된다. 파이썬의 dictionary와 비슷하다.
  • 각 property는 쉼표로 구분한다. 마지막 쉼표는 없어도 무방하지만 있는게 수정이 용이하다.
  • 접근, 추가, 삭제 
// Object
const superman = {
	name:'clark';
	age;33,
}

// 접근
superman.name // 'clark'
superman['age'] // 33

// 추가
superman.gender = 'male';
superman['haircolor'] = 'black';

// 삭제
delete superman.haircolor;
  • in 연산자를 사용하면 객체에 특정 property가 존재하는지 검사할 수 있다.
  • for(let key in object) {} 로 선언한다.
// for in 문 예제
const Mike = {
	name: 'Mike',
	age: 33,
}

for(x in Mike){
	console.log(x); // 'name', 'age'
	console.log(Mike[x]); // 'Mike', 33
}

객체 method / this

  • 객체 property로 할당된 함수를 method라고 부른다. (C)
  • fly: function() {} 를 fly() {} 처럼 단축 구문으로도 작성할 수 있다.
  • 객체와 method의 관계 (this)
  • 내 자신의 property를 method에 넣고 싶다면 this를 사용한다.
    // 객체 지향 프로그래밍
sayHello: function() {
	console.log('Hello, I'm ${this.name}');
}

let boy = {
	name: 'Mike',
	sayHello(),
}

let girl = {
	name: 'Jane',
	sayHello(),
}
    • this는 런타임에 결정된다.
    • 주의: 화살표 함수는 this를 가지지 않는다.
    • 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다. (전역객체를 가리킨다.)
    • this가 가장 어렵다.
    • 메소드에서는 this를 활용하는데 가장 좋다.
    • 메소드는 화살표 함수로 작성하는 것을 지양한다.

Array

선언

  • let 배열명 = [요소1, 요소2, … 요소n개];

접근

  • 배열명.[index값]

수정

  • 배열명.[index값] = ‘수정값’;

특징

  • 숫자, 문자, 함수, 객체 포함 가능

길이

  • 배열명.length;

뒤에 추가

  • 배열명.push(추가요소);

뒤에 제거

  • 배열명.pop();

앞에 추가

  • 배열명.unshift(추가요소);

앞에 제거

  • 배열명.shift();

추가(push, unshift)의 경우 여러 개를 추가할 수도 있다.

반복문 for

  • for(let index=0;index<days.length;index++){
    console.log(days[index])
    }

for of: for문 보다 간단하지만 인덱스를 얻지 못한다는 단점이 있다.

정리

강의로 학습한 내용은 다음과 같다.

  • 변수, 자료형 이해
  • console로 출력 확인
  • alert, prompt, confirm
  • 연산자, 조건문, 반복문, 함수와 객체, 배열에 대해 간단하게 학습함.
profile
GUNHEE LEE
새싹 개발자

0개의 댓글