JavaScript 기본 문법 총 정리

105690 단어 JavaScriptJavaScript

JavaScript 란?

HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어 따로 C, C++처럼 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 ( 마우스 클릭, 키보드 입력 등 )에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.

JavaScript 사용 방법

1. 내부 스크립트

자바스크립트 코드는 ＜script＞태그를 HTML문서안에 넣어서 사용 가능하다. HTML문서의 어느위치에서나 사용 가능한데 보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용한다. ( 주로 간단한 스크립트나 테스트용으로 사용한다. )

2. 외부 스크립트

자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있다. 외부 자바스크립트를 사용하려면 ＜script＞의 src 속성으로 HTML 문서 위치의 기준 파일 경로를 입력해주면 된다.

내부 스크립트

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
자바 스크립트 코드
</script>
</html>

외부 스크립트

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script src="./index.js"></script>
</html>

JavaScript에서 선택자

1. 태그 선택자

document.getElementsByTagName(태그명)[순서];

태그는 같은 이름으로 여러개를 생성 할 수 있다.
그래서 getElement가 아닌 getElements로 복수로 써준다.
태그명을 넣을때는 ('div') 이런식으로 넣어주면 된다.
여기서 마지막[순서]는 index 0번부터 시작이다 만약에 형제가 3개가 있을경우 3번째를 선택해줄때는 2를 넣으면 된다.

2. 클래스 선택자

document.getElementsByClassName(클래스명)[순서];

클래스도 태그와 마찬가지로 같은 이름으로 여러개를 생성 할 수 있다.
그러므로 위 코드에서 복수인 getelements를 사용한다.
클래스명을 넣을때는 ('logo') 이런식으로 넣어주면 된다.
그리고 여러개 이기때문에 맨 뒤에 [순서] 즉 index번호를 적어준다. index는 0부터 시작이다.

3. 아이디 선택자

document.getElementById(아이디명);

아이디는 특성상 같은 아이디명을 사용하지 않는것이 규칙이기 때문에
getElements 복수형이 아닌 getElement를 써주고 뒤에 순서도 사용하지 않는다.

JavaScript에서 간단한 선택자

제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어도 전체를 선택하는 경우.

document.querySelector('div');

queryselector만 쓸경우 순서를 지정할수 없다. 뒤에 All을 넣어줘야 가능하다.

제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어서 해당 형제를 선택하는 경우.

document.querySelectorAll('div')[순서];
// [순서]는 자바스크립트와 마찬가지로 index 0 부터 시작.

만약에 한 클래스에서 같은형제가 있을 경우

document.querySelectorAll('.hello > p')[2];

<div class="hello">
	<p>안녕하세요</p>
	<p>안녕하세요</p>
	<p>안녕하세요</p>
</div>

// hello 클래스안에서 3번째 p가 해당

한 아이디에서 같은형제가 있을 경우

document.querySelectorAll('#hello')[1];
// hello 아이디안에서 2번째 형제가 해당

출력문 ( output )

자바스크립트는 여러 방법을 통해 결과물을 웹 브라우저에 출력가능하다. 자바스크립트에서 사용할 수 있는 출력 방법은 여러가지가 있다.

  • window.alert() 메소드
  • document.write() 메소드
  • console.log() 메소드
  • HTML DOM 요소를 이용한 innerHTML 프로퍼티

window.alert() 메서드

브라우저 api 메서드 경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메세지를 전달할 때 사용
별도의 대화 상자를 띄워 사용자에게 데이터를 전달.

그냥 다른거 다 필요없이 alert(내용); 써주면 끝이다. 내용안에 문자열 / 변수명 / 숫자형 뭐 여러가지를 넣을수 있다.

document.write() 메서드

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력.
대부분 테스트나 디버깅을 위해 사용한다.

라고 써주게 되면,

그냥 HTML에 텍스트를 넣어준거 처럼 웹 페이지에 보여지게 된다.

console.log() 메서드

웹 페이지의 콘솔을 통해 데이터를 출력해준다.
대부분의 주요 웹 브라우저에서는 F12 (개발자 도구)를 누른 후 메뉴에서 콘솔을 클릭하면 볼 수 있다. 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되서 디버깅하는데 많은 도움을 준다.

라고 써주게 되면,

이렇게 웹 페이지의 개발자 도구를 통해 확인할 수 있다.

또한 출력문 안에는

String (문자열)을 표시하는 방법이 3가지가 있는데,
첫 번째는 작은 따옴표('') 두번째는 큰 따옴표("") 세번째는 백틱(``)이 있다.
작은 따옴표와 큰 따옴표는 사용법이 같다.
'로 시작하면 '로 끝나야하고, "로 시작하면 "로 끝나면된다.

따라서 +를 써줄때는

맨 아래줄처럼 변수의 앞과 뒤 문자열을 띄어쓰기로 처리를 해줘야 띄어쓰기 되서 출력된다.

