[새싹X코딩온] 풀스택 웹 개발자 과정 2주차 회고 | Javascript(1)

Sohee Kwon·2023년 9월 22일
JavaScriptSeSAC

[SeSAC] 풀스택 웹 개발자 과정

목록 보기
5/17

1. JavaScript 기초

1-1. Javascript란?

📢 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어

1-2. Javascript 참조 방식

✔️ 내장 방식

<script>
	alert("hello");
</script>

html 페이지 안에 내장된 방식으로 위치는 어디서나 사용이 가능하다❕

✔️ 링크 방식

Javascript 파일을 따로 만들어서 링크하는 방식

<script src="./index.js"></script>

링크 방식 또한 위치는 상관없다

1-3. Javascript 기본 문법

(1) 화면 출력

  • console.log("text"); 브라우저 콘솔 화면에 출력
  • alert("text"); 브라우저 안내메시지로 출력

(2) 변수( var / let / const )

  • var : 재선언 ⭕️, 재할당 ⭕️
var number = 4;	// 선언과 할당
var number;		// 재선언
number = 5;		// 재할당

💡 var 사용은 지양해야 한다!

재선언은 같은 공간을 가르키며, 의도치 않은 에러를 발생시킬 수 있기 때문이다.

  • let : 재선언 ❌, 재할당 ⭕️
let number = 4;
number = 5;
  • const : 재선언 ❌, 재할당 ❌
    - 선언할 때 반드시 초기화를 해야 한다.
const number = 4;

(3) 자료형

✔️ 기본형 (Primitive)

  • 문자열 String
    let name = "홍길동";
  • 숫자 Number
    let number = 123;
    let opacity = 0.7;
  • 참 거짓 데이터 Boolean
    let checked = true;
  • 미할당 데이터 undefined
let undef;
console.log(undef) 	// undefined 출력
  • 빈 데이터 null
    let empty = null

🛠️ 문자 + 변수를 동시에 쓰고 싶을 때!

  • console.log("문자", 변수, "문자")
  • console.log("문자" + 변수 + "문자")
  • console.log("문자 ${변수} 문자")

✔️ 객체 (Object) : 기본형이 아닌 것들

  • 배열 Array
let fruits = ["orange", "apple", "banana"]

console.log(fruits)	// ["orange", "apple", "banana"] 출력
console.log(fruits[1]) // apple 출력
  • 데이터 꾸러미 Object
let cat = {
	name: "나비",
    age: 1,
    mew: function() {}
};

(4) 자료형을 알려주는 typeof

console.log(typeof 3); // number 출력

(5) 형 변환

✔️ 문자열로

  • String() : 어떤 형태이든 문자로 형변환
    String(true);

  • toString() : null, undefined 형변화 시 오류
    a.toString();
    (false).toString();

✔️ 정수로

  • Number() : boolean과 숫자 타입의 문자열만 형변환, 소수점 표시 가능
    Number(true) // 1
    Number('10')

  • parseInt() : 진법 표기 가능
    parseInt('10', 10);

(6) 연산자

  • 대입 연산자: =
  • 비교 연산자: ==, !=, ===, !==, >, >=, <, <=
  • 산술 연산자: +, -, *, /, %, **(거듭제곱)
  • 논리 연산자: !, &&, ||
  • 증가 연산자: ++
  • 감소 연산지: --

💡 비교 연산자 ==, === 둘의 차이는?

=== 는 자료형까지 동일해야 한다
ex) "123" === 123 // false

(7) 함수

함수는 특정 작업을 수행하기 위해 독립적으로 설계된 코드 집합이다.

✔️ 함수 선언 방식

  • 명시적 함수 선언 function hello () { ... }
  • 함수 표현식 let hello = function () { ... }

1-4. 조건문

📢 특정 조건일 때만 실행하고 싶은 구문이 있을 때 사용한다.

(1) if문

  • if문에서 if, else if, else가 포함될 수 있으며 이 중 if는 반드시 있어야 한다.
  • if/else if/if 형태
if(조건 1) {
	// 조건 1이 참일 때
}
else if(조건 2) {
	// 조건 1이 거짓이고 조건 2가 참일 때
}
else {
	// 조건1, 2 모두 거짓일 때
}
  • if문 안에 if문이 있는 if 중첩도 가능하다

(2) switch문

  • if문과 달리 소괄호 안에 값이 나오는 변수를 사용
  • break와 default를 사용한다.
switch (number) {
	case "a":
    	console.log("1");
        break;	// break를 만나면 switch를 탈출한다
    case "b":
    	console.log("2");
        break;
    default:	// 위에 조건이 모두 아닌 경우
    	console.log("모르겠어요");
        break;
}

(3) 삼항 연산자

  • if문을 한 줄로 표현 가능하다
  • (조건식) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드)
    name == "lily" ? console.log("안녕하세요") : console.log("누구세요?")

1-5. 반복문

📢 특정 코드를 반복하고 싶을 때 사용한다

(1) for문

  • for문 기본형식
for(초기값; 조건문; 증감문){
	실행 문장(반복하고 싶은 코드)
}
  • for문도 중첩이 가능

