JavaScript①

정혜지·2022년 8월 1일
0
post-thumbnail

JavaScript

ECMA 표준화 ES6 https://www.ecma-international.org/
V8 자바스크립트 엔진(구글) https://v8.dev/
브라우저 이외에서도 자바스크립트가 동작하도록 하는 환경

기본문법

let var1 = 1;
키워드 - 식별자 - 리터럴 - 구분자
ECMA에서는 끝에 세미콜론을 붙이는 것을 권장

식별자

영문자(대소문자), 숫자, (언더스코어), $(달러) 사용 가능
숫자로는 시작할 수 없다. ❌ let 1var = 1; //error
식별자는 값이 아닌 메모리 주소를 기억 ⭐

표기법

camelCase ⭐원칙
ParcelCase : (특수 케이스)

JS 적용

  • <script>태그
  • 외부 script파일(.js)
  • defer async

변수

데이터를 저장하고 참조(사용)하는 데이터 이름
키워드 : var / let / const

JS 타입

원시 타입 / 객체타입

  • 원시타입
    Number : JS에서는 정수와 실수를 구분하지 않음
    String : 리터럴 "" 큰따옴표 / '' 작은따옴표
    Boolean : true/false
    Undefined : 값이 할당되지 않은 상태
    Null : 어느 자료형에도 속하지 않는 데이터가 존재하지 않는 상태
    Symbol : 변경 불가능한 원시 타입, 이름의 충돌이 없는 객체의 유일한 프로퍼티 키 생성시
  • 객체 타입 : 객체, 배열, 함수 등

undefined / null
차이점


조건문

조건을 만족할 때 실행순서를 정하는 구문

  • if
  • if ~ else
  • if ~ else if ~ else
  • swith/case

반복문

  • while : 주어진 조건이 참이라면 특정 수행코드가 무한히 반복되도록 지정 가능한 반복문
while(참 or 거짓) {
	수행코드;
}

  • for : 일반적으로 횟수가 정해져있는 반복문

    	for(시작조건; 종료조건; 수행코드)

  • for ~ of

// for ~ of
const nums = [1,2,3,4,5];
for(let num of nums) {
  	console.log(num);
}
  • for ~ in

배열 (Array)

일반적인 리터럴 데이터를 효율적을 관리하기 위한 객체
생성 : [요소1, 요소2, ...]

배열 -> 책장과 비유를 많이 함

let jsArray = ['HTML', 'CSS', 'JS']
// 조회 : 배열변수명[인덱스번호] 
console.log(jsArray[1])   --> 'CSS'
// 배열 길이 : 배열변수명.length
console.log(jsArray.length)	 --> 3

배열 메소드

  • Array.prototype .push : 해당 배열 맨 뒤에 요소(아이템) 추가
let nums = [1,2,3,4,5]
console.log(nums)	--> [1,2,3,4,5]
nums.push(6)
console.log(nums) --> [1,2,3,4,5,6]

  • Array.prototype .unshift : 맨앞에 요소(아이템) 추가
let nums = [1,2,3,4,5]
nums.unshift(0)
console.log(nums) --> [0,1,2,3,4,5]

  • Array.prototype .pop : 맨뒤의 요소(아이템)를 삭제
let nums = [1,2,3,4,5]
nums.pop()
console.log(nums) --> [1,2,3,4]

  • Array.prototype .shift : 맨 앞의 요소(아이템) 삭제
let nums = [1,2,3,4,5]
nums.shift()
console.log(nums)	--> [2,3,4,5]

  • Array.prototype .splice

splice(idx) : 지정한 인덱스 포함 이후의 모든 요소 삭제

let nums = [1,2,3,4,5]
nums.splice(2)
console.log(nums)	--> [1,2]

splice(idx, no) : 지정한 인덱스 포함 해당 no 갯수만큼의 요소 삭제

let nums = [1,2,3,4,5]
nums.splice(2, 2)
console.log(nums)	--> [1,2,5]

splice(idx, no, el) : 지정한 인덱스 포함 num갯수만큼 요소 삭제 후, 해당 인덱스에 element 추가

let nums = [1,2,3,4,5]
nums.splice(2, 0, 6)
console.log(nums)	--> [1,2,0,3,4,5]

  • Array.prototype .slice(idx) : 지정한 인덱스 포함 이후의 모든 요소 출력 ⭐원본배열 변경X⭐
let nums = [1,2,3,4,5]
nums.slice(2)
console.log(nums.slice(2))	--> [3,4,5]
console.log(nums)	--> [1,2,3,4,5]

  • Array.prototype .indexof : 해당요소의 인덱스 값 출력