또 `는 백틱이라고 하는데 이건 작은 따옴표랑 큰 따옴표와는 다르게 양 끝에만 써주면 되고 안에 변수를 넣어줄때는 ${변수명}을 써주면 된다.
백틱대신 '' ""안에 ${}를 써주게되면 오류가 뜨고 출력되지 않는다.
백틱은 문자열 리터럴 기법이다 뒤에서 더 자세하게 다루겠다.

JavaScript 주석

JavaScript 주석은 JavaScript 코드를 설명하고 더 읽기 쉽게 만드는 데 사용한다. 또 대체 코드를 테스트 할 때 실행을 방지하는 데 사용할 수 도 있다. 주석은 오류 검색을 위한 디버깅에 아주 좋다.

// 한줄 주석
/* 여러줄
   주석
*/

변수 ( Variable ) 란?

변수는 ( 문자나 숫자 같은 ) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 컴퓨터의 메모리에 존재하는 공간이다. 값을 찾기 쉽게 할려고 이름을 붙여서 사용한다.

변수 ( Variable ) 의 선언

JavaScript 변수를 선언하는 방법에는 3가지가 있다.

1. var
2. let
3. const

ES6 이전에는 변수를 선언하는 키워드가 var밖에 없었지만 ES6에서 let, const가 생겼다.

var, let, const의 차이점

첫 번째로 var는 함수 스코프이고 let, const는 블록 스코프이다.

스코프 ( Scope ) 란?

스코프 ( Scope )는 변수를 사용할 수 있는 유효 범위이다. JavaScript에선 2가지의 스코프가 있다. 유효범위 개념을 잘 알고 있으면 변수와 매개변수의 접근성과 생존기간을 제어할 수 있다. 전역 ( Globla ) 과 지역 ( Local )이 있다. 전역 변수는 모든 곳에서 다 쓸 수 있고 지역변수는 { } 안에서만 쓰이고 { } 밖에서는 쓰지 못 한다. ex) 함수, if문, for문 등

유효범위의 특징

  • 함수 단위의 유효범위
  • 변수명 중복 허용 ( let, const )도 가능
  • var의 생략 ( var를 생략할 경우 전역변수가 된다. )

두 번째 var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같이 이름의 변수를 또 선언하면 에러가 난다.

세 번째 var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 한다.

네 번째 var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없다.

변수선언 식별자

변수 선언할때 고유한 이름을 '식별자'라고 한다. 변수의 이름을 구성하는 규칙이 있다.

  • 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있다.
  • 이름은 문자로 시작한다.
  • 이름은 $ 및 _로 시작할 수도 있다.
  • 이름은 대소문자를 구분한다. ( y와 Y는 다른 변수임 ).
  • 예약어 (예: JavaScript 키워드) 는 이름으로 사용할 수 없다.

변수의 선언

var a; // 한개씩 선언
let b;
var a, i; // 동시에 선언
var sum = 0; // 선언과 초기화
let i=0, sum=10, message="Hello"; // 동시에 선언과 초기화

변수의 데이터 타입

데이터 타입 ( Data Type )는 프로그래밍 언어에서 사용할 수 있는
데이터 ( 숫자, 문자열, 불리언 등 )의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다. 데이터 타입은 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기와 할당할 수 있는 유효한 값에 대한 정보, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보를 컴퓨터와 개발자에게 제공한다.

기본 타입 ( primitive data type )

  • boolean
  • null
  • undefined
  • number
  • string
  • symbol ( ES6에서 추가 )

객체 타입 ( object )

  • object
  • array
  • function

기본 타입

number

C나 Java의 경우 정수와 실수를 구분하여 int, long, float, double 등과 같은 다양한 숫자 타입이 존재하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다.

var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20 // 음의 정수
var binary = 0b0100001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수

자바스크립의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 정수로 표시된다해도 사실은 실수다. 따라서 정수로 표시되는 수 끼리 나누더라도 실수가 나올 수 있다.

  • Infinity : 양의 무한대
  • -Infinity : 음의 무한대
  • NaN : 산술 연산 불가 ( not-a-number )

정수화, 실수화 함수

  • parseInt()
    파라미터에 string, number를 넣어준다. string을 넣을 경우에는 number로 바뀌면서 정수화를 해주고 number를 넣을경우에는 그냥 정수화를 해준다.
    만약 string의 첫 글자를 정수로 변경할 수 없으면 NaN ( Not a Number ) 값을 리턴해준다.
var a = '123';
console.log(parseInt(a));
  • parseFloat()
    파라미터에 string, number를 넣어준다. string을 넣을 경우에는 number로 바뀌면서 실수화를 해주고 number를 넣을경우에는 그냥 실수화를 해준다.
    만약 string의 첫 글자를 실수로 변경할 수 없으면 NaN ( Not a Number ) 값을 리턴해준다.
var a = '123';
console.log(parseFloat(a));

string

문자열 ( String ) 타입은 텍스트 데이터를 나타내는데 사용한다. 문자열은 0개 이상의 16bit 유니코드 문자 ( UTF-16 ) 들의 집합으로 대부분의 전세계의 문자를 표현 할 수 있다. 문자열은 작은 따옴표('')또는 큰 따옴표 ("")안에 텍스트를 넣어 생성한다. ( 시작을 '로 하고 "끝날경우 문법적 오류가 뜬다. ) 만약 ""안에서 "를 쓰고싶으면 \"를 써주면 된다.
문자열에서 줄바꿈을 하고싶으면 \n을 쓰면 된다.

var str = "string"; // 큰 따옴표
str = 'string'; // 작은 따옴표
str = `string`; // 백틱 ( ES6 문자열 리터럴 기법 )

C와 같은 언어와는 다르게 자바스크립트의 문자열은 원시 타입이며 변경 불가능하다. 문자열은 배열처럼 index를 통해 접근할 수 있다.

문자열 관련 함수

  • string.indexOf()
    문자열에서 특정 문자열을 찾고, 검색된 문자열 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴한다. 파라미터에 문자열을 넣어준다. ( 대소문자를 구분한다. )
var a = '문자열은 따옴표로 둘러싸면 됩니다.';
console.log(a.indexOf('따옴')); // 띄어쓰기도 index에 포함된다. ( 5 )
  • string.length
    문자열의 길이를 length를 통해 구할 수 있다. 문자열에서 문자의 갯수를 return 시켜준다. 공백의 경우에도 한개의 문자로 인식하며 length에 포함시킨다.
var str = 'Hello';
console.log(str.length); // 5
str['length'] // .대신 이렇게도 사용가능하다.
  • string.concat() - react에서 많이 사용
    concat()은 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 함수이다. 파라미터로는 변수명이나 문자열이 들어간다. 여러개의 문자열도 붙일 수 있다. concat().concat() 이런식으로
var str = 'Hello';
var str2 = 'World';
console.log(str.concat(str2)); // HelloWorld

'+'를 통해서도 문자열을 붙일 수 있다. ( str+str2 )
'문자열' + '문자열" = '문자열' 도 가능하다.
'문자열' + number = '문자열 number'
number + '문자열' = '문자열 number'

  • string.charAt()
    charAt()은 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수이다. 파라미터로는 index가 들어간다. 없는 index를 넣어줄경우 빈 스트링을 반환한다.
var str = 'abcdefg';
console.log(str.charAt(5)); // f

str[index] 로도 문자열을 반환할 수 있다.

  • string.substr()
    substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다.
    매개변수로 ( start, length )가 있고 특정 부분이 필요할 때 해당 index를 넣어준다. length의 값을 안넣어주면 시작점부터 끝까지 새로운 문자열을 반환한다.
var str = 'abcdefg';
console.log(str.substr(1,4)); // 'bcde'
console.log(str.substr(1)); // 'bcdefg'
  • string.substring()
    substring()는 substr()과 마찬가지로 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다.
    매개변수로 index의 ( start, end )를 받는다. 만약 end값이 없으면 끝까지 새로운 문자열을 반환한다. end는 포함이 안되고 end 전까지만 포함된다. start가 end보다 크면 자리를 바꿔서 반환한다. ( 음수가 들어가면 string 그대로 반환한다. )
var str = 'abcdefg';
console.log(str.substring(1,4)); // 'bcd'
console.log(str.substring(1)); // 'bcdefg'
  • string.slice()
    substring()과 마찬가지로 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다. 매개변수 받는것도 똑같다. end가 포함안되는 것도 똑같다. 차이점은 start가 end보다 크면 빈 string을 반환한다. index가 음수이면 뒤에서 부터 가져온다. ( 음수는 -1부터 시작 start, end 둘다 음수는 start가 더 작아야 제대로 가져온다. -1, -3 이면 빈 string 음수도 마찬가지로 end는 포함 x )
var str = 'abcdefg';
console.log(str.slice(1,4)); // 'bcd'
console.log(str.slice(-3)); // 'efg'
  • string.split()
    문자열을 일정한 구분자로 잘라서 각각의 문자열을 배열로 저장해준다.
    string.split(separator, limit) separator는 배열을 나눠줄 기준 문자열을 넣는다. ( 출력될때 기준은 제외되고 배열화 된다. ) limit은 배열화되고 난 뒤 1을 넣으면 앞 index 2를 넣으면 뒤 index ( 빈 스트링을 넣으면 하나하나 배열로 된다. )
var str = 'abcdefg';
var str1 = str.split('d');
var str2 = str.split('d', 1);
var str3 = str.split('');
console.log(str1); // [ 'abc', 'efg' ]
console.log(str2); // [ 'abc' ]
console.log(str3); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g']
  • string.toUpperCase()
    알파벳 소문자 문자열을 대문자로 변환시켜준다. 이미 대문자인건 그대로 대문자로 반환한다. 
var str = 'AbCdEfg';
console.log(str.toUpperCase()); // 'ABCDEFG'
  • string.toLowerCase()
    알파벳 대문자 문자열을 소문자로 변환시켜준다. 이미 소문자인건 그대로 소문자로 반환한다. 
var str = 'AbCdEfg';
console.log(str.toLowerCase()); // 'abcdefg'
  • string.trim()
    trim() 함수는 문자열의 앞 뒤의 모든 공백을 제거한다. ( space, tab, NBSP 등 ) 문자열 내부에 대한 공백 처리는 불가능하다. .trim() 은 IE 10이상부터 사용가능하다. 그래서 제이쿼리를 이용하여 IE 10미만 버전에서 .trim()을 사용할 수 있다.
var str = ' abcdefg '
var str1 = str.trim();
var str2 = $.trim(str); // jquery 써야만 가능
console.log(str2); // 'abcdefg'
  • string.replace()
    .replace() 함수는 문자열 내부에 대한 공백 처리를 할때나 문자열을 다른 값으로 바꿔줄 때 사용한다. 문자열 앞 뒤 공백 처리는 불가능하다. ( 정규식을 쓸 경우 가능하다. ) 또 정규식으로 문자열 하나뿐만 아니라 안에있는 중복되어있는 문자열들도 바꿔줄 수 있다.

boolean

불리언 ( boolean ) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다. 불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

var foo = true;
var bar = false;

undefined

undefined 타입의 값은 undefined가 유일하다. 선언 이후 값을 할당하지 않은 변수는 undefined값을 가진다. 즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다. 이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화하기 때문이다.

var foo;
console.log(foo);

null

null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별하므로 null은 Null, NULL등과 다르다. null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. 또는 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환한다. HTML 요소를 가져올때 검색할 수 없는 경우도 null을 반환한다.

var el = document.querySelector('.myElam');
// HTML 문서에 myElam 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(el); // null

객체 타입

배열 ( array )

배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있다. 예를 들어 100개의 데이터를 처리해야 한다면 배열을 사용하지 않으면 100개의 변수가 필요하다. 그러면 코딩하기도 힘들고 코드량도 길어지기 때문에 배열을 이용하면 효율적으로 짤 수 있다. 자바스크립트 배열은 배열 내부의 데이터 타입이 서로 달라도 쓸 수 있고 배열의 크기가 동적으로 변할 수 있다. 배열안에 number, string, boolean, object, array 등 들어갈 수 있다.

배열의 선언

JavaScript의 배열 선언은 2가지 방법이 있다.

  • 대괄호([])를 사용하여 만드는 방법
  • Array() 생성자 함수로 배열을 만드는 방법
    보통 첫 번째 방법이 일반적이다.
var arr = [ '1', 2 'Hello' ]; // 선언과 동시에 할당
var arr = [];
arr[0] = 'zero';
arr[1] = 'one'; // 빈 배열을 생성후 할당
var arr = new Array(); // 빈 배열을 생성후 할당
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
var arr = new Array( 'a', 'b', 'c', 'd' ); // 선언과 동시에 할당

배열 출력 방법

var arr = new Array( 'a', 'b', 'c', 'd' ); 
var arr = [ 'a', 'b', 'c', 'd']; 
for ( let i = 0; i < 4; i++ ){
  console.log(arr[i]);
}
for ( let i = 0; i<arr.length; i++){
  console.log(arr[i]);
} // 보통 배열 데이터가 앞으로도 추가가 될수도 있고 삭제가 될수도 있기때문
 // 에 이방법을 많이 사용한다.

배열 관련 함수

  • Array.isArray()
    JavaScript 배열은 typeof로 type을 출력해보면 object 객체라고 나온다. 그래서 더 정확하게 배열인지 아닌지 판별하기 위해 Array.isArray(배열명)을 써서 true가 나오면 배열이고 false가 나오면 아니다.
var arr = [ 'a', 'b', 'c', 'd' ];
console.log(Array.isArray(arr); // true
  • array.indexOf()
    배열에서 특정 데이터를 찾고, 검색된 배열의 '첫번째'로 나타나는 위치 index를 리턴한다. 파라미터에 데이터를 넣어준다. ( 대소문자를 구분한다. )
var arr = [ 'a', 'b', 'c', 'd' ];
console.log(a.indexOf('c')); // 2
  • array.length
    배열의 길이를 length를 통해 구할 수 있다. 배열에서 데이터의 갯수를 return 시켜준다.
var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.length); // 4
  • array.toString()
    배열뿐만 아니라 number 타입도 문자열화 시켜준다. 문자열화 될때 하나의 문자열로 된다. ( 구분되는 , 자동생성 ) 객체는 모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있는데 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속된다.
var arr = [ 1, '2', [ 1, 2, 3 ], { name : 'lee' } ];
console.log(arr.toString()); // "1,2,1,2,3,[object Object]"
  • array.join()
    배열의 모든 데이터를 연결해 하나의 문자열로 만들어 준다. 매개변수는 separator - 분리 기호가 들어간다. ( 인자를 문자열로 ' ' - 사이띄어쓰기 '' 띄어씌기 없이 '-', '+', '안에 필요한거' 를 넣는다. ) 원본 배열은 변하지 않는다.
var arr = [ '가', 2, '나', 4 ] ;
console.log(arr.join('-')); //  '가-2-나-4'
  • array.concat()
    concat()은 두개 이상의 배열을 하나의 배열로 만들어주는 역할을 하는 함수이다. concat().concat()으로 여러개의 배열도 붙일 수 있다. 원본 배열은 변하지 않는다.
var arr = new Array( 'a', 'b', 'c', 'd' );
var arr1 = [ 'e', 'f' ];
console.log(arr.concat(arr1)); // ['a', 'b', 'c', 'd', 'e', 'f']
  • array.slice()
    배열에서 특정 부분만 골라내 반환해주는 함수이다. 매개변수는 ( start, end ) end의 이전까지만 포함된다. start가 end보다 크면 빈 array를 반환한다. index가 음수이면 뒤에서 부터 가져온다. ( 음수는 -1부터 시작 start, end 둘다 음수도 start가 더 작아야 제대로 가져온다. -1, -3 이면 빈 string 음수도 마찬가지로 end는 포함 x ) 원본 배열은 변하지 않는다.
var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ];
console.log(str.slice(1,4)); // [ 'b', 'c', 'd' ]
console.log(str.slice(-3)); // [ 'd', 'e', 'f' ]
  • array.splice()
    배열의 기존 원소를 삭제 또는 교체하거나 새 원소를 추가하여 배열의 내용을 변경한다. 원본 배열 자체를 수정 매개변수는 첫번째 start 배열의 변경을 시작할 index 음수일 경우 배열의 끝에서 -1부터 시작 두번째 deleteCount 첫번째 index부터 제거할 길이 0이거나 0보다 작은 수이면 어떤 원소도 삭제되지 않는다. 0일때 추가할때는 첫번째 매개변수 start뒤에서 부터 추가되고 0이면 빈배열 []를 반환한다. 세번째 배열에 추가할 원소이다. ( 제거된 마지막 원소자리에 추가된다. ) 제거된 원소가 반환값으로 나온다.
var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ];
console.log(arr.splice(1,3)); // [ 'b', 'c' 'd' ]
console.log(arr) // [ 'a', 'e', 'f' ]
console.log(arr.splice(1,3,'가','나'); // [ 'b', 'c', 'd' ]
console.log(arr) // [ 'a', '가', '나', 'e', 'f' ]
var arr1 = [ '가', '나', '다', '라' ];
console.log(arr1.splice(1,0,'마','바); // []
console.log(arr1); // [ '가', '마', '바', '나', '다', '라' ];
  • array.pop()
    배열의 맨 마지막 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 x
var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.pop()); // 'd'
console.log(arr); // [ 'a', 'b', 'c' ]
  • array.push()
    배열의 마지막에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( push()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.
var arr = new Array( 'a', 'b', 'c', 'd' );
arr.push('e');
console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ];
console.log(arr.push('e')); // 5
  • array.shift()
    배열의 첫 번째 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 x
var arr = [ 'a', 'b', 'c', 'd' ];
arr.shift();
console.log(arr.shift()); // 'a'
console.log(arr); // [ 'b', 'c', 'd' ];
  • array.unshift()
    배열의 첫 번째에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( unshift()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.
var arr = new Array( 'a', 'b', 'c', 'd' );
arr.unshift('a0');
console.log(arr.unshift('a0')); // 5
console.log(arr); // [ 'a0', 'a', 'b', 'c', 'd' ];
  • array.reverse()
    배열의 순서를 뒤집는다. 원본 배열도 순서가 뒤집힌다.
var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.reverse()); // [ 'd', 'c', 'b', 'a' ]
  • array.sort()
    sort()는 기본적으로 배열의 원소를 오름차순으로 정렬해준다. ( 인자에 아무것도 넣지 않을경우 number, string 해당) 하지만 대부분 sort함수의 인자값으로 비교 함수를 전달하여 정렬을 시킨다. ( 이 경우 같은 데이터 타입이여야 해당된다. )
var arr = [ 'f', 4, '라', 2, 'c', '나', [ 1, 5, 3 ] ];
console.log(arr.sort()); // [ [ 1, 5, 3 ],  2, 4, 'c', 'f', '가', '다' ];

객체 ( object )

객체는 데이터와 그 데이터에 관련한 동작 ( 절차, 방법, 기능 ) 을 모두 포함할 수 있는 개념적 존재이다. 이름 ( key ) 과 값 ( value ) 을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드 ( method )를 포함할 수 있는 독립적 주체이다.

객체의 선언

JavaScript의 객체 선언은 2가지 방법이 있다.

  • 중괄호({})를 사용하여 만드는 방법 - 객체 리터럴 방식
  • Object() 생성자 함수로 객체를 만드는 방법
    보통 첫 번째 방법이 일반적이다
let obj = {
  name : '홍길동',
  age : 21
}; // 선언과 동시에 할당
obj.name = '홍길동';
obj['name'] = '홍길동';
obj.age = 21;
let obj = new Object() // ()안에는 값을 넣는다. 
                       // 그럼 해당 데이터 타입의 객체가 생성된다
let obj = new Object('홍길동');
console.log(obj);
String {'홍길동'}
index 0 = '홍', index 1 = '길' index 2 = '동' // 이런경우는 String
                                            // 객체가 생성되고
let obj = new Object({ name: '홍길동', age: 21});
// 이렇게 하면 위와 똑같다.

둘중 권고하는 방식은 객체 리터럴 방식이다 그 이유는

  1. 코딩하기 편하며 가독성이 좋다.
  2. 속도가 빠르다.
  3. 자바스크립트의 오버라이딩을 방지할 수 있다.

오버라이딩 이란 ?

생성자 함수 new를 이용하여 상속을 하다보면 종종 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 할 경우가 발생할 수 있을 때

출처 - https://webclub.tistory.com/404

객체 관련 함수

  • Object.keys()
    객체를 배열로 전환한다. 각각의 index 안에 객체의 key 값이 들어가 있다.
    keys() 괄호안에 object 명을 써준다.
let obj = {
  name: '홍길동',
  age: 20,
  country : '조선'
};
console.log(Object.keys(obj)); // ['name', 'age', 'country']
  • Object.values()
    객체를 배열로 전환한다. 각각의 index 안에 객체의 value 값이 들어가 있다.
let obj = {
  name: '홍길동',
  age: 20,
  country : '조선'
};
console.log(Object.values(obj)); // ['name', 'age', 'country']

객체의 종류

  • 배열
  • 함수
  • 객체
  • 날짜
  • 수학
  • 정규표현식
  • new 키워드로 만든 ( boolean, number, string .. )

객체가 아닌 기본 데이터 유형

  • string
  • number
  • boolean
  • null
  • undefined

JavaScript의 객체 구성

1. JavaScript 내장 객체

JavaScript 엔진이 구동되는 시점에서 바로 제공되고 JavaScript코드 어디에서든 사용이 가능하다.

  • object
  • string
  • number
  • date
  • array
  • math
  • boolean

2. 브라우저 내장 객체

브라우저 내장 객체도 JavaScript 엔진이 구동되는 시점에서 바로 제공 된다.

  • 브라우저 객체 모델 ( BOM )
  • 문서 객체 모델 ( DOM )

3. 사용자 정의 객체

사용자가 생성한 객체

객체 추가 / 수정 / 삭제 방법

1. 객체 key 추가 / 수정

/* 추가 */
let obj = {
  name : '홍길동'
};
obj.age = 23; 또는 obj['age] = 23;
/* 수정 */
let obj = {
  name : '홍길동',
  age : 22
};        
obj.age = 23; 또는 obj['age] = 23;

2. 객체 key 삭제

let obj = {
  name : '홍길동',
  age : 22
};
delete obj.age;

출처 - https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Object-35k01xmdfp

JavaScript 연산자

연산자란 프로그래밍에서 쓰이는 기호들이다.

1. 기초 산술 연산자
2. 할당 연산자
3. 비교 연산자
4. 논리 연산자

기초 산술 연산자 ( Arithmetic Operators )

( 1 ) 사칙 연산자

  • ＋ : 두 값을 더한다.

  • － : 앞의 값에서 뒤의 값을 뺀다.

  • × : 두 값을 곱한다.

  • / : 앞의 값을 뒤의 값으로 나눈다.

var a = 1;
var b = 2;
console.log(a+b); // 3

변수의 값을 초기화 하여 a + b, a - b 로도 사용가능하고 a + 3, 5 + b 하나만 변수를 넣어서도 사용 가능하고 숫자만 넣어서도 사용이 가능하다.
( Number 타입과 String 타입을 더 할수도 있는데 이럴경우에 값이 "String" 타입으로 나온다. )

( 2 ) 나머지 연산자

  • % : 앞의 값을 뒤의 값으로 나눈 나머지 값
var a = 5;
var b = 2;
console.log(a%b); // 1

( 3 ) 증감 연산자

  • ++ : 변수의 값을 1 증가

  • -- : 변수의 값을 1 감소

증감 연산자의 위치

  • 증감 연산자가 피연산자 앞에 위치
    ++a : 전체 수식 처리하기 전에 적용됌

  • 증감 연산자가 피연산자 뒤에 위치
    a++ : 전체 수식의 처리가 끝난 뒤 적용됌

var a = 1;
    console.log(a); // 1
    console.log(++a); // 2
    console.log(a); // 2

var a = 1;
    console.log(a); // 1
    console.log(a++); // 1
    console.log(a); // 2

할당 연산자 ( Assignment Operators )

  • += : y+=x / y = y + x

  • -= : y-=x / y = y - x

  • *= : y=x / y = y x

  • /= : y/=x / y = y / x

  • %/ : y%=x / y = y % x

왼쪽의 피연산자와 오른쪽의 피연산자를 계산하여 왼쪽의 피연산자에 대입

비교 연산자 ( Relational Operators )

두 개의 피연산자를 비교한다. boolean 자료형으로 값이 나온다.

  • 동등 연산자 ( == ) : x와 y의 값이 같다. x == y
    동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후 판별한다.

  • 일치 연산자 ( === ) : x와 y의 값이 같다. x === y
    동등 연산자와의 차이점은 자료형 변환 없이 두 연산자가 같은지 엄격히 판별한다.

  • 부등 연산자 ( != ) : x와 y의 값이 다르다. x != y
    부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도한다.

  • 불일치 연산자 ( !== ) : x와 y의 값이 다르다. x !== y
    불일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환한다.

  • x > y : x의 값이 y의 값보다 크다.

  • x >= y : x의 값이 y의 값보다 크거나 같다.

  • x < y : x의 값이 y의 값보다 작다.

  • x <= y : x의 값이 y의 값보다 작거나 같다.

논리 연산자 ( Logical Operator )

  • and 연산자 ( && ) : 왼쪽과 오른쪽 중 하나라도 참이면 모두 true를 반환하고 왼쪽과 오른쪽 모두 거짓일 때 false를 반환한다.

  • or 연산자 ( || ) : 왼쪽과 오른쪽 중 하나라도 참이면 모두 true를 반환하고 왼쪽과 오른쪽 모두 거짓일 때 false를 반환한다.

  • not 연산자 ( ! ) : true나 false를 반대로 뒤집는다.

연산자 우선순위

× / % 가 + - 보다 먼저 계산된다. 만약 + - 가 괄호 안에있으면 괄호안의 + - 가 먼저 계산된다.

  1. Logical Operator : NOT (!)

  2. Arithmetic Operator : +,/,%/+.-

  3. Relational Operator : >,<,<=,>=,==,!=

  4. Logical Operator : AND ( && )

  5. Logical Operator : OR ( || )

출처 - https://im-developer.tistory.com/57

조건문 ( Conditions ) 이란 ?

JavaScript의 비교, 논리 연산자와 boolean 데이터 타입을 이용하여 조건문을 사용할 수 있다. 조건문의 종류는 크게 if와 switch가 있다.

if문의 문법

조건문은 if로 시작한다. if뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 boolean이다. 값이 true면 if문의 내용이 실행되고 false면 else문의 내용이 실행된다. 또 그렇지 않으면 else if문의 내용이 실행된다.

if (true) { 
  cosole.log('true입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 if문의 내용인 'true입니다'. 가 나온다.

if (false) { 
  cosole.log('false입니다.');
} else if (true) {
  console.log('true입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 else if문의 내용인 'true입니다.'가 나온다.

if (false) { 
  cosole.log('false입니다.');
} else if (false) {
  console.log('false입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 else문의 내용인 'false입니다.'가 나온다.

switch문의 문법

조건문은 switch로 시작한다. 조건이 맞는 case의 내용이 실행되고 조건문은 종료된다. 어떠한 case에도 조건이 부합하면 default문의 내용이 실행되고 조건문이 종료된다. break가 빠지게되면 다음 break를 만나기 전까지 내용들이 출력이 된다.

switch (key) {
  case (조건)1:
    // case1의 내용
    break;
  case (조건)2:
    // case2의 내용
    break;
  case (조건)3:
    // case3의 내용
    break;
  default:
    // default의 내용
    break;
}

switch 예제

let animal = 'dog';

switch (animal) {
  case 'cat':
    console.log('야옹');
    break;
  case 'dog':
    console.log('멍멍');
    break;
  case 'cow':
    console.log('음메');
    break;
  default:
    console.log('일치하는 동물 소리가 없습니다.');
    break;
} // 멍멍

-출처 https://www.youtube.com/watch?v=Tir_8e6S-ZI

if문과 switch문의 차이

switch문은 변수를 입력 받아 미리 정해놓은 여러 값들과의 일치여부를 판단하여 내용을 출력하고 if문은 비교, 논리 boolean의 결과 값을 내놓는 조건문에 따라 내용을 출력한다.

반복문 ( loop ) 이란?

프로그래밍에서는 코드를 반복해야 할 일이 많은데 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다. 자주사용하는 반복문의 종류는 while, for 이다. 시작점과 종료시점을 지정해줘야 무한 loop를 돌지않는다. 무한 loop를 돌게되면 브라우저가 실행되지 않기때문에 주의해야 한다. 반복문을 중간에 멈추게할라면 break;를 사용해준다. break;를 만나면 반복문이 아에 멈추지만 continue를 사용하게 되면 가운데 조건만 빠지고 처음부터 끝까지 반복된다.
( 주로 데이터를 배열이나 객체로 받아서 반복할 경우 많이 사용한다. )

while 문의 문법

반복문은 while로 시작한다 while 위에 시작점이 있고 while뒤의 괄호에 조건이 오고, while 안에 증감이 있다. 조건이 true인 동안에 반복해서 실행이 된다. 조건이 false가 되면 반복문이 종료된다. i는 index이고 0부터 시작한다. while의 가장 큰 문제점은 시작점이 중괄호 밖에 있어서 만약에 또 다른 곳에서 i가 쓰인다면 충돌할 가능성이 크다.

시작점
while (조건문) {
 반복할 내용
 증감;
}

while 문 예제

let i = 0;
while ( i < 10 ) {
	document.write('Hello World');
  	i++;
}

for 문의 문법

반복문은 for로 시작한다. for 괄호 안에 시작점, 조건, 증감을 써준다. 조건이 true인 동안에 반복해서 실행이 된다. 조건이 false가 되면 반복문이 종료된다. i는 index이고 0부터 시작한다. for는 while처럼 시작점이 바깥에 있질 않아서 충돌이 잘 일어나지 않는다. 또 while보다 가독성도 좋고 코드도 간결하다.
( var 보단 let으로 선언하면 밖에서 충돌일어날 가능성이 더 줄어든다. )

for (시작점; 조건문; 증감) {
 반복할 내용
}

for 문 예제

for (let i = 0; i < 10; i++) {
	document.write('Hello World');
}

while과 for의 차이

while문은 몇번 반복할지 모를 경우에 사용하고 for는 반복 횟수가 정해져 있을 경우에 많이 사용한다.

그 밖의 반복문들

- for in

for in 반복문은 객체에서 많이 사용된다. 객체의 key와 value를 열거해준다. in 뒤에는 배열명을 써주고 for문 안의 변수는 key가 나오고 객체명[변수]는 value값이 나온다.

let obj = {
  name : '원숭이',
  age : 12,
  favorite: 'banana'
}
for (let i in obj) {
  console.log( i + ':' + obj[i]);
}

결과값

- for of

for of 반복문은 배열안의 데이터 값을 읽는데 많이 사용한다. of 뒤에는 배열명을 써준다.

let arr = [ 10, 20, 30 ];
for (let i of arr) {
  console.log(i);
}

결과값

- forEach ( 배열 메서드 )

forEach 반복문은 오직 배열에서만 사용이 가능하다. forEach의 인자는 callback함수가 들어오고 callback 함수의 매개변수는 index, item이 있다. 둘중 하나만 사용해도 무관하다.

let arr = [ 10, 20, 30 ];
arr.forEach(function(item){
  console.log(item);
});

결과값

- do while

do while 반복문은 잘 쓰이지 않는다. 그 이유는 조건문의 결과와 상관없이 무조건 1번은 반복되고 while문의 문제점과 똑같기 때문이다. while문과 똑같이 시작점을 위에 써주고 do 안에 반복할 내용과 증감을 써준뒤에 while을 써서 조건을 걸어둔다.

let i = 0;
do {
  console.log(i);
  i++;
} while ( i < 10 );

함수 ( function ) 란?

함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여주고 유지보수에 용이하고 가독성이 좋다. 함수는 프로그램을 구성하는 주요 구성요소 이다. 나중에 함수들을 모아놓은 모듈이 있는데 js 파일끼리 내보내고 가져올 수 있다.

함수 선언문

앞에 function을 써주고 용도에 맞는 함수명을 지어주고 매개변수는 필요하면 쓰고 필요하지 않으면 안써도 된다. js의 매개변수는 따로 앞에 데이터 타입을 적어주지 않아도 된다. return은 반환할 값이 있으면 적어주고 반환할 값이 없으면 안적어줘도 된다. 그냥 return; 만 하게되면 함수를 즉시 종료한다.

function 함수명 (함수안에서 사용할 매개변수) {
	함수 내용
    return 반환값;
}

함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 앞에 변수선언 키워드를 써주고 함수명을 쓰고 뒤에 function ()을 해주고 나머지는 선언문과 동일하다.

let 함수명 = function () {
	함수 내용
    return 반환값;
}

함수 선언문과 함수 표현식의 차이

함수 선언문은 어디서든 호출 할 수 있다. 예를 들어 함수를 선언한 위에다가 써도 동작을 한다. ( 호이스팅 때문 ) 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하고 함수 선언문은 스크립트를 실행하기 전 준비단계에서 전역에 선언된 함수 선언문을 찾는다.

화살표 함수 ( arrow function )

화살표 함수는 JS ES6에서 새로 생긴 함수 표기법이다. 함수 표현식과 문법이 비슷하지만 function 키워드가 빠지고 대신 화살표를 넣어준다. 매개변수가 하나밖에 없다면 매개변수 소괄호를 생략할 수 있다. 매개변수가 없거나 2개 이상인 경우에는 소괄호를 생략할 수 없다. 화살표 함수는 return을 생략 가능하다. return 전에 여러줄의 코드가 있을경우는 중괄호 생략 불가능하다.

let 함수명 = (함수에서 쓰일 매개변수) => {
	함수내용
    return 반환값;
}
// return 생략
let 함수명 = (함수에서 쓰일 매개변수) => (
  반환값;
)
//  return이 한줄이라면 소괄호도 생략가능
let 함수명 = (함수에서 쓰일 매개변수) => 반환값;

함수 호출

함수호출은 아주 간단하다.

let fnc = (a,b) => a+b; // 라는 함수가 있을때
fnc(); // 함수호출이 된다. 그리고 호출할때 소괄호안에 인자가 있는데
       // 인자에 뭘 넣게되면 매개변수로 전달 된다.
console.log(fnc(1,2)); // 3
그림에 워터프린트 문자, 로고.축소판 그림 생성
iOS 입력 상자의 특수한 제한 코드 UITExtField 공유(Validation)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage