Javascript 핵심 익히기(2)

연산자와 조건문

 

• 연산자

-연산자는 변수들(혹은 값)을 가공할 수 있도록 도와준다.

-기본적으로 산술(덧셈, 뺄셈)을 돕는 기본 연산자, 값들을 비교하는 비교 연산자, 논리적인 순서를 제공하는 논리 연산자가 있다.

 

1. 기본 연산자

산술을 돕는 기본 연산자는 +, -, *, / 등이 있다.

var num1 = 5;
var num2 = 3;
var char1 = "경이로운";
var char2 = "소문";
var num3 = num1 + num2;
var char3 = char1 + " " + char2;
var charNumMixed = char1 + num1;

 

2. 비교 연산자

값을 서로 비교하는 >, <, <=, >=, ===, !== dl 이 있다.

비교 연산자를 거치면 boolean 값을 반환받는다.

var name = "Tom";
var isFool = true;
var num = 100;

console.log(num < 5);
console.log(name === "Tom");
console.log(name !== "홍길동");

 

3. 부정 연산자

부정 연산자 !는 true와 false를 서로 변환시켜준다.

var nope = false;
var yes = !nope //true

 

4. 논리 연산자

논리 연산자는 다른 연산자들의 실행을 논리적으로 제어하는 연산자이다.

일반적으로 비교 연산자와 콤비로 많이 사용된다. 

논리 연산자로 ||와 &&가 있다.

 

&&는 통상적으로 AND 조건이라고 부른다. 앞의 연산 결과가 true일 때 뒤의 연산 값을 반환한다.

||는 통상적으로 OR조건이라고 부른다. 앞의 연산 결과가 true일 때 앞의 연산값을 반환한다. false라면 뒤의 연산 값을 반환한다.

 

var name = "Tom";
var age = 27;

console.log(name === "Tom" && age > 25); //결과 : true
console.log(name === "Tom" && age > 30); // 결과 : false

console.log(name === "Tom" || age < 30); //결과 : true
console.log(name !== "Tom" || age > 25); //결과 : true

var nope = false;
var yes = true;
console.log(nope || yes); //결과 : true
console.log(nope && yes); // 결과 : false

 

조건문

조건문은 조건에 따라서 로직을 다르게 수행하도록 돏는다. 

예를 들어

-로그인을 한 사람에게는 프로필 이미지 보여준다. 아니라면 로그인 버튼을 보여준다.

-상품 정보들이 1개 이상이면 상품 화면들을 보여준다. 아니라면 상품 준비중이라는 화면을 보여준다.

 

조건문은 기본적으로 "if"가 사용된다. if의 안에 들어가는 값의 여부에 따라 로직의 수행 여부를 결정할 수 있다.

• true일 때는 로직을 수행함
• false 혹은 null, 0, "", undefined일 때 로직을 수행하지 않음

var name = "Tom";
var age = 25;

if (name === "Tom") {
	console.log("Hello Tom")
}

if (age > 23) { //true가 들어있기에 수행함
	console.log("23살 이상")
}

if (name) { //값이 들어있기에 수행함
	console.log("이름에 문제 있니?")
}

var empty = "";
if (empty) { //빈 값은 false와 비슷한 의미. 수행하지 않음
	console.log("수행될까?")
}

 

• if문과 더불어 같이 사용되는 else if와 else가 있다. 값이 true이면 if 안의 로직이 수행되지만 만일 아닐 경우 else로 처리해줄 수 있다.만약 3가지 이상의 로직이 각각 다른 상황에 처리되어야 한다면 else if까지도 사용한다.

var name = "Tom";
var age = 28;

if (age > 25 && name ==="Kelly") {
	console.log("he is real");
} else {
	console.log("he is fake");
}

if (age > 30) {
	console.log("어느덧 30대인가");
} else if (age > 25) {
	console.log("아직 20대다");
} else {
	console.log("철도 씹을 나이");
}

함수

함수는 작업을 수행하는 코드들을 정의하는 코드 블록이다.