let nums = [1,2,3,4,5]
console.log(nums.indexOf(3))	--> 2
console.log(nums.indexOf(7))   --> -1, 해당 요소는 배열에 존재하지 않음

  • Array.prototype .join : 내부요소를 하나의 문자열 값으로 출력하고자 할때 표현하는 기능
let nums = [1,2,3,4,5]
console.log(nums.join())	--> '1,2,3,4,5'
console.log(nums.join(' '))	--> '12345'
console.log(nums.join('-'))	--> '1-2-3-4-5
console.log(typeof nums.join())	--> string

  • Array.prototype .find : 테스트 함수의 조건에 맞는 첫번째 요소 값을 반환
// 예제1
let numbers = [1,2,5,6,8];
let even = numbers.find(item => item % 2 === 0)
console.log(even)	--> 2

//예제2
let cats = [
	{name: '마일로', age: 10},
	{name: '앙꼬', age: 11},
	{name: '포우', age: 12},
	{name: '포니', age: 6}
]

//find를 통해서 age가 10살 이하인 고양이만 검색
let under10 = cats.find(cat => cat.age <= 10);
console.log(under10);	--> {name: '마일로', age: 10}

  • Array.prototype .filter : 조건에 맞는 요소들을 추려 새로운 배열 객체로 반환
let under1010 = cats.filter(cat => cat.age <= 10);
console.log(under1010)	--> [{name: '마일로', age: 10}, {name: '포니', age: 6}]

  • Array.prototype .forEach : 배열 내부의 요소를 하나하나 반복을 통해 접근하는 기능
    for문을 대체할 수 있는 고차함수, forEach 내부에서 반복문 통해 배열 순회,콜백함수를 전달받아 반복 호출

기존 for문

const nums = [1,2,3];
const pows= [];

for(let i = 0; i < nums.length; i++) {
	pows.push(nums[i] ** 2);
}
console.log(pows);	--> [1,4,9]

.forEach()

const nums = [1,2,3];
const pows= [];

nums.forEach(num => pows.push(num ** 2));
console.log(pows);	--> [1,4,9]

-> 배열의 아이템 갯수만큼 콜백함수 호출
forEach내부에서는 reture을 사용하지 않음X : 절대밖으로 빠져나가지 않음


  • Array.prototype .map : 배열내부의 요소를 하나하나 반복을 통해 접근하는 기능 ⭐콜백 함수의 반환값들로 구성된 새로운 배열 반환⭐
//예제1
let nums = [1, 2, 5, 6, 8];
let sum = 0;

nums.map(num => sum += num);
console.log(sum);	--> 22

예제2
let newArray = nums.map(num => num + 10);
console.log(newArray);	-->  [11, 12, 15, 16, 18]
  • forEach 메소드를 통하여 map 메소드 예제2와 같은 결과를 얻으려면?
let nums = [1, 2, 5, 6, 8];
let forEachArray = []

nums.forEach(num => {
	forEachArray.push(num + 10)
})

  • Array.prototype .reduce
    배열의 모든 아이템을 순회하며 인수로 전달받은 콜백 함수를 반복 호출
    콜백함수의 반환값을 다음 순회 시에 콜백함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여
    ⭐하나의 결과값을 만들어 반환⭐ 원본 배열 변경X
// 1부터 4까지 누적 구하기
const sum = [1,2,3,4].reduce((accumulator, currentValue, index, array) => 
accumulator + currentVale, 0)
console.log(sum)	--> 10

해당이미지출처:https://velog.io/@minj9_6/JavaScript-%EB%B0%B0%EC%97%B4-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98%EB%8A%94-%EC%95%8C%EC%95%84%EC%95%BC-%EB%B0%B0.%EC%97%B4.%EC%99%84.%EC%84%B1
이미지원본: 모던자바스크립트 딥다이브






함수

특정기능을 수행하는 소스코드 덩어리
입력을 받아 출력을 내보내는 일련의 과정

필요성

  1. 원하는 시점에 기능을 사용할 수 있도록 미리 생성 -> 편리성
  2. 원하는 만큼 지정하여 특정 기능을 수행 -> 재사용성

함수 리터럴

function 함수명(매개변수) {

}

함수 정의

1. 함수의 선언식 (declarations)

function getNames() {
	console.log()
}
getNames(); //호출

2. 함수 표현 (expressions)

const getAges = function() {
	console.log()
}
getAges(); //호출
profile
정혜지
오히려 좋아
이전 포스트

css

다음 포스트

js-

0개의 댓글