(2) while문

  • while문 기본형식
while(조건){
	// 조건이 true일 경우 실행
	실행 문장(반복하고 싶은 코드)
}
  • for 문과는 달리 값을 제어하는 구문이 기본적으로 포함이 되어 있지 않기 때문에 무한 루프 가능

💡 for문 while문 차이

for문 : 반복할 횟수를 특정할 수 있을 때 사용
while문 : 반복할 횟수를 특정할 수 없을 때 사용(특정할 수 있을 때도 사용 가능)

  • do-while문
    - while문과는 다르게 조건에 관계 없이 처음 한 번은 무조건 실행!
do{
	// 조건이 참일 때 실행할 코드
} while(조건)

(3) break & continue

✔️ break : 반복문을 멈추고 빠져나감 break;

✔️ continue : 반복문을 이번 반복 회차를 스킵하고 다음 반복 회차로 진행 continue;

(4) for / of 문 (배열에서 사용)

  • 뒤에 있는 배열의 원소를 하나하나 탐색하면서 그 값 자체를 앞의 변수에 담는다.

  • for(let 변수이름 of 배열) { ... }

let fruits = ["apple", "banana", "grape"];
for(let fruit of fruits){
	console.log(fruit);
}

[출력]
apple
banana
grape

1-5. 메소드(method)

함수 : (재사용 가능성이 있는) 특정 기능을 묶어둠.
메소드 : 객체 내에서 선언되어있는 함수.

✔️ 배열 관련 내장 메소드

  • arr.forEach() : 배열의 원소를 순차적으로 탐색함
let fruits2 = ["apple", "banana", "grape"];
fruits2.forEach((fruit, index, array)=>{
	// 첫번째 매개변수 : 탐색된 원소
	// 두번째 매개변수 : 인덱스
	// 세번째 매개변수 : 배열(fruits2의 내용)
	console.log(fruit);
	console.log(index);
	console.log(array);
})
  • arr.filter() : 배열 내부에서 조건에 부합하는 요소만 찾아서 "배열로" 변환
let arr = [1, 2, 3, 4, 5];
let arr_filter = arr.filter((a)=>{
	return a > 3;
})
console.log(arr_filter);

[출력]
[4, 5]
  • arr.find() : 배열 내부에서 조건에 부합하는 첫번째요소를 찾아서 "값"으로 변환
  • arr.map() : 익명함수에 쓰여진 연산결과를 새로운 배열로 변환
  • arr.push() : 배열 끝에 추가
  • arr.pop() : 배열 끝 요소 제거
  • arr.shift(), arr.unshift() : 배열 앞에 제거/추가
  • arr.include(요소) : 배열에 해당 요소가 있는지 확인
  • arr.length : 배열의 길이 반환
  • arr.indexOf() : 매개변수에 해당하는 배열의 인덱스를 받아옴. 단, 매개변수로 문자열만 넣을 수 있는 것은 아님!
  • arr.reverse() : 배열 순서 뒤집어서 반환
  • arr.join() : join 안의 문자열 기준으로 문자열로 병합

✔️ 문자열 관련 내장 메소드

  • str.length : 문자열의 길이를 반환(공백포함)
  • str.toUpperCase() / str.toLowerCase() : 문자열 전체를 대문자, 혹은 소문자로 변경
  • str.indexOf(‘’) : 매개변수로 문자열을 받아서 몇번째 인덱스인지 숫자 반환
  • str.slice(startIdx[,endIdx]) : start 부터 end-1 까지 슬라이싱, 변수로 음수값도 가능
  • str.replace(문자열1, 문자열2) :문자열1을 문자열2로 변경
  • str.replaceAll(문자열1, 문자열2) : 문자열1을 전부찾아서 문자열2로 바꿔줌
  • str.repeat(n) : 문자열에 대해 n번 반복
  • str.trim() : 문자열의 양끝 공백 없애기
  • str.split() : 매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장

✔️ 메소드 체이닝

📢 여러 메소드를 연결해서 사용하는 개념 (단, 메소드가 반환값을 가지고 있는 경우만 가능)

  • "hello".split("").reverse() -> [‘o’,’l’,’l’,’e’,’h’]

  • "hello".split("").reverse()).join(“”) -> olleh

자바스크립트는 처음 사용해 봤는데 내가 지금까지 사용했던 언어들 보다 확실히 쉬운 것 같다
내가 지금까지 사용해 본 언어들(C, C++, JAVA...) 나열해보니 전부 강한 타입 언어였네...ㅎㅎ
그래서 그런지 나도 모르게 무의식적으로 int를 적고있는 나를 발견한다😆😆😆
이번주부터 코테 러닝메이트를 진행하기로 했는데😱 (나 할 수 있겠지...?)



* 이 문서는 SeSAC X 코딩온 풀스택 웹 개발자 과정 5, 6회차 강의자료 내용을 일부 포함하고 있습니다. *
profile
Sohee Kwon
개발자 성장로그
이전 포스트

[새싹X코딩온] 풀스택 웹 개발자 과정 2주차 회고 | CSS(2)

0개의 댓글