함수도 변수와 마찬가지로 선언한 후 사용하면 된다. (다만 방식이 조금 다를 뿐)

함수를 선언하는 방식은 크게 2종류로 선언식과 표현식이 있다.

//함수 선언식
function sayHello(){
	console.log("say Hello");
}


//함수 표현식
const sayHello = function (){
	console.log("say Hello");
}

 

함수를 사용한다는 것은 실행한다는 것을 뜻한다. 실행할 때 소괄호()를 붙인다.

실행되면 함수의 {} 안에 있는 코드들이 실행된다.

sayHello(); //sayHello!가 출력됨

함수는 한번 만들면 재사용이 가능하기 때문에 코드를 깔끔하게 관리할 수 있다.

 

함수 인자

함수의 ()내부에 입력 값을 넣을 수도 있다. 

이를 인자 혹은 파라미터라고 한다.

function calculate(x) {
	var result = 3 * x + 5;
    console.log("결과 값은 " +result+"입니다");
}
var result = calculate(5); //결과 값은 20

var getAge = function(name, age) {
	console.log(name + "은 "+ age + "살입니다.");
}
getAge("Tom", 28); //Tom은 28살입니다.

함수 값 반환(return)

함수는 값을 반환할 수도 있다.

return이라는 표현을 통해서 값을 반환할 수 있다.

여기서 값은 모든 자료형(string, number, 배열, 객체)그리고 함수 또한 return이 가능하다.

function calculate(x) {
	var result = 3 * x + 5;
    return result;
}
var value1 = calculate(5); //calculate를 호출하면 20의 결과값을 반환한다.
var value2 = calculate(10); //calculate를 호출하면 35의 결과값을 반환한다.
console.log(value1);
console.log(value2);

//입력한 파라미터를 profile 객체로 만들어주는 함수
function getProfile(profile_name, profile_age) {
	return { //객체를 return
	name : profile_name,
	age : profile_age
	}
}
var prpofile = getPRofile("Tom", 28); //name, age를 key로 가지는 객체를 받는다.
console.log(profile.name) //톰이 출력된다.

-함수에서 return을 하게 되면 return 아래에 있는 코드는 실행되지 않는다.

return은 함수를 종료시키는 구문이기도 하다.

function sayHello() {
	console.log("실행 o");
    return;
    console.log("실행 x");
}

sayHello();

 

함수에서 주의할 점

1. 일반적으로 함수 안에 선언된 변수는 밖에서 사용이 불가능

function sayHello(){
	var name = "Tom";
}
console.log(name) //undefined가 출력됨

2. 반면 함수 밖에서 선언된 변수는 함수 {}안에서 사용이 가능하다.

var name = "민지"
function getName(){
	console.log(name);
}

getName()

{}를 기준으로 밖에 있는 변수는 안에서도 사용가능하다고 생각하면 된다.

 

반복문

반복문은 말 그대로 적혀진 코드를 반복적으로 실행시켜준다.

첫 번째 구문 : 처음 변수를 선언

두 번째 구문 : 해당 연산 결과가 false가 될 때까지 짠 코드를 반복시킨다.

세 번째 구문 : i를 1씩 증가시키는 구문

for(var i = 0; i < 10; i++){
	console.log("나는 톰이다"); //총 10번 호출
}

for문에서 사용되는 변수 i는 안에서 사용이 가능하다. 보통 안에 코드가 실행될 때 몇 번째 호출되고 있는지 알기 위해 사용한다.

for (var i = 0; i < 10; i++){
	var text = (i+1) + "번째 호출입니다"; //i는 0부터 9까지 순차적으로 들어가게 된다.
	console.log(text);
}

보통 반복문은 Array와 찰떡궁합이다. Array안에 있는 요소들을 전부 조회할 때 반복문을 사용하면 손쉽게 조회할 수 있다.

//Array를 활용한 반복문
var products = ['농구공', '축구공'];
for (var i = 0; i < products.length; i++) {
	var name = products[i]; //i는 0, 1이 차례대로 들어간다. array의 1번째, 2번째 값을 가져온다.
    console.log(name);
}