📖 오늘 배운 내용 - 2021.11.04

• 변수
• 데이터 타입
• 이스케이프
• Node.js 콘솔에서 입력받는 방법
• 화살표 함수
• map()
• filter()
• 오름차순 & 내림차순 정렬 방법
• splice()
• join()

 

📝 자바스크립트 변수

var name; // 변수 선언
name = "hong"; //변수 초기화
 
var name  = "hong"; // 변수 선언 및 초기화
 
name = "kim"; // 데이터 변경, var를 다시 작성할 필요가 없다.
 
console.log(name); // 변수 안에 데이터를 확인할 때 사용하는 명령어

• 변수란? 데이터를 담는 공간이다.
• 변수 선언 : 데이터를 담는 공간을 생성하는 것
• 변수 초기화 : 생성된 변수에 데이터를 전달하는 것

 

📕 변수 생성 시 주의사항

• 변수명은 숫자로 시작할 수 없음
• 변수명은 최대한 자세하게 작성
• 의미가 불명확한 단어들의 조합은 피해야 함

 

📝 데이터 타입

• String - 문자열
• Number - 숫자
• Function - 함수
• Array - 배열
• Object - 객체
• Boolean - 불린
• undefined - 정의되지 않음
• null - 널

 

📕 문자열

var st1 = "test";
var str2 = 'testtest';
var str3 = "I'm a boy"; // 큰 따옴표 안에 작은 따옴표 
var str4 = 'I\'m a boy'; // escape \

• "큰 따옴표" 또는 '작은따옴표' 안에 작성된 데이터
• 큰 따옴표 작은따옴표 혼용 불가

📕 숫자

var num1 = 3;
var num2 = -3;
var num3 = -3.12;

• 별도의 기호 없이 숫자 입력

📕 함수

// 1
var func1 = function() {
    console.log("test");
}
 
func1(); // 함수 호출
 
// 2
function func1() {
    console.log("test");
}
 
func1(); // 함수 호출

• function 키워드 사용하여 생성
• 함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미

function test(a, b) { // a,b는 매개변수
    return a * b;
}
 
test(a, b); // 인자

• 매개변수 : 인자로부터 전달받은 값이 들어가는 통로, 상황에 따라 생략 가능
• 인자 : 함수에게 전달하는 데이터
• return 함수 안에 데이터를 저장할 때 사용

📕 배열

var name = ["hong", "kim", "lee"];
console.log(name[0]); // "hong"
 
name[0] = "park";
console.log(name); // ["park", "kim", "lee"]

• 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
• 데이터의 좌표값(index)이 있다. 첫 번째 좌표값은 0
• 인덱스를 사용하여 접근 후 새로운 데이터 대입

📕 객체

var student = {
        //프로퍼티: 데이터;
    name: "name",
    age: 20,
    skills: ["JS", "HTML", "CSS"],
 
        // 메서드
    sum: function(num1, num2) {
        return num1 + num2;
    }
}
 
// 객체 데이터 출력하기
console.log(student.name);  // 객체명.프로퍼티명
console.log(student['name']); // 객체명["프로퍼티명"] 
 
// 객체 데이터 변경하기
student .name = "Park"; // name 프로퍼티의 데이터 변경

• 프로퍼티, 메서드, 데이터로 구성
• 여러 종류의 데이터 타입 삽입 가능
• 객체가 가지고 있는 함수를 메서드라고 부르고 객체가 가지고 있는 데이터를 프로퍼티라고 부른다.

📕 undefined, null

var unde; // 데이터가 없는 상태
var empty = null; // 빈 데이터 지정

• undefined : 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것), 정의되지 않았다!
• null : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정한 것)
• undefined는 데이터가 없는 상태인 반면, null은 빈 데이터가 존재하는 상태이다.

📕 Boolean

• true, false

 

📝 프로퍼티와 메서드

• 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능이다.

 

📕 문자열 프로퍼티와 메서드

let str1 = "Hello World";
 
console.log(str1.length); // 1
console.log(str1.charAt(0)); //H
console.log(str1.split(' ')); // [ "Hello", "World" ]

• str.length : 문자열 길이
• str.charAt() : n번째 문자를 추출
• str.split("") : 지정한 구분자를 이용하여 여러 개의 문자열로 나눠서 배열로 반환

📕 배열 프로퍼티와 메서드

let fruit = ["사과", "배", "포도"];
 
console.log(fruit.length); // 3
 
fruit.push("딸기"); // 배열 맨 뒤에 데이터 삽입
fruit.unshift("레몬"); // 배열 맨 앞에 데이터 삽입
console.log(fruit); // [ "레몬", "사과", "배", "포도", "딸기" ]
 
fruit.pop(); // 배열 맨 뒤 데이터 삭제
console.log(fruit); //  ["레몬", "사과", "배", "포도"]
 
fruit.shift(); // 배열 맨 앞 데이터 삭제
console.log(fruit); // ["사과", "배", "포도" ]

• array.push : 배열 맨 뒤에 데이터 삽입
• array.unshift : 배열 맨 앞에 데이터 삽입
• array.pop : 배열 맨 뒤 데이터 삭제
• array.shift : 배열 맨 앞 데이터 삭제

📕 Math의 수학 연산 메서드

console.log(Math.abs(-3)); // 3
console.log(Math.ceil(0.3)); // 1
console.log(Math.floor(10.9)); // 10
console.log(Math.random()); // 0.4822844677739284 랜덤숫자

• Math.abs() : 절댓값
• Math.ceil() : 올림
• Math.round() : 반올림
• Math.floor() : 내림
• Math.random() : 랜덤 숫자

📕 문자를 숫자로 변환하는 메서드

console.log(parseInt("20.6")); // 20
console.log(parseFloat("20.6")); // 20.6

• parseInt() : 정수 형태로 변환
• parseFloat() : 실수 형태로 변환

 

📝 이스케이프

console.log("\\")

• 역 슬래시(\\)의 출력과 \\n와 같은 이스케이프 시퀀스를 구분하기 위해서는 위와 같이 출력해야 된다.

 

📝 자바스크립트 콘솔에서 입력받는 방법

 

[Node.js] 자바스크립트 콘솔에서 입력 받는 방법

🎯 Node.js 콘솔창 입력받기 백준에서 알고리즘 문제를 풀 때 자바스크립트 입력받는 방법을 알아보자! 📝 한 줄 값 입력받기 자바스크립트에서는 readline 모듈을 이용하면 콘솔을 통해 값을 입력

lakelouise.tistory.com

 

📝 화살표 함수

• 화살표 함수는 function 키워드 대신 =>을 이용해 함수를 간편하게 생성하는 방법이다.

 

[자바스크립트] 화살표 함수 기본

화살표 함수 기본 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다. let func = (arg1, arg2, ...argN) => expression arg1..argN 를 받는 함수 func 이 만들어진다. 함수 func 는 화살표( => )..

lakelouise.tistory.com

 

[자바스크립트] 다시 보는 화살표 함수

화살표 함수 화살표 함수는 단순히 함수를 ‘짧게’ 쓰기 위한 용도로 사용되지 않는다. 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하게 되면 함수의 컨텍스트를 잃을 수 있다

lakelouise.tistory.com

 

📝 map 함수

• map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해준다.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
console.log(lengths); [5,7,6]

 

[자바스크립트] 배열과 메서드

배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에..

lakelouise.tistory.com

 

📝 filter

배열.filter((element) => element !== '제거할 요소');

• 배열 내에 특정 값을 제거하기 위해서 filter를 이용할 수 있다.
• filter를 이용해 특정 조건만 부합하는 요소를 모아 새로운 배열을 반환한다. 즉, 특정 요소를 제거하고 새로운 배열을 반환한다.

 

filter 다중 조건

const ans = input.filter(el => { 
    return el !== '제거 요소1' && el !== '제거 요소2' 
});

 

[자바스크립트] 배열과 메서드

배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에..

lakelouise.tistory.com

 

📝 자바스크립트 오름차순 정렬, 내림차순 정렬

 

[JavaScript] 배열 정렬 방법(오름차순, 내림차순)

🎯 자바스크립트 오름차순, 내림차순 정렬 방법 sort() 는 배열 내 숫자를 아스키코드 기준으로 정렬되어 정상적으로 정렬되지 않는다. 오름차순 내림차순 함수를 따로 만들어서 사용해야 된다.

lakelouise.tistory.com

 

📝 자바스크립트 배열 합 구하는 방법

 

[JavaScript] 자바스크립트 배열 합 구하는 방법

🎯 자바스크립트 배열 합 구하기 arr.reduce((a, b) => (a+b)) function solution(n) { let answer = 0; const arr = [] for (let i = 1; i < n + 1; i++) { arr.push(i) } answer = arr.reduce((a, b) => (a + b..

lakelouise.tistory.com

 

📝 splice

• splice()를 이용하면 배열의 요소를 삭제 및 추가할 수 있다..
• 의 특정 값을 추가 및 제거할 수 있다.
• 특정 인덱스의 원소를 제거할 수 있다.

array.splice( 시작인덱스, 제거될원소의수, [추가될 요소])

 

 

[자바스크립트] 배열과 메서드

배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에..

lakelouise.tistory.com

 

📝 join()

• arr.join()은 배열 요소를 모두 합친 후 하나의 문자열을 만들어준다.

 

[자바스크립트] 배열과 메서드

배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에..

lakelouise.tistory.com

 

📝 문자열에서 특정 문자 개수 세기

function count(str) {
    return str.match(/문자/g).length;
}

• match와 정규 표현식을 이용
• 문자열.match(/문자/g) : 찾으려고 하는 문자 리스트를 반환해준다.

 

💡 오늘 깨달은 것

• 이론 수업은 간단했는데 문제 모음집 풀이가 쉽지 않았다.
• 알고리즘 공부할 때 파이썬에 내장되어 있는 함수들이 JS에는 없어서 하나하나 찾아가며 문제를 풀었던 경험이 있는데, 오늘 문제집이 JS로 코테 준비하는 용도의 함수풀이 문제로 구성되어 있었다.