[TIL] 엘리스 SW 엔지니어 트랙 Day 009

📖 오늘 배운 내용 - 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로 코테 준비하는 용도의 함수풀이 문제로 구성되어 있었다.
'프로그래밍 > Today I Learned' 카테고리의 다른 글
[TIL] 엘리스 SW 엔지니어 트랙 Day 011 (0) | 2021.11.07 |
---|---|
[TIL] 엘리스 SW 엔지니어 트랙 Day 010 (0) | 2021.11.06 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 008 (0) | 2021.11.03 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 007 (0) | 2021.11.03 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 006 (0) | 2021.10.31 |
댓글
이 글 공유하기
다른 글
-
[TIL] 엘리스 SW 엔지니어 트랙 Day 011
[TIL] 엘리스 SW 엔지니어 트랙 Day 011
2021.11.07 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 010
[TIL] 엘리스 SW 엔지니어 트랙 Day 010
2021.11.06 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 008
[TIL] 엘리스 SW 엔지니어 트랙 Day 008
2021.11.03 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 007
[TIL] 엘리스 SW 엔지니어 트랙 Day 007
2021.11.03
댓글을 사용할 수 없습니다.