[자바스크립트 1] 변수, 배열

▼연습 웹사이트: JSFiddle 

https://jsfiddle.net/

JSFiddle - Code Playground

JavaScript + jQuery Slim 3.4.1로 맞추고 연습

---

1. 변수
2. 배열
  2-1. 선언
  2-2. 배열의 길이와 인덱스
  2-3. 반복문
  2-4. 자주 사용하는 메서드

 

 

                                        변 수                                         

자바스크립트에서 변수는 var, let, const

• 자바스크립트는 변수 선언과 동시에 값을 할당할 수 있다.

// undifined
var www;
console.log (www);

// string
var a = 'abc';
console.log(a);

// number
var b = 123;
console.log(b);

// function
var c = function(){
	return 'c function';
}
console.log(c);

// array
var d = ['1', 2, c, [], {}];
console.log(d);

// object
var e = { name: '유재석'};
console.log(e);

// boolean
var f = true;
console.log(f);

 

 

• var는 유연한 변수 선언 가능.

f = 'fff';
var f;
console.log(f);

//--------------------

// 에러 남..
k = 'kkk';
let k;
console.log(k);

 

 

• let은 변수 재선언 불가능 / var는 가능.

var a = 'aaa';		
console.log(a);		//'aaa'

var a = 'ccc';
console.log(a);		//'ccc'

//--------------------------

let b = 'bbb'
console.log(b);		//'bbb'

let b = 'ttt';	
console.log(b);		//error

 

 

• const는 변수 선언과 값을 동시에 주어야 한다. 

const aaa;
// Uncaught SyntaxError: Missing initializer in const declaration"

 

 

 

• const는 변수 재선언, 재할당 모두 불가능. (let, const는 변수 재선언 불가능)

const c = 'const입니다';
console.log(c);
//"const입니다"

const c = '변수 재선언 불가';
console.log(c);
//Uncaught SyntaxError: Identifier 'c' has already been declared"

c = '변수 재할당 불가';
console.log(c);
//Uncaught TypeError: Assignment to constant variable."

 

---

 

                                        배 열                                         

배열은 같은 자료들을 담는 자료구조 중의 하나이다.

 

😊 배열 선언

new Array 또는 [ ] 로 생성

const arr1 = new Array(1, 2, 3);
console.log(arr1);
//[1, 2, 3]

const arr2 = ['가', '나', '다'];
console.log(arr2);
//["가", "나", "다"]

 

😊 배열의 인덱스와 길이

const animal = new Array ('tiger', 'monkey', 'rabbit');
console.log(animal);
// ["tiger", "monkey", "rabbit"]

console.log(animal.length);
// 3

console.log(animal[0]);
// "tiger"

console.log(animal[2]);
// "rabbit"

console.log(animal[animal.length - 2]);
// "monkey"

 

 

😊 배열 반복문

📃 반복문 for          

const animal = ['tiger', 'monkey', 'rabbit', 'fox'];

//for 반복문: for(초기문; 조건문; 증감문)
for( let i = 0; i < animal.length; i++){
	console.log(animal[i]);
}

 

📃 반복문 for ... of           

배열의 요소 개수만큼 반복한다.

i 라는 변수에 배열 animal의 각 요소들이 순서대로 할당된다.

const animal = ['tiger', 'monkey', 'rabbit', 'fox'];

//for (변수 of 배열)
for (let i of animal){
	console.log(i);	// "tiger" "monkey" "rabbit" "fox"
}



let arr = [3, 5, 7];

// for... in
for (let i in arr) {
   console.log(i); // "0", "1", "2"
}

// for... of
for (let i of arr) {
   console.log(i); // "3", "5", "7"
}

 

 

📃 반복문 forEach()          

Array.prototype.forEach()

forEach() 메서드 : forEach( 요소 값, 인덱스, 배열)

const animal = ['tiger', 'monkey', 'rabbit', 'fox'];

animal.forEach(function (animal, index, array){
	console.log(animal, index, array);
});

 

const fruits = ['apple', 'kiwi', 'banana'];

console.log(fruits);

fruits.forEach(function(fruits, ind){
	console.log(fruits, ind);
});

 

 

 

for 와  forEach()

const items = ['item1', 'item2', 'item3'];
const copy = [];

// for 반복문
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
  console.log(items[i]);
}


// forEach()
items.forEach(function(item){
  copy.push(item);
  console.log(item);
});

 

 

😊 배열에서 자주 사용하는 메서드

      🔗 push

              배열의 가장 마지막에서부터 값을 추가한다.

const fruits = new Array(
                          'apple', 
                          'banana',
                          'orange'
                         );

fruits.push('pear', 'melon');
console.log(fruits);
// ["apple", "banana", "orange", "pear", "melon"]

 

 

      🔗 pop

                배열의 가장 마지막 값을 삭제한다.

const fruits = new Array(
                          'apple', 
                          'banana',
                          'orange'
                         );
  
fruits.push('pear', 'melon');

fruits.pop();
console.log(fruits);
// ["apple", "banana", "orange", "pear"]

 

 

      🔗 unshift

                배열의 가장 앞에서부터 값을 추가한다.

const fruits = new Array(
                          'apple', 
                          'banana',
                          'orange'
                         );
  
fruits.push('pear', 'melon');

fruits.pop();

fruits.unshift('grape');
console.log(fruits);
// ["grape", "apple", "banana", "orange", "pear"]

 

 

      🔗 shift

                배열의 가장 앞의 값을 삭제한다.

const fruits = new Array(
                          'apple', 
                          'banana',
                          'orange'
                         );
  
fruits.push('pear', 'melon');

fruits.pop();

fruits.unshift('grape');

fruits.shift();
console.log(fruits);
// ["apple", "banana", "orange", "pear"]

 

 

 

      🔗 splice

                배열에서 원하는 인덱스의 값을 삭제하거나 삭제하고 추가할 수 있다.

const fruits = new Array(
                          'apple', 
                          'banana',
                          'orange'
                         );
  
fruits.push('pear', 'melon');
fruits.pop();
fruits.unshift('grape');
fruits.shift();

fruits.splice(0, 1); // 인덱스 0부터 1개 삭제
console.log(fruits);
// ["banana", "orange", "pear"]
// 인덱스 0인 apple이 삭제됨.

fruits.splice(1); // 인덱스 1부터 뒤로 전부 삭제
console.log(fruits);
// ["banana"]
// 인덱스 0인 바나나빼고 1부터 전부 삭제됨.

fruits.splice(0, 1, 'strawberry', 'kiwi');	// 인덱스 0부터 1개 삭제하고, 그 뒤에 추가
console.log(fruits);
// ["strawberry", "kiwi"]
// 인덱스 0인 banana 삭제되고, strawberry, kiwi 추가

 

 

 

      🔗 concat

                두 개의 배열을 연결한다.

const coffee = ['americano', 'latte'];
const others = ['milk tea', 'juice'];

const menu = coffee.concat(others);

console.log(menu);
// ["americano", "latte", "milk tea", "juice